【JavaScript入門】forEach文の使い方と配列の繰り返し処理まとめ！

プログラミングの必須スキル、繰り返し処理って活用できていますか？
中でも配列を使った繰り返し処理は、汎用性も高く、効率のよいコードを書くことができます。

でも、配列の繰り返し処理ってどうやればいいんだろう…

今回はそんな方必見！JavaScriptで効率よく配列の中身を取り出すことができる、forEach文について学習をしていきましょう。

下記の流れで、forEach文をバッチリ使いこなせるよう解説していきます。

【基礎】forEach文とは？
【基礎】forEach文の使い方
【基礎】forEach文でJSONを取得する
【発展】breakやcontinueは使えない！
【発展】forEach文のコールバック関数
【発展】forEach文の類似メソッド
【発展】forEach文の使い方まとめ

この記事で、forEach文をしっかり学習して自分のスキルアップを目指しましょう！

＞＞＞今すぐ「forEach文」の使い方を知りたい方はこちら

この記事の目次

1 forEach文とは？
2 forEach文の使い方
3 forEach文でJSONを取得する
4 breakやcontinueは使えない！
5 forEach文のコールバック関数
- 5.1 コールバック関数の使い方
- 5.2 第2引数にオブジェクトを設定する
6 forEach文の類似メソッド
- 6.1 $.eachとの違い
- 6.2 mapとの違い
7 forEach文の使い方まとめ
8 まとめ

forEach文とは？

それでは、まず最初にforEach文について基本的な知識から身に付けていきましょう！　forEach文は、配列データに特化した繰り返し処理を簡単に実行できるメソッドになります。

例えば、配列の中身を取り出すには一般的に下記のようなfor文を使いますよね？

var array = [1,2,3,4,5];

for( var i=0; i<array.length; i++) {
  
  console.log( array[i] );

}

var array = [1,2,3,4,5];

for( var i=0; i<array.length; i++) {

console.log( array[i] );

}

これでも良いのですが、ループの終了条件やカウンターなどの設定が必要なので少し面倒な部分もあります。しかし、forEach文を使えばこのような初期設定が不要でとても効率よく記述できるのです。

また、コールバック関数も使えるので複雑な条件分岐処理もスマートに実装できます。これは使わない手はないですね！

forEach文よりも先に、基本的な繰り返し処理となるfor文について確認しておきたい…

という方は、下記の記事でバッチリ学んでおきましょう！

>>要素を繰り返し処理！for文の使い方

forEach文の使い方

では早速、forEach文の基本的な使い方について詳しく見ていきましょう。主に、一般的な構文や書き方などから実際の例も交えて学んでいきいます。

基本的な構文と使い方

forEach文の基本的な形は、下記のようなものです。

var array = [配列データ];

array.forEach( コールバック関数 )

var array = [配列データ];

array.forEach( コールバック関数 )

一般的な使い方としては、配列.forEach( 処理 )のように配列データに対してforEachを実行します。forEach文は、配列データの値1つずつに対してコールバック関数に記述した処理を実行できます。

コールバック関数は、いくつか引数を受けとることが可能で、これにより簡単な繰り返し処理を実現しています。

配列をループさせて中身を取得する

それでは、簡単な練習として一般的な配列データをループさせながら中身の要素を取得してみましょう！　次のサンプル例を見てください。

var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];

items.forEach(function( value ) {
     console.log( value );
});

var items = [ 'バナナ', 'リンゴ', 'メロン', 'ブドウ' ];

items.forEach(function( value ) {

console.log( value );

});

実行結果

バナナ
リンゴ
メロン
ブドウ

バナナ

リンゴ

メロン

ブドウ

このプログラムは、果物の名称が格納された配列「items」を使い、それぞれの名称をコンソールログで表示するという内容です。コールバック関数の引数としてvalueを設定していますが、この変数に配列の値となる果物の名称が１つずつ代入されるようになります。

for文と違って、繰り返し回数やカウンタ変数などをまったく意識せずに扱えるので、非常にシンプルにコードが書けているのが特徴ですね。

オブジェクト構造の中身を取得する

今度は、もう少し複雑な配列に挑戦してみましょう！　次のプログラムは、配列の中にオブジェクトを格納したサンプルです。

var lists = [

    { name: 'バナナ', price: '100' },
    { name: 'リンゴ', price: '200' },
    { name: 'メロン', price: '400' },
    { name: 'ブドウ', price: '250' },

];

var lists = [

{ name: 'バナナ', price: '100' },

{ name: 'リンゴ', price: '200' },

{ name: 'メロン', price: '400' },

{ name: 'ブドウ', price: '250' },

];

この配列にforEach文を使って、先ほどのサンプルと同じ出力結果を表示するにはどうすれば良いでしょうか？　先に正解を書くと、次のようになります！

lists.forEach( function( value ) {

    console.log( value.name );

});

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"]}'

1	var json = '{"taro":[30,"Tokyo"],"hanako":[33,"Nagoya"]}'

この例では、「taro」「hanako」というユーザーの情報を配列構造で持ったJSONデータであることが分かりますね。このJSONの中身をforEachで取得するにはどうすれば良いでしょうか？

forEachはこれまで解説した通り「配列」に対して利用できるメソッドであるため、このままでは扱うことができません。そこで、まずはJSONをJavaScriptで扱えるオブジェクトに変換してみましょう！

var obj = JSON.parse(json);

1	var obj = JSON.parse(json);

「JSON.parse()」を使えば簡単にJSON形式からオブジェクトに変換できます。このオブジェクトの「キー」を配列構造にしてからforEachを使えば、上手くループが回せそうですね。

Object.keys(obj).forEach(function(key) {

    console.log(obj[key]);

})

Object.keys(obj).forEach(function(key) {

console.log(obj[key]);

})

実行結果

[30, "Tokyo"]

[33, "Nagoya"]

[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 );
  
})

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] );

}

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 ) {

  // 繰り返し処理を書く

});

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 );

});

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 );

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( コールバック関数 )

var array = [配列データ];

array.forEach( コールバック関数 )

この構文にはちょっとした秘密があります。なんと、任意のオブジェクトをコールバック関数内の「this」として設定することができるのです。これはforEach文の第2引数にオブジェクトを指定することで実現します。

array.forEach( コールバック関数, オブジェクト )

1	array.forEach( コールバック関数, オブジェクト )

簡単なサンプルで練習してみましょう！　例えば、果物の価格を格納している次のようなオブジェクトがあったとします。

var priceLists = {

    'バナナ': 100,
    'リンゴ': 200,
    'メロン': 400,
    'ブドウ': 250

}

var priceLists = {

'バナナ': 100,

'リンゴ': 200,

'メロン': 400,

'ブドウ': 250

}

このオブジェクト「priceLists」を、今までどおりのforEach文に組み込んでみると次のようになります。

lists.forEach( function( value ) {

    // この「this」は、「priceLists」を参照する
    console.log( this );

}, priceLists )

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 )

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 ) {
 
  // 繰り返し処理
 
});

array.forEach( function( value, index, array ) {

// 繰り返し処理

});

jQueryのeachメソッドの場合、コールバック関数(function)の第一引数はindex、第二引数はvalueになります。指定する位置が逆になりますので、注意が必要です。

$.each(array,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 );

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 );

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 );
});

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 );
});

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 ) {
    // 繰り返し処理を書く
});

array.forEach( function( value, index, array ) {

// 繰り返し処理を書く

});

上記のとおり、value、index、arrayの3つの引数を取得できます。それぞれの意味は次のとおりです。

value：配列データの値
index：配列のインデックス番号
array：現在処理している配列

ちなみに、forEachには第2引数へ任意のオブジェクトを設定することも可能です。

array.forEach( コールバック関数, オブジェクト )

1	array.forEach( コールバック関数, オブジェクト )

これにより、コールバック関数内で任意のオブジェクトを組み合わせた処理を簡単に記述することができるので覚えておきましょう！

まとめ

今回はforEach文の基本的な使い方から、ちょっと特殊な応用技まで学習してきました。

簡単にまとめると次のようになります！

配列の値にコールバック関数から1つずつ処理を行える！
3つの引数を上手に活用することで、配列処理を効率よく書ける！
任意のオブジェクトをコールバック関数のthisとして指定することが可能！
類似メソッドとして$.eachや$.mapがある

これらのポイントを理解しつつ、ぜひ自分なりのforEach文の使い方を模索していってくださいね！

未来に繋がるプログラミング学習、できていますか？

エンジニアと一口にいっても、フロントエンド、サーバーサイド、アプリ開発、AI関連など様々な業界や職種があり、業務内容や働き方、年収は変わります。

どんな働き方をしたいのか、どのくらい年収が欲しいのかなど具体的なキャリアパスを考えて、それを達成できる学習カリキュラムを考えていかないと、希望する方向性とは違うエンジニアになってしまったり、遠回りの学習に時間を費やしてしまう可能性があります。

侍エンジニア塾では目的から逆算する形で、まずあなたの目指すキャリアをヒアリングさせて頂いてからそれを達成するためのオリジナルの学習カリキュラムを作成しています。

今学んでいることが理想のエンジニアになるために繋がっているか不安でしたら、下記の無料体験レッスン予約カレンダーよりお気軽にご相談ください。