JavaScriptでは、繰り返し処理としてfor文が良く使われていますが、配列メソッドにも似たような機能を持つforEachメソッドが用意されています。

for文を使うと初期値や条件式などを細かく設定できることにも利便性を感じますが、記述が長くなりやすく、必ずしもfor文を使うのが吉とは限りません。

そこで今回は、効率良く配列の繰り返し処理が行えるforEachメソッドについて解説していきます。

以下の記事ではfor文の使い方を解説しています。
for文の基本をおさえることでforEachの理解も深まるため、ぜひ参考にしてみてください。

2021.05.05

2022.05.26

【JavaScriptの入門】繰り返し処理 -for文

プログラミングを行う際に、何かしらの条件に応じて繰り返しの処理を行う機会があります。 JavaScriptで繰り返し処理をするために用意されているのがfor文やwhile文です。 今回はfor文を取り上げて、繰り返し処理方法を解説します。 繰り返し処理 繰り返し処理とは、ある条件下におい...

forEachメソッド

forEachメソッドは、配列のすべての要素に対してコールバック関数を実行することができます。
要素一つひとつに繰り返し処理が行われ、さいごの要素まで行き渡ったら処理が終了します。
繰り返し処理を中断するbreakやcontinueが使用できない点に注意が必要です。

基本構文は以下です。

arr.forEach((value, index, array) => {
  実行したい処理
});

サンプルコード

const array = [10, 20, 30, 40, 50];

array.forEach((value, index, array) => {
  console.log(`${value}は、[${array}]の中で ${index} 番目の要素です`);
});

実行結果

// '10は、[10,20,30,40,50]の中で 0 番目の要素です'
// '20は、[10,20,30,40,50]の中で 1 番目の要素です'
// '30は、[10,20,30,40,50]の中で 2 番目の要素です'
// '40は、[10,20,30,40,50]の中で 3 番目の要素です'
// '50は、[10,20,30,40,50]の中で 4 番目の要素です'

このように、各要素をかんたんに取り出せることがforEachの特徴です。
値・インデックス・配列の最大3つの引数を記述することができ、値だけでなくインデックスを取得したい時などにも便利です。

実際には、第1, 2引数や第1引数のみ記述する場面も多くあります。
配列の単数形が第1引数の名前としてよく使われているため、参考にすると良いでしょう。

以下では、配列名をcolorsとし、第1引数をcolorとしています。

const colors = ['red', 'blue', 'yellow', 'white', 'black'];

colors.forEach((color) => {
  console.log(`My favorite color is ${color}`);
});

実行結果

// 'My favorite color is red'
// 'My favorite color is blue'
// 'My favorite color is yellow'
// 'My favorite color is white'
// 'My favorite color is black'

forEachは、配列にオブジェクトを格納した形にも使うことができます。

const lists = [
  { country: 'Japan', capital: 'Tokyo'},
  { country: 'France', capital: 'Paris'},
  { country: 'Canada', capital: 'Ottawa'},
  { country: 'Norway', capital: 'Oslo'},
  { country: 'Brazil', capital: 'Brasilia'}
];

lists.forEach((list) => {
  console.log(`The capical of ${list.country} is ${list.capital}`);
});

実行結果

// 'The capital of Japan is Tokyo'
// 'The capital of France is Paris'
// 'The capital of Canada is Ottawa'
// 'The capital of Norway is Oslo'
// 'The capital of Brazil is Brasilia'

配列の中身はオブジェクトのため、第1引数のlistとcountryやcapitalを繋げることで、キーや値をそれぞれ取得することができます。

for文との比較

forEachの基本的な使い方を掴んだところで、for文と比較してみましょう。

補足ですが、インデックスの順序通りに処理を行うことが保証されていないfor…inは、配列には不向きです。
このことから、配列の繰り返し処理にはfor…ofかforEachを使う方法が適しているため、ここではこの2つを比較していきます。

基本的な繰り返し処理

// for...ofの場合
const array = [10, 20, 30, 40, 50];

for (let item of array) {
  console.log(item); 
}
// 10
// 20
// 30
// 40
// 50
// forEachの場合
const array = [10, 20, 30, 40, 50];

array.forEach(item => console.log(item));
// 10
// 20
// 30
// 40
// 50

出力結果は同じです。
かんたんな処理の場合は、for-ofとforEachの記述量に大差はありませんが、forEachだとアロー関数を少ない記述で書くことも可能です。

処理の中断

//　for...ofの場合
const array = [1, 2, 3, 4, 5];

for (const value of array) {
  if (value === 4) break;
  console.log(value); 
}
// 1
// 2
// 3
// forEachの場合
const array = [1, 2, 3, 4, 5];

array.forEach((value) => {
  if (value === 4) break;
  console.log(value); 
});
// 'Uncaught SyntaxError: Illegal break statement'

for…ofの場合は、処理を中断させることができますが、forEachの場合は、breakやcontinueを使用することができず、エラーとなります。
条件によって処理を制御させたい場合には、forEachが使えないため、この点がforEachのデメリットにもなります。
繰り返し処理から途中で抜け出す必要がある場合には、従来型のforまたは、for…ofを使う方が賢明です。

インデックスを取得する

// for...ofの場合
const array = ['a', 'b', 'c', 'd', 'e'];

for (const [index, value] of array.entries()) {
  console.log(`${index}: ${value}`);
}
// '0: a'
// '1: b'
// '2: c'
// '3: d'
// '4: e'
// forEachの場合
const array = ['a', 'b', 'c', 'd', 'e'];

array.forEach((value, index) => {
  console.log(`${index}: ${value}`);
});
// '0: a'
// '1: b'
// '2: c'
// '3: d'
// '4: e'

どちらも同様の結果が返ります。
インデックスの取得をfor…ofで実現するには、entriesメソッドのような他のメソッドを使用する必要があったりと、少し手間がかかる印象です。
単純な繰り返し処理の中でインデックスを取得したい場合には、forEachを使う方が効率的だと言えます。

まとめ

今回は、配列の繰り返し処理に使えるforEachメソッドについて解説しました。

JavaScriptでは色々な方法で繰り返し処理を行うことができますが、配列においてはforEachを使うと便利な場面が出てくるため、覚えておきたいメソッドです。

// ポイント
* forEachメソッドは、すべての要素に対して繰り返し処理が行われる
* value, index, arrayの引数を用いることができる
* 繰り返し処理を途中で抜ける場合には、forEachは使えない

これらのポイントを意識して、配列の繰り返し処理にforEachを取り入れていきましょう。

配列メソッドの関連記事

・配列メソッド -追加・削除・抜き取り・分割・結合
・配列メソッド -検索
・配列メソッド -並び替え
・配列メソッド -繰り返し（当記事）
・配列メソッド -新しい配列
・配列メソッド -forEach・map・filterの違い