forEach文の使い方
では早速、forEach文の基本的な使い方について詳しく見ていきましょう。主に、一般的な構文や書き方などから実際の例も交えて学んでいきいます。
基本的な構文と使い方
forEach文の基本的な形は、下記のようなものです。
var array = [配列データ];
array.forEach( コールバック関数 )
一般的な使い方としては、配列.forEach( 処理 )のように配列データに対してforEachを実行します。forEach文は、配列データの値1つずつに対してコールバック関数に記述した処理を実行できます。
コールバック関数は、いくつか引数を受けとることが可能で、これにより簡単な繰り返し処理を実現しています。
配列をループさせて中身を取得する
それでは、簡単な練習として一般的な配列データをループさせながら中身の要素を取得してみましょう! 次のサンプル例を見てください。
var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];
items.forEach(function( value ) {
console.log( value );
});
実行結果
バナナ
リンゴ
メロン
ブドウ
このプログラムは、果物の名称が格納された配列「items」を使い、それぞれの名称をコンソールログで表示するという内容です。コールバック関数の引数としてvalueを設定していますが、この変数に配列の値となる果物の名称が1つずつ代入されるようになります。
for文と違って、繰り返し回数やカウンタ変数などをまったく意識せずに扱えるので、非常にシンプルにコードが書けているのが特徴ですね。
オブジェクト構造の中身を取得する
今度は、もう少し複雑な配列に挑戦してみましょう! 次のプログラムは、配列の中にオブジェクトを格納したサンプルです。
var lists = [
{ name: 'バナナ', price: '100' },
{ name: 'リンゴ', price: '200' },
{ name: 'メロン', price: '400' },
{ name: 'ブドウ', price: '250' },
];
この配列にforEach文を使って、先ほどのサンプルと同じ出力結果を表示するにはどうすれば良いでしょうか? 先に正解を書くと、次のようになります!
lists.forEach( function( value ) {
console.log( value.name );
});
出力結果
forEach文は、コールバック関数の引数valueに、配列の値が1つずつ代入される構文でした。今回の場合、配列の値がオブジェクトになっているので、そのキーとなるnameを直接指定すれば、果物の名称が1つずつ取得できるというわけです。
forEach文でJSONを取得する
この章では、JSON形式のデータの中身をforEach文で取得できるかどうかを見ていきましょう! JSONデータはJavaScriptのオブジェクト構造によく似たもので、例えばサーバー間でデータのやり取りを行う時などによく使われています。
JSONについての基礎知識やJavaScriptでの扱い方などに不安のある方は、以下の記事で詳しくまとめているので参考にしてみてください!
【JavaScript入門】JSONの作成とparse() / stringify()の使い方!
更新日 : 2019年4月23日
ここでは、サンプル例として次のようなJSONデータの文字列を用意します。
var json = '{"taro":[30,"Tokyo"],"hanako":[33,"Nagoya"]}'
この例では、「taro」「hanako」というユーザーの情報を配列構造で持ったJSONデータであることが分かりますね。このJSONの中身をforEachで取得するにはどうすれば良いでしょうか?
forEachはこれまで解説した通り「配列」に対して利用できるメソッドであるため、このままでは扱うことができません。そこで、まずはJSONをJavaScriptで扱えるオブジェクトに変換してみましょう!
var obj = JSON.parse(json);
「JSON.parse()」を使えば簡単にJSON形式からオブジェクトに変換できます。このオブジェクトの「キー」を配列構造にしてからforEachを使えば、上手くループが回せそうですね。
Object.keys(obj).forEach(function(key) {
console.log(obj[key]);
})
実行結果
[30, "Tokyo"]
[33, "Nagoya"]
この例では、「Object.keys()」を使ってオブジェクトの「キー」を配列で取得し、forEachを使ってキーに対する値を取得しています。ポイントは、forEachで取得したキーを使って「obj[key]」のように記述することで値が取得できるという点です。
breakやcontinueは使えない!
forEachはfor文と違い、繰り返し処理を中断するbreakやcontinueが使えません。例えば、指定した配列要素を検出した場合にbreakさせる処理を記述してみましょう。
var array = [1,2,3,4,5];
array.forEach(function( value ) {
if( value == 3 ) break;
console.log( value );
})
この例は、配列要素の中で「3」を検出した場合に繰り返し処理を中断しようとしています。しかし、breakは利用できないので実際にはエラーとなってしまうのです。(continueも同様です)そのため、同じようなことを実現しようとするならfor文を利用するようにしましょう。
var array = [1,2,3,4,5];
for( var i=0; i<array.length; i++) {
if( array[i] == 3) break;
console.log( array[i] );
}
この例なら正常に実行されて、繰り返し処理を中断することができます。
forEach文のコールバック関数
ここから、さらにforEach文を使いこなせるように発展した内容を解説していきます。まずは、コールバック関数の使い方について詳しく見ていきましょう。関数の引数として利用できる値の使い方やオブジェクトの組み込みかたについて学んでいきます。
コールバック関数の使い方
コールバック関数は引数として3つの値を受け取ることができます。
array.forEach( function( value, index, array ) {
// 繰り返し処理を書く
});
上記のとおり、value、index、arrayの3つの引数を取得できます。
それぞれの意味は次のとおりです。
- value:配列データの値
- index:配列のインデックス番号
- array:現在処理している配列
例として、配列の奇数になる値だけを抽出して表示するプログラムを作ってみましょう!
var lists = [ 1, 2, 3, 4, 5, 6, 7, 8 ];
lists.forEach( function( value, index ) {
if( index % 2 === 0 ) console.log( value );
});
このプログラムでは、配列のインデックス番号となる引数「index」を使って奇数となる値を抽出していますね。さらに、配列の元データをすべて2倍にして上書きするプログラムにしてみましょう。
var lists = [ 1, 2, 3, 4, 5, 6, 7, 8 ];
lists.forEach( function( value, index, array ) {
array[ index ] = value * 2;
});
console.log( lists );
コールバック関数の引数「array」は、現在処理している配列の元データが格納されています。そこで、元データにindexを組み合わせて変更&上書きする処理を作っています。元の配列「lists」の中身を見てみると、「2, 4, 6, 8, 10, 12, 14, 16」となっており、すべて2倍に変更されているのが分かりますね。
第2引数にオブジェクトを設定する
ここからはforEach文の少し特殊な使い方を学習しておきましょう! 冒頭で、forEach文の一般的な構文を次のように紹介しました。
var array = [配列データ];
array.forEach( コールバック関数 )
この構文にはちょっとした秘密があります。なんと、任意のオブジェクトをコールバック関数内の「this」として設定することができるのです。これはforEach文の第2引数にオブジェクトを指定することで実現します。
array.forEach( コールバック関数, オブジェクト )
簡単なサンプルで練習してみましょう! 例えば、果物の価格を格納している次のようなオブジェクトがあったとします。
var priceLists = {
'バナナ': 100,
'リンゴ': 200,
'メロン': 400,
'ブドウ': 250
}
このオブジェクト「priceLists」を、今までどおりのforEach文に組み込んでみると次のようになります。
lists.forEach( function( value ) {
// この「this」は、「priceLists」を参照する
console.log( this );
}, priceLists )
コードの最後に、「priceLists」が第2引数として記述されているのが分かりますね。この状態にしておけば、コールバック関数内の「this」は、オブジェクト「priceLists」を参照するようになるわけです。例えば、次のように書くと果物の価格を表示できるようになります。
var priceLists = {
'バナナ': 100,
'リンゴ': 200,
'メロン': 400,
'ブドウ': 250
}
var lists = [ 'バナナ', 'ブドウ' ];
lists.forEach( function( value ) {
console.log( value + 'の価格は' + this[value] + '円です' );
}, priceLists )
出力結果
- バナナの価格は100円です
- ブドウの価格は250円です
valueは配列「lists」の値を取得し、「this[value]」はオブジェクト「priceLists」の値を取得するという点がポイントです。少し特殊な使用方法ですが、必要に応じて使い分けて活用してください。
forEach文の類似メソッド
JavaScriptのforEach文には、ちょっと似ているメソッドが存在しています。間違わないよう、違いをしっかり確認していきましょう!
$.eachとの違い
JavaScriptをより簡潔に記述する為の便利なライブラリといえば、jQueryですね。jQueryには、forEach文と似たメソッドが存在します。
それが、eachメソッドです。jQueryのeachメソッドについて詳しく知りたい方は以下の記事を読んでみてください。
>>jQueryで繰り返し処理!eachメソッドの使い方
配列の要素を順に繰り返し処理することができる点では同じですが、異なる点も存在します。どんな違いがあるのか見ていきましょう!
コールバック関数の引数の構成が違う
先ほど解説した通り、forEach文のコールバック関数では3つの引数がセットされました。
array.forEach( function( value, index, array ) {
// 繰り返し処理
});
jQueryのeachメソッドの場合、コールバック関数(function)の第一引数はindex、第二引数はvalueになります。指定する位置が逆になりますので、注意が必要です。
$.each(array,function(index,value){
// 繰り返し処理
});)
繰り返し処理から抜けることができる
JavaScriptのforEach文はループ処理(繰り返し処理)を途中で止めることができませんね。しかし、jQueryのeachメソッドではreturn falseを記述することで実現可能です。
JavaScriptで同じように配列要素の繰り返し処理を途中で止めるためには、forEachメソッドの代わりにfor文を使うようにしましょう。
mapとの違い
こちらはJavaScriptのメソッド同士での違いですね。mapはforEach文と同じく、配列データに対して繰り返し処理ができるメソッドです。記述方法もほとんど同じなのですが、決定的に違うのは返り値があるかどうかという点です。
次の例を見てください。
var array = [1,2,3,4,5];
var newArray = [];
array.forEach(function( value ) {
var result = value * 2;
newArray.push( result );
})
console.log( newArray );
この例では、配列「array」に格納されている要素をそれぞれ2倍にした値を新しい配列「newArray」に格納しています。この内容と全く同じ処理をmapの返り値を使って実現すると次のようになります。
var array = [1,2,3,4,5];
var newArray = array.map(function( value ) {
return value * 2;
})
console.log( newArray );
処理がスッキリしましたね。注目すべきはmap内の処理でreturnを利用している点です。これにより、2倍にした値を返り値として新しい配列「newArray」に格納できるわけです。mapのさらなる活用事例は下記の記事でまとめているので、ぜひ参考にしてみてください。
>>スッキリコードで繰り返し処理!mapの使い方
forEach文の使い方まとめ
最後に、forEach文の基本的な使い方をまとめておきます。一般的な配列をループさせて中身を取得するには、次のように記述します。
var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];
items.forEach(function( value ) {
console.log( value );
});
配列に続けてforEachを実行し、コールバック関数内に必要な処理を記述します。また、配列内にオブジェクト構造がある場合のforEachは次の通りです。
var lists = [
{ name: 'バナナ', price: '100' },
{ name: 'リンゴ', price: '200' },
{ name: 'メロン', price: '400' },
{ name: 'ブドウ', price: '250' }
];
lists.forEach( function( value ) {
console.log( value.name );
});
コールバック関数の引数に続けてオブジェクトのプロパティ名を指定すれば、対応する値を取得することができます。コールバック関数で受け取れる引数は3種類あります。
array.forEach( function( value, index, array ) {
// 繰り返し処理を書く
});
上記のとおり、value、index、arrayの3つの引数を取得できます。それぞれの意味は次のとおりです。
- value:配列データの値
- index:配列のインデックス番号
- array:現在処理している配列
ちなみに、forEachには第2引数へ任意のオブジェクトを設定することも可能です。
array.forEach( コールバック関数, オブジェクト )
これにより、コールバック関数内で任意のオブジェクトを組み合わせた処理を簡単に記述することができるので覚えておきましょう!
まとめ
今回はforEach文の基本的な使い方から、ちょっと特殊な応用技まで学習してきました。
簡単にまとめると次のようになります!
- 配列の値にコールバック関数から1つずつ処理を行える!
- 3つの引数を上手に活用することで、配列処理を効率よく書ける!
- 任意のオブジェクトをコールバック関数のthisとして指定することが可能!
- 類似メソッドとして$.eachや$.mapがある
これらのポイントを理解しつつ、ぜひ自分なりのforEach文の使い方を模索していってくださいね!