JavaScript 逆引き集 | 配列のループ（forEach）

JavaScript配列のループ（forEach）の基本と実践

「配列の全要素に同じ処理をサッと当てたい」なら、forEachがいちばん手軽。カウンターや終了条件を意識せず、読みやすく安全に“全件処理”を書けます。初心者がまず身につけたい、実務でよく使うテンプレートを絞って紹介します。

構文と考え方

arr.forEach((value, index, array) => {
  // value: 要素の値
  // index: インデックス番号
  // array: 元の配列（arr）
});

arr.forEach((value, index, array) => {
  // value: 要素の値
  // index: インデックス番号
  // array: 元の配列（arr）
});

• 役割: 配列の各要素に対して、渡した関数（コールバック）を順番に実行します。カウンター管理が不要で、意図が明快になります。
• 引数: コールバック関数には最大3つの引数（value, index, array）が自動で渡されます。インデックスが欲しい場面でも対応できます。
• 戻り値: forEachは新しい配列を返しません。戻り値は常にundefinedです（“副作用”を行う用途に向いています）。
• 中断: 途中で止めるbreakやスキップのcontinueは使えません。必ず最後まで回ります（条件分岐で中身の処理をしない書き方は可能）。

すぐ使えるテンプレート集

全要素を処理する（最も基本）

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

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

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

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

• ポイント: 値だけ扱うときはシンプルに。インデックスが不要なら最短で読みやすい。

値とインデックスを使う

const items = ["A", "B", "C"];

items.forEach((value, index) => {
  console.log(`#${index}: ${value}`);
});

const items = ["A", "B", "C"];

items.forEach((value, index) => {
  console.log(`#${index}: ${value}`);
});

• ポイント: インデックスが必要な場面でも、forEachなら引数で受け取れます。

条件を満たすときだけ処理する（疑似スキップ）

const nums = [3, 0, 5, -1, 8, 10];

nums.forEach((n) => {
  if (n < 0) return; // その要素の処理を“しない”（ループ自体は続く）
  console.log("処理中:", n);
});

const nums = [3, 0, 5, -1, 8, 10];

nums.forEach((n) => {
  if (n < 0) return; // その要素の処理を“しない”（ループ自体は続く）
  console.log("処理中:", n);
});

• ポイント: continueは使えないため、ifで処理ブロックをガードします。ループ全体は最後まで続きます。

副作用で新しい配列を作る（変換やフィルタ）

const prices = [100, 250, 400];
const withTax = [];

prices.forEach((p) => {
  withTax.push(Math.round(p * 1.1));
});

console.log(withTax); // [110, 275, 440]

const prices = [100, 250, 400];
const withTax = [];

prices.forEach((p) => {
  withTax.push(Math.round(p * 1.1));
});

console.log(withTax); // [110, 275, 440]

• ポイント: “pushで積む”のがforEachの典型。戻り値を使わず、外部に結果を貯めるのが基本スタイル Qiita。

const users = [
  { name: "Aki", age: 19 },
  { name: "Mao", age: 22 },
  { name: "Ren", age: 17 },
];

const adults = [];
users.forEach((u) => {
  if (u.age >= 20) adults.push(u);
});

console.log(adults); // 20歳以上のみ

const users = [
  { name: "Aki", age: 19 },
  { name: "Mao", age: 22 },
  { name: "Ren", age: 17 },
];

const adults = [];
users.forEach((u) => {
  if (u.age >= 20) adults.push(u);
});

console.log(adults); // 20歳以上のみ

• ポイント: フィルタも副作用で。mapやfilterでも書けるけれど、forEachは「一括処理しつつ柔らかく何でもできる」場面に向いています。

よくある落とし穴と対策

• 早期終了できない問題
  • 落とし穴: breakもcontinueも使えません。必ず最後まで回ります。
  • 対策: 途中終了が必要ならforやfor…ofへ切り替える。要素ごとの処理を条件でスキップしたいだけならifでガード。
• 戻り値に期待してしまう問題
  • 落とし穴: forEachの戻り値はundefined。新しい配列は返りません Qiita。
  • 対策: 変換ならmap、絞り込みならfilter、集計ならreduceを使う。forEachは副作用（push、DOM操作、ログなど）向き。
• NodeListやオブジェクトの扱い
  • 注意: 多くのブラウザではNodeListにもforEachがありますが、環境差や古いブラウザでは挙動が異なることがあります。配列化（Array.from）してから使うと安全です。

他の手段との使い分け

練習問題（手を動かして覚える）

1. 合計値を求める

• 課題: const nums = [2, 5, 8, 3]; をforEachで合計してsumを出力。

const nums = [2, 5, 8, 3];
let sum = 0;

nums.forEach((n) => {
  sum += n;
});

console.log(sum); // 18

const nums = [2, 5, 8, 3];
let sum = 0;

nums.forEach((n) => {
  sum += n;
});

console.log(sum); // 18

2. 空文字やnullをスキップ（疑似continue）

• 課題: const names = ["", "Aki", null, "Ren", ""]; 有効な文字列だけをvalidに集める。

const names = ["", "Aki", null, "Ren", ""];
const valid = [];

names.forEach((s) => {
  if (!s) return; // 処理をしないだけ
  valid.push(s);
});

console.log(valid); // ["Aki", "Ren"]

const names = ["", "Aki", null, "Ren", ""];
const valid = [];

names.forEach((s) => {
  if (!s) return; // 処理をしないだけ
  valid.push(s);
});

console.log(valid); // ["Aki", "Ren"]

3. インデックスを使って整形出力

• 課題: const items = ["Pen", "Note", "Bag"]; 「1. Pen」のように番号付きで出力。

const items = ["Pen", "Note", "Bag"];

items.forEach((item, i) => {
  console.log(`${i + 1}. ${item}`);
});

const items = ["Pen", "Note", "Bag"];

items.forEach((item, i) => {
  console.log(`${i + 1}. ${item}`);
});

直感的な指針

• 全要素へ同じ処理を適用したい・副作用中心: forEach。
• 新しい配列が欲しい（変換・絞り込み・集計）: map / filter / reduce。
• 途中終了や厳密な制御が必要: for / for…of。