JavaScriptのforEach()入門｜配列の各要素に処理を実行する

forEach()は、配列の各要素に対して指定した関数を1回ずつ実行するメソッドです。for文の代わりとして使えるシンプルなループ処理で、DOM操作やログ出力など、戻り値が不要な繰り返し処理に適しています。

基本的な使い方

forEach()はコールバック関数を受け取り、配列の各要素に対して実行します。戻り値は常にundefinedです。

JavaScript

// 基本構文
array.forEach(function(element, index, array) {
  // 各要素に対する処理
});

// アロー関数を使った書き方
array.forEach((element, index) => {
  // 各要素に対する処理
});

コールバック関数は3つの引数を受け取ります。第1引数は現在の要素、第2引数はインデックス、第3引数は配列自体です。map()と異なり、戻り値は無視されます。

JavaScript

const fruits = ["りんご", "バナナ", "みかん"];

// 各要素を出力
fruits.forEach(fruit => {
  console.log(fruit);
});

// インデックス付きで出力
fruits.forEach((fruit, index) => {
  console.log(`${index + 1}. ${fruit}`);
});

実行結果

りんご
バナナ
みかん
1. りんご
2. バナナ
3. みかん

for文との違い

forEach()はfor文と似ていますが、いくつかの重要な違いがあります。breakやcontinueが使えない点、async/awaitとの相性が悪い点に注意が必要です。

JavaScript

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

// for文 - break/continueが使える
for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === 3) break;
  console.log(numbers[i]);
}
// 出力: 1, 2

// forEach - break/continueは使えない
// 途中で止められない（returnはcontinueに近い動作）
numbers.forEach(num => {
  if (num === 3) return; // この要素をスキップするだけ
  console.log(num);
});
// 出力: 1, 2, 4, 5（3だけスキップ、ループは続く）

実行結果

forEach()の中でreturnを使うと、現在の要素の処理をスキップしますが、ループ自体は止まりません。途中で処理を中断したい場合は、for...of文やsome()メソッドの使用を検討してください。

実践的な活用例

forEach()はDOM操作やオブジェクトの更新など、副作用のある処理に最適です。

JavaScript

// オブジェクトのプロパティを更新
const users = [
  { name: "田中", score: 80 },
  { name: "佐藤", score: 65 },
  { name: "鈴木", score: 92 }
];

// 各ユーザーにランクを付与（副作用あり）
users.forEach(user => {
  if (user.score >= 90) user.rank = "A";
  else if (user.score >= 70) user.rank = "B";
  else user.rank = "C";
});
console.log(users);

// Set を活用した重複チェック
const items = ["apple", "banana", "apple", "cherry"];
const seen = new Set();
const duplicates = [];
items.forEach(item => {
  if (seen.has(item)) {
    duplicates.push(item);
  } else {
    seen.add(item);
  }
});
console.log("重複:", duplicates);

実行結果

[
  { name: "田中", score: 80, rank: "B" },
  { name: "佐藤", score: 65, rank: "C" },
  { name: "鈴木", score: 92, rank: "A" }
]
重複: ["apple"]

forEach()とmap()の使い分け

変換した結果の配列が必要ならmap()、結果が不要で処理の実行だけが目的ならforEach()を使います。map()の戻り値を使わないのは無駄なので、その場合はforEach()が適切です。

async/awaitとの組み合わせに注意

forEach()はasyncコールバックを正しく待ちません。非同期処理を順番に実行したい場合はfor...of文を使い、並列実行したい場合はPromise.all()とmap()を組み合わせてください。

まとめ

forEach()は配列の各要素に対して関数を実行するメソッド
戻り値は常にundefined（結果の配列は作られない）
breakやcontinueは使えない（returnはスキップのみ）
DOM操作やログ出力など副作用のある処理に適している
async/awaitと組み合わせる場合はfor...ofを使う