JavaScript (JS) の forEach の使い方 | 配列の要素をループで扱うには？

2024-01-11

当サイトでは一部リンクに広告が含まれています

JavaScriptには、配列の要素を一つずつ取り出し、それぞれに対して同じ操作を行うためのforEachメソッドがあります。

このメソッドを使うことで、コードが簡潔になり、複雑な処理も容易に扱えるようになります。

本記事では、forEachメソッドの基本的な使い方から、実際のコード例を交えて解説します。

この記事を書いてる人

現役のフルスタックWebエンジニア
プログラミングスクール講師
初心者向けの記事やWeb書籍を多数執筆

それでは、実際に解説していきます！

forEachメソッドとは

JavaScriptで使われるforEachメソッドは、配列の要素を一つずつ取り出し、それぞれに対して同じ操作を行うためのメソッドです。

配列内の全ての要素に対して、順番に処理を適用することができます。

これにより、コードが簡潔になり、複雑な処理も容易に扱えるようになります。

forEachメソッドの使い方

forEachメソッドの基本的な使い方

forEachメソッドを使うための基本形は、配列に.forEach()メソッドを適用し、その後に処理を記述するコールバック関数を渡すことです。

このコールバック関数内に、配列の各要素に対して行いたい具体的な処理を記述します。

例：

let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(fruit => {
  console.log(fruit);
});

// 出力結果
// apple
// banana
// cherry

このコードでは、fruits配列の各要素を順番に取り出し、コールバック関数内でconsole.log()メソッドを使って画面に表示しています。

forEachメソッドで配列の各要素を処理する

forEachメソッドは、配列内の各要素に対して同じ処理を適用したい場合に特に役立ちます。

例えば、数値の配列に対して全ての数値を2倍にする、文字列の配列に対して全ての文字列を大文字に変換する、といった処理がこれに当たります。

例：

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  console.log(number * 2);
});

// 出力結果
// 2
// 4
// 6
// 8
// 10

forEachメソッドでループ処理を行う

forEachメソッドは、配列の各要素を順に取り出し、それぞれに対して何らかの処理を行う形式のループ処理です。

従来のforループの代わりにforEachメソッドを使用することで、より直感的でシンプルなコードを書くことができます。

forループの例：

let fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 出力結果
// apple
// banana
// cherry

forEachメソッドの例：

let fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 出力結果
// apple
// banana
// cherry

どちらも同じ結果を得ることができますが、forEachメソッドを使った方がコードが簡潔になっています。

最終的には、どちらを使うかは好みの問題ですが、forEachメソッドを使うことで、コードが簡潔になり、複雑な処理も容易に扱えるようになります。

もう少し複雑な例を見てみましょう。

以下のコードは、配列の各要素を順番に取り出し、その要素が特定の文字列を含むかどうかを判定する処理です。

let fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  if (fruits[i].includes('a')) {
    console.log(fruits[i]);
  }
}

// 出力結果
// apple
// banana

このコードをforEachメソッドを使って書き換えると、以下のようになります：

let fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(fruit => {
  if (fruit.includes('a')) {
    console.log(fruit);
  }
});

// 出力結果
// apple
// banana

こちらの例ではインデックス i を使っていないため、forEachメソッドを使った方がコードが簡潔に読めるかと思います。

forEachメソッドで配列の要素を数える

また、特定の条件を満たす要素の数を数える際にもforEachメソッドは便利です。

例として、特定の文字で始まる単語の数を数える処理が考えられます。

let fruits = ['apple', 'banana', 'cherry'];

let count = 0;

fruits.forEach(fruit => {
  if (fruit.startsWith('a')) {
    count++;
  }
});

console.log(count);

// 出力結果
// 1

このように、forEachメソッドを使うことで、配列の要素を順番に取り出し、それぞれに対して同じ処理を行うことができます。

forEachメソッドで配列の要素をソートする

さらに、配列の要素をソートする場合にもforEachメソッドを利用することができます。

各要素を比較して、条件に応じて順序を変更する処理を行うことが可能です。

配列を、各要素の文字数に応じてソートするには、以下のようにforEachメソッドを使います。

let prefectures = ['hokkaido', 'akita', 'miyagi'];

prefectures.forEach((prefecture, index, array) => {
  // 配列の要素の文字数を比較し、順序を変更する
  if (prefecture.length < array[index + 1]?.length) {
    // 配列の要素を入れ替える
    array[index] = array[index + 1];
    array[index + 1] = prefecture;
  }
});

// 出力結果
// ["akita", "miyagi", "hokkaido"]

ただし、ソートをするだけであれば、forEachメソッドを使わずにsortメソッドを使った方が簡単です。

let prefectures = ['hokkaido', 'akita', 'miyagi'];

prefectures.sort((a, b) => {
  return a.length - b.length;
});

// 出力結果
// ["akita", "miyagi", "hokkaido"]

このように、できるだけ既存のメソッドを使うことで、コードが簡潔になるということは覚えておきましょう。

forEachメソッドとmapメソッドの違い

forEachメソッドとmapメソッドは、どちらも配列の各要素に対して同じ処理を行うことができます。

しかし、forEachメソッドは、配列の各要素に対して処理を行うだけで、新しい配列を返しません。

一方、mapメソッドは、配列の各要素に対して処理を行った結果を新しい配列として返します。

例えば、配列の各要素を大文字に変換するには、forEachメソッドを使うこともできますが、新しい配列を返すmapメソッドを使う方が便利です。

let fruits = ['apple', 'banana', 'cherry'];

let upperCaseFruits = fruits.map(fruit => {
  return fruit.toUpperCase();
});

console.log(upperCaseFruits);

// 出力結果
// ["APPLE", "BANANA", "CHERRY"]

同じことをforEachメソッドを使って書くと、以下のようになります。

let fruits = ['apple', 'banana', 'cherry'];

let upperCaseFruits = [];

fruits.forEach(fruit => {
  upperCaseFruits.push(fruit.toUpperCase());
});

console.log(upperCaseFruits);

一度、空の配列を用意し、forEachメソッドを使って各要素を大文字に変換した後、新しい配列に追加しています。

このように、forEachメソッドを使う場合は、新しい配列を返すmapメソッドを使う場合に比べて、コードが冗長になります。

forEachメソッドと他のメソッドの組み合わせ

ここでは、forEachメソッドと他のメソッドを組み合わせて使う例を紹介します。

forEachメソッドとfilterメソッドの組み合わせ

filterメソッドは、配列の各要素に対して条件を満たすかどうかを判定し、条件を満たす要素だけを取り出した新しい配列を返します。

このfilterメソッドとforEachメソッドを組み合わせることで、配列の各要素に対して条件を満たすかどうかを判定し、条件を満たす要素だけを取り出すことができます。

例えば、配列の各要素の文字数が5文字以下の要素、つまりappleだけを取り出すには、以下のようにfilterメソッドとforEachメソッドを組み合わせて使います。

let fruits = ['apple', 'banana', 'cherry'];

// filterとforEachを組み合わせて、文字数が5文字以下の要素だけを取り出す
fruits.filter(fruit => {
  return fruit.length <= 5;
}).forEach(fruit => {
  console.log(fruit);
});

// 出力結果
// apple

forEachメソッドとfindメソッドの組み合わせ

findメソッドは、配列の各要素に対して条件を満たすかどうかを判定し、条件を満たす要素のうち最初の要素を返します。

このfindメソッドとforEachメソッドを組み合わせることで、配列の各要素に対して条件を満たすかどうかを判定し、条件を満たす要素のうち最初の要素を取り出すことができます。

let foods = ['milk', 'bread', 'rice'];

// findとforEachを組み合わせて、rを含む要素のうち最初の要素を取り出す
foods.find(food => {
  return food.includes('r');
}).forEach(food => {
  console.log(food);
});

// 出力結果
// bread

filterとの違いは、filterメソッドは条件を満たす要素を全て取り出すのに対し、findメソッドは条件を満たす要素のうち最初の要素だけを取り出す点です。

forEachメソッドの注意点

`continue`を使うとエラーになる

forEachメソッドを使用する際の一つの重要な注意点は、continue文を使うことができないということです。

continueは通常、ループの中で次のイテレーションにスキップするために使用されますが、forEachメソッドのコールバック関数内では使えません。

これを行うとエラーが発生します。

例えば、次のようなコードを書くとエラーが生じます：

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(number => {
  if (number === 3) {
    continue; // これはエラーを引き起こします
  }
  console.log(number);
});

`break`ではなく例外処理を使う

もう一つの注意点は、break文もforEachメソッドのコールバック関数内で使用できないということです。

break文は、通常ループを完全に終了させるために使用されますが、forEachでは利用できません。

ループを途中で終了させるには、例外処理を使う方法があります。

try...catchブロックを使用して、ループを終了させるための例外を投げることができます。

例：

let numbers = [1, 2, 3, 4, 5];

try {
  numbers.forEach(number => {
    if (number === 3) {
      throw new Error('Loop terminated'); // ループを終了させる例外
    }
    console.log(number);
  });
} catch (e) {
  if (e.message !== 'Loop terminated') {
    throw e; // 他のエラーは例外処理
  }
}

この例では、数が3になった時点で例外を投げてforEachループを終了させています。

ただし、この方法は一般的ではなく、ループを途中で終了させる必要がある場合はforループやfor...ofループを使うことが一般的です。