プログラミングの必須スキル、繰り返し処理って活用できていますか？
中でも配列を使った繰り返し処理は、汎用性も高く、効率のよいコードを書くことができます。
今回はそんな方必見！
JavaScriptで効率よく配列の中身を取り出すことができる、forEach文について学習をしていきましょう。
下記の流れで、forEach文をバッチリ使いこなせるよう解説していきます。
【基礎】forEach文の使い方
【基礎】forEach文でJSONを取得する
【発展】breakやcontinueは使えない！
【発展】forEach文のコールバック関数
【発展】forEach文の類似メソッド
【発展】forEach文の使い方まとめ
この記事で、forEach文をしっかり学習して自分のスキルアップを目指しましょう！
＞＞＞ 今すぐ「forEach文」の使い方を知りたい方はこちら
この記事の目次
forEach文とは？
それでは、まず最初にforEach文について基本的な知識から身に付けていきましょう！
forEach文は、配列データに特化した繰り返し処理を簡単に実行できるメソッドになります。例えば、配列の中身を取り出すには一般的に下記のようなfor文を使いますよね？
|
1 2 3 4 5 6 7 |
var array = [1,2,3,4,5]; for( var i=0; i<array.length; i++) { console.log( array[i] ); } |
これでも良いのですが、ループの終了条件やカウンターなどの設定が必要なので少し面倒な部分もあります。
しかし、forEach文を使えばこのような初期設定が不要でとても効率よく記述できるのです。
また、コールバック関数も使えるので複雑な条件分岐処理もスマートに実装できます。
これは使わない手はないですね！
forEach文よりも先に、基本的な繰り返し処理となるfor文について確認しておきたい…
という方は、下記の記事でバッチリ学んでおきましょう！
forEach文の使い方
では早速、forEach文の基本的な使い方について詳しく見ていきましょう。
主に、一般的な構文や書き方などから実際の例も交えて学んでいきいます。
基本的な構文と使い方
forEach文の基本的な形は、下記のようなものです。|
1 2 3 |
var array = [配列データ]; array.forEach( コールバック関数 ) |
一般的な使い方としては、配列.forEach( 処理 )のように配列データに対してforEachを実行します。
forEach文は、配列データの値1つずつに対してコールバック関数に記述した処理を実行できます。
コールバック関数は、いくつか引数を受けとることが可能で、これにより簡単な繰り返し処理を実現しています。配列をループさせて中身を取得する
それでは、簡単な練習として一般的な配列データをループさせながら中身の要素を取得してみましょう！
次のサンプル例を見てください。
|
1 2 3 4 5 |
var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ]; items.forEach(function( value ) { console.log( value ); }); |
実行結果
|
1 2 3 4 |
バナナ リンゴ メロン ブドウ |
このプログラムは、果物の名称が格納された配列「items」を使い、それぞれの名称をコンソールログで表示するという内容です。
コールバック関数の引数としてvalueを設定していますが、この変数に配列の値となる果物の名称が１つずつ代入されるようになります。
for文と違って、繰り返し回数やカウンタ変数などをまったく意識せずに扱えるので、非常にシンプルにコードが書けているのが特徴ですね。
オブジェクト構造の中身を取得する
今度は、もう少し複雑な配列に挑戦してみましょう！
次のプログラムは、配列の中にオブジェクトを格納したサンプルです。
|
1 2 3 4 5 6 7 8 |
var lists = [ { name: 'バナナ', price: '100' }, { name: 'リンゴ', price: '200' }, { name: 'メロン', price: '400' }, { name: 'ブドウ', price: '250' }, ]; |
この配列にforEach文を使って、先ほどのサンプルと同じ出力結果を表示するにはどうすれば良いでしょうか？
先に正解を書くと、次のようになります！
|
1 2 3 4 5 |
lists.forEach( function( value ) { console.log( value.name ); }); |
出力結果
リンゴ
メロン
ブドウ
forEach文は、コールバック関数の引数valueに、配列の値が1つずつ代入される構文でした。
今回の場合、配列の値がオブジェクトになっているので、そのキーとなるnameを直接指定すれば、果物の名称が1つずつ取得できるというわけです。
forEach文でJSONを取得する
この章では、JSON形式のデータの中身をforEach文で取得できるかどうかを見ていきましょう！
JSONデータはJavaScriptのオブジェクト構造によく似たもので、例えばサーバー間でデータのやり取りを行う時などによく使われています。
JSONについての基礎知識やJavaScriptでの扱い方などに不安のある方は、以下の記事で詳しくまとめているので参考にしてみてください！
ここでは、サンプル例として次のようなJSONデータの文字列を用意します。
|
1 |
var json = '{"taro":[30,"Tokyo"],"hanako":[33,"Nagoya"]}' |
この例では、「taro」「hanako」というユーザーの情報を配列構造で持ったJSONデータであることが分かりますね。
このJSONの中身をforEachで取得するにはどうすれば良いでしょうか？
forEachはこれまで解説した通り「配列」に対して利用できるメソッドであるため、このままでは扱うことができません。
そこで、まずはJSONをJavaScriptで扱えるオブジェクトに変換してみましょう！
|
1 |
var obj = JSON.parse(json); |
「JSON.parse()」を使えば簡単にJSON形式からオブジェクトに変換できます。
このオブジェクトの「キー」を配列構造にしてからforEachを使えば、上手くループが回せそうですね。
|
1 2 3 4 5 |
Object.keys(obj).forEach(function(key) { console.log(obj[key]); }) |
実行結果
|
1 2 3 |
[30, "Tokyo"] [33, "Nagoya"] |
この例では、「Object.keys()」を使ってオブジェクトの「キー」を配列で取得し、forEachを使ってキーに対する値を取得しています。
ポイントは、forEachで取得したキーを使って「obj[key]」のように記述することで値が取得できるという点です。
breakやcontinueは使えない！
forEachはfor文と違い、繰り返し処理を中断するbreakやcontinueが使えません。
例えば、指定した配列要素を検出した場合にbreakさせる処理を記述してみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
var array = [1,2,3,4,5]; array.forEach(function( value ) { if( value == 3 ) break; console.log( value ); }) |
この例は、配列要素の中で「3」を検出した場合に繰り返し処理を中断しようとしています。
しかし、breakは利用できないので実際にはエラーとなってしまうのです。（continueも同様です）
そのため、同じようなことを実現しようとするならfor文を利用するようにしましょう。
|
1 2 3 4 5 6 7 8 9 |
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つの値を受け取ることができます。|
1 2 3 4 5 |
array.forEach( function( value, index, array ) { // 繰り返し処理を書く }); |
上記のとおり、value、index、arrayの3つの引数を取得できます。
それぞれの意味は次のとおりです。
index：配列のインデックス番号
array：現在処理している配列
例として、配列の奇数になる値だけを抽出して表示するプログラムを作ってみましょう！
|
1 2 3 4 5 6 7 |
var lists = [ 1, 2, 3, 4, 5, 6, 7, 8 ]; lists.forEach( function( value, index ) { if( index % 2 === 0 ) console.log( value ); }); |
このプログラムでは、配列のインデックス番号となる引数「index」を使って奇数となる値を抽出していますね。
さらに、配列の元データをすべて2倍にして上書きするプログラムにしてみましょう。
|
1 2 3 4 5 6 7 8 9 |
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文の一般的な構文を次のように紹介しました。
|
1 2 3 |
var array = [配列データ]; array.forEach( コールバック関数 ) |
この構文にはちょっとした秘密があります。
なんと、任意のオブジェクトをコールバック関数内の「this」として設定することができるのです。
これはforEach文の第2引数にオブジェクトを指定することで実現します。
|
1 |
array.forEach( コールバック関数, オブジェクト ) |
簡単なサンプルで練習してみましょう！
例えば、果物の価格を格納している次のようなオブジェクトがあったとします。
|
1 2 3 4 5 6 7 8 |
var priceLists = { 'バナナ': 100, 'リンゴ': 200, 'メロン': 400, 'ブドウ': 250 } |
このオブジェクト「priceLists」を、今までどおりのforEach文に組み込んでみると次のようになります。
|
1 2 3 4 5 6 |
lists.forEach( function( value ) { // この「this」は、「priceLists」を参照する console.log( this ); }, priceLists ) |
コードの最後に、「priceLists」が第2引数として記述されているのが分かりますね。
この状態にしておけば、コールバック関数内の「this」は、オブジェクト「priceLists」を参照するようになるわけです。
例えば、次のように書くと果物の価格を表示できるようになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var priceLists = { 'バナナ': 100, 'リンゴ': 200, 'メロン': 400, 'ブドウ': 250 } var lists = [ 'バナナ', 'ブドウ' ]; lists.forEach( function( value ) { console.log( value + 'の価格は' + this[value] + '円です' ); }, priceLists ) |
出力結果
ブドウの価格は250円です
valueは配列「lists」の値を取得し、「this[value]」はオブジェクト「priceLists」の値を取得するという点がポイントです。
少し特殊な使用方法ですが、必要に応じて使い分けて活用してください。
forEach文の類似メソッド
JavaScriptのforEach文には、ちょっと似ているメソッドが存在しています。
間違わないよう、違いをしっかり確認していきましょう！
$.eachとの違い
JavaScriptをより簡潔に記述する為の便利なライブラリといえば、jQueryですね。
jQueryには、forEach文と似たメソッドが存在します。
それが、eachメソッドです。
jQueryのeachメソッドについて詳しく知りたい方は以下の記事を読んでみてください。
配列の要素を順に繰り返し処理することができる点では同じですが、異なる点も存在します。
どんな違いがあるのか見ていきましょう！
コールバック関数の引数の構成が違う
先ほど解説した通り、forEach文のコールバック関数では3つの引数がセットされました。
|
1 2 3 4 5 |
array.forEach( function( value, index, array ) { // 繰り返し処理 }); |
jQueryのeachメソッドの場合、コールバック関数(function)の第一引数はindex、第二引数はvalueになります。
指定する位置が逆になりますので、注意が必要です。
|
1 2 3 |
$.each(array,function(index,value){ // 繰り返し処理 });) |
繰り返し処理から抜けることができる
JavaScriptのforEach文はループ処理（繰り返し処理）を途中で止めることができませんね。
しかし、jQueryのeachメソッドではreturn falseを記述することで実現可能です。
JavaScriptで同じように配列の要素の繰り返し処理を途中で止めるためには、forEachメソッドの代わりにsomeメソッドを利用する必要があります。
someメソッドについては以下の記事で詳しく解説をしていますので、ぜひ参考にしてください。
mapとの違い
こちらはJavaScriptのメソッド同士での違いですね。
mapはforEach文と同じく、配列データに対して繰り返し処理ができるメソッドです。記述方法もほとんど同じなのですが、決定的に違うのは返り値があるかどうかという点です。
次の例を見てください。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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の返り値を使って実現すると次のようになります。
|
1 2 3 4 5 6 7 8 9 |
var array = [1,2,3,4,5]; var newArray = array.map(function( value ) { return value * 2; }) console.log( newArray ); |
処理がスッキリしましたね。
注目すべきはmap内の処理でreturnを利用している点です。
これにより、2倍にした値を返り値として新しい配列「newArray」に格納できるわけです。
mapのさらなる活用事例は下記の記事でまとめているので、ぜひ参考にしてみてください。
forEach文の使い方まとめ
最後に、forEach文の基本的な使い方をまとめておきます。
一般的な配列をループさせて中身を取得するには、次のように記述します。
|
1 2 3 4 5 |
var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ]; items.forEach(function( value ) { console.log( value ); }); |
配列に続けてforEachを実行し、コールバック関数内に必要な処理を記述します。
また、配列内にオブジェクト構造がある場合のforEachは次の通りです。
|
1 2 3 4 5 6 7 8 9 10 |
var lists = [ { name: 'バナナ', price: '100' }, { name: 'リンゴ', price: '200' }, { name: 'メロン', price: '400' }, { name: 'ブドウ', price: '250' } ]; lists.forEach( function( value ) { console.log( value.name ); }); |
コールバック関数の引数に続けてオブジェクトのプロパティ名を指定すれば、対応する値を取得することができます。
コールバック関数で受け取れる引数は3種類あります。
|
1 2 3 |
array.forEach( function( value, index, array ) { // 繰り返し処理を書く }); |
上記のとおり、value、index、arrayの3つの引数を取得できます。
それぞれの意味は次のとおりです。
index：配列のインデックス番号
array：現在処理している配列
ちなみに、forEachには第2引数へ任意のオブジェクトを設定することも可能です。
|
1 |
array.forEach( コールバック関数, オブジェクト ) |
これにより、コールバック関数内で任意のオブジェクトを組み合わせた処理を簡単に記述することができるので覚えておきましょう！
まとめ
今回はforEach文の基本的な使い方から、ちょっと特殊な応用技まで学習してきました。
簡単にまとめると次のようになります！
・3つの引数を上手に活用することで、配列処理を効率よく書ける！
・任意のオブジェクトをコールバック関数のthisとして指定することが可能！
・類似メソッドとして$.eachmapがある
これらのポイントを理解しつつ、ぜひ自分なりのforEach文の使い方を模索していってくださいね！
JavaScriptカリキュラム無料公開中！
この記事はJavaScript入門完全攻略ガイド【基礎学習/アプリ開発/仕事獲得】の一部になります。このカリキュラムは、プログラミング入門者が、JavaScriptの基礎学習からアプリ開発、さらには仕事獲得まで体系的に学べる内容となっています。
JavaScript学習に必要な情報を一つにまとめていますので効率よくJavaScriptを学ぶことが出来ます。この機会に是非活用していただければと思います。
JavaScriptを最短で習得したい方へ
弊社マンツーマンレッスンでは、未経験者の方でも安心して学習できるように
- プログラミング基礎学習
- オリジナルアプリ開発
- 仕事獲得
まで徹底したサポートを行っています。
まずは『無料体験レッスン』で、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか？
JavaScriptならではの学習方法や仕事獲得方法など、より具体的なアドバイスもさせていただいています。
詳しくは下の画像をクリックして弊社サービス内容をご確認ください。
非常識な結果を出す卒業生多数！
エンジニアキャリア戦略
人気記事セレクション
3000名以上来場の人気セミナーが開催決定
18歳で時給6000円だった侍エンジニア塾代表の木内より、『プログラミングで人生を変える』ための学習方法をお教えます。0からプログラミングを習得し、フリーランスエンジニアになる方法やプログラミング学習の効率を劇的に上げる学習メソッドを解説しますので、奮ってご参加ください。
- 日付：3/30（日）
- 時間：14：00〜17：00終了予定
- 場所：当社 道玄坂オフィス
- 住所：〒150-0043 東京都渋谷区道玄坂2丁目11-1 Ｇスクエア渋谷道玄坂 4F ＊Googleマップでは「東京都渋谷区道玄坂2丁目11-1」で検索してください。近隣にスクエア渋谷という別のビルがあるためご留意ください。
- 参加費：無料
- URL：https://seminar.sejuku.net/
