JavaScriptで文字列をfor-in文で処理する方法を現役エンジニアが解説【初心者向け】

JavaScriptで文字列をfor-in文で処理する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• for-in文とは
• for-in文の使い方
• 実際に使ってみよう
• まとめ

 

for-in文とは

指定したオブジェクトの列挙可能プロパティに対して、順不同でループ処理をおこなう構文です。オブジェクトとは、下記の場合だとuserという変数に格納されている{から}までの名前や年齢のデータの集まりです。

let user = {
  name: '山田',
  age: '15',
  hairColor: '黒'
}

また、プロパティはオブジェクトの値に付いた名前のようなもので、上記の例だとnameやage、hairColorがプロパティです。プロパティの名前は、JavaScriptの標準で組み込まれているオブジェクトであるObjectのkeysメソッドでも取得できます。

for-inはこのプロパティを順不同で反復してくれるので、オブジェクトの中をまとめて処理したい場合に便利です。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

for-in文の使い方

for文と記述は似ています。for文の式を下記のように、変数名 in オブジェクト名　という形で記述することで変数名の中にオブジェクトのプロパティ名が格納され反復します。

for( 【プロパティ名を格納する変数名】 in 【オブジェクトの名前】){
  
}

 

実際に使ってみよう

for-in文では、順不同でプロパティ名を反復し、そのプロパティ名を使って処理をしていくことになります。まずは、for-in文の前にプロパティ名を使ったオブジェクトの値のアクセス方法2つをおさらいしましょう。

1、ドット表記法

その名のとおり.（ドット）でオブジェクト名とプロパティ名をつなぎます。

オブジェクト名.プロパティ名

2、ブラケット表記法

[]（ブラケット）をつかってオブジェクト名とプロパティ名をつなぎます。
ブラケットの中は、プロパティ名の文字列かプロパティ名を格納した変数になります。

オブジェクト名['プロパティ名']
または
オブジェクト名[プロパティ名を格納した変数]

for-in文ではプロパティ名が指定した変数に格納されているので、2つ目のブラケット表記法で値を操作することになります。それではfor-in文を実際に使ってみます。

userという変数に名前や年齢などをもつオブジェクトが格納されています。このオブジェクトにfor-in文を使って、値をコンソールに出力していきます。

let user = {
  name: '山田',
  age: '15',
  hairColor: '黒'
}

for( key in user){
  console.log( user[key] );
}

今回はkeyという変数にプロパティ名が格納されますので、あとはブラケットでつなげて値を取得します。これで、コンソールには下記のように表示されました。

山田
15
黒

 

まとめ

for-in文の紹介をしました。

ポイントとしては、順不同でプロパティ名を反復するのでオブジェクトに対して使い、配列のような順番に意味があるものには使用しないことです。

筆者プロフィール

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。