「配列の全要素に対して同じ処理をしたい」「オブジェクトのキーと値をすべて取り出して操作したい」——JavaScriptで繰り返し処理を書くとき、最もよく使われるメソッドのひとつがforEachです。
jQueryを使ったことがある方には「each」という名称の方が馴染み深いかもしれませんが、モダンなJavaScriptではforEachが標準的な繰り返し処理の手段として広く使われています。しかし「breakで途中で止められない」「非同期処理との組み合わせで想定外の動作をした」「mapとの違いが分からない」という疑問や失敗も多く聞かれます。
本記事では、forEachの基本構文から引数の意味、オブジェクトへの応用、制御の注意点、実践的なコード例まで体系的に解説します。
JavaScriptのeachとは
forEachメソッドの基本概念
JavaScriptのforEachメソッドは、配列の各要素に対して指定したコールバック関数を順番に実行する組み込みメソッドです。ES5（2009年）から標準仕様に含まれており、現在のモダンブラウザとNode.jsですべてサポートされています。
jQueryの$.each()はjQueryライブラリに依存しますが、Array.prototype.forEachはJavaScript標準機能のため、ライブラリなしで使用できます。
// jQueryのeach（ライブラリが必要）
$.each(array, function(index, value) { });
// JavaScriptのforEach（標準機能） array.forEach(function(element, index, array) { });
配列とオブジェクトにおける繰り返し処理の違い
配列の順番通りに処理
配列に対してforEachを使うと、インデックス0から順番に各要素を処理します。要素の順序が保証されているため、順番通りの処理が必要な場面に適しています。
オブジェクトはキーと値で反復
JavaScriptのオブジェクトにはforEachが直接使えません。Object.keys()・Object.values()・Object.entries()などのメソッドでキーや値を配列に変換してからforEachを使います。
配列でのforEachの使い方
基本構文
配列.forEach(function(element, index, array) { … })
const fruits = ['りんご', 'バナナ', 'みかん'];
// 関数式での書き方 fruits.forEach(function(element, index, array) { console.log(index + ': ' + element); });
// アロー関数での書き方（モダンな記法）
fruits.forEach((element, index) => {
console.log(${index}: ${element});
});
出力結果：
0: りんご
1: バナナ
2: みかん
引数の意味
element：配列の要素
現在処理中の配列要素の値です。ループの各反復で、配列の先頭から順番に各要素の値が渡されます。変数名は任意で、item・value・fruitなど内容を表す名前をつけると読みやすくなります。
index：要素のインデックス
現在処理中の要素のインデックス番号（0始まり）です。省略可能ですが、「何番目の要素か」を知りたい場合に使用します。
array：元の配列
forEachを呼び出した元の配列そのものへの参照です。ほとんどの場合省略されますが、コールバック関数内から元の配列にアクセスしたい場合に使います。
const numbers = [10, 20, 30];
numbers.forEach((element, index, array) => {
console.log(要素: ${element}, インデックス: ${index}, 配列全体: ${array});
});
// 出力： // 要素: 10, インデックス: 0, 配列全体: 10,20,30 // 要素: 20, インデックス: 1, 配列全体: 10,20,30 // 要素: 30, インデックス: 2, 配列全体: 10,20,30
配列内の値を操作する例
コンソール出力
const scores = [85, 92, 78, 95, 88];
scores.forEach((score, index) => {
const grade = score >= 90 ? '優' : score >= 80 ? '良' : '可';
console.log(受験者${index + 1}: ${score}点 → ${grade});
});
// 出力： // 受験者1: 85点 → 良 // 受験者2: 92点 → 優 // 受験者3: 78点 → 可 // 受験者4: 95点 → 優 // 受験者5: 88点 → 良
HTML要素への反映
const products = ['ノートPC', 'マウス', 'キーボード', 'モニター'];
const listElement = document.getElementById('product-list');
products.forEach((product, index) => {
const li = document.createElement('li');
li.textContent = ${index + 1}. ${product};
li.setAttribute('data-index', index);
listElement.appendChild(li);
});
forEachメソッドの仕様と使い方については、MDN Web Docs「Array.prototype.forEach()」も参照してください。
オブジェクトの反復処理
Object.keys() や Object.entries() を使ったループ
Object.keys(obj).forEach(key => …)
Object.keys()はオブジェクトのキーを配列として返します。forEachと組み合わせることで全キーを順番に処理できます。
const user = {
name: '田中太郎',
age: 30,
email: '[email protected]'
};
Object.keys(user).forEach(key => {
console.log(${key}: ${user[key]});
});
// 出力： // name: 田中太郎 // age: 30 // email: [email protected]
Object.entries(obj).forEach(([key, value]) => …)
Object.entries()はキーと値のペアを[key, value]形式の配列として返します。分割代入と組み合わせることで、キーと値の両方を簡潔に扱えます。
const config = {
theme: 'dark',
language: 'ja',
fontSize: 16,
notifications: true
};
Object.entries(config).forEach(([key, value]) => {
console.log(設定項目「${key}」の値: ${value});
});
// 出力： // 設定項目「theme」の値: dark // 設定項目「language」の値: ja // 設定項目「fontSize」の値: 16 // 設定項目「notifications」の値: true
キー・値を取得して処理する方法
データの加工
const prices = {
apple: 150,
banana: 80,
orange: 120,
grape: 300
};
// 10%引きの価格を計算して表示
Object.entries(prices).forEach(([item, price]) => {
const discounted = Math.floor(price * 0.9);
console.log(${item}: ${price}円 → セール価格: ${discounted}円);
});
// 出力： // apple: 150円 → セール価格: 135円 // banana: 80円 → セール価格: 72円 // orange: 120円 → セール価格: 108円 // grape: 300円 → セール価格: 270円
条件付き処理
const inventory = {
ノートPC: 5,
マウス: 0,
キーボード: 12,
モニター: 0,
USBハブ: 3
};
Object.entries(inventory).forEach(([product, stock]) => {
if (stock === 0) {
console.log(【在庫切れ】${product});
} else if (stock <= 5) {
console.log(【残りわずか】${product}: ${stock}個);
} else {
console.log(【在庫あり】${product}: ${stock}個);
}
});
// 出力： // 【残りわずか】ノートPC: 5個 // 【在庫切れ】マウス // 【在庫あり】キーボード: 12個 // 【在庫切れ】モニター // 【残りわずか】USBハブ: 3個
forEachでの制御
ループの途中で抜けられないことの注意点
forEachは途中でループを抜けることができません。break文を使おうとするとSyntaxErrorになり、returnを使ってもそのコールバック関数を抜けるだけで、ループ全体は続行されます。
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(num => { if (num === 3) { return; // この反復をスキップするだけ、ループは続く } console.log(num); });
// 出力：1, 2, 4, 5（3はスキップされるが4と5は実行される）
// break は使えない（SyntaxError） // numbers.forEach(num => { // if (num === 3) break; // エラー // });
代替案：for…of / forループ / some / every
途中でループを停止したい場合は、以下の代替手段を使います。
| 手法 | break可否 | 向いている場面 |
|---|---|---|
| forEach | × | 全要素を必ず処理する場合 |
| for…of | ○ | 途中でbreakが必要な場合 |
| for文 | ○ | インデックス操作が必要な場合 |
| some() | trueを返すと停止 | 条件に合う要素が見つかったら停止 |
| every() | falseを返すと停止 | すべての要素が条件を満たすか確認 |
const numbers = [1, 2, 3, 4, 5];
// for...ofでbreakを使う例 for (const num of numbers) { if (num === 3) break; // 3でループを停止 console.log(num); } // 出力：1, 2
// someを使って「途中で停止」を実現する例 numbers.some(num => { if (num === 3) return true; // trueを返すとループ停止 console.log(num); return false; }); // 出力：1, 2
実践例
配列の合計値を計算
const salesData = [150000, 230000, 180000, 320000, 210000];
let total = 0;
let maxSale = 0;
let maxIndex = 0;
salesData.forEach((sale, index) => { total += sale; if (sale > maxSale) { maxSale = sale; maxIndex = index + 1; // 1始まりの月番号に変換 } });
const average = Math.floor(total / salesData.length);
console.log(合計売上: ${total.toLocaleString()}円);
console.log(平均売上: ${average.toLocaleString()}円);
console.log(最高売上: ${maxIndex}月（${maxSale.toLocaleString()}円）);
// 出力： // 合計売上: 1,090,000円 // 平均売上: 218,000円 // 最高売上: 4月（320,000円）
配列からHTMLリストを生成
const menuItems = [
{ label: 'ホーム', url: '/', icon: '🏠' },
{ label: 'ブログ', url: '/blog', icon: '📝' },
{ label: 'ポートフォリオ', url: '/portfolio', icon: '💼' },
{ label: 'お問い合わせ', url: '/contact', icon: '✉️' }
];
const nav = document.getElementById('navigation'); const ul = document.createElement('ul'); ul.className = 'nav-list';
menuItems.forEach((item) => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = item.url;
a.textContent = ${item.icon} ${item.label};
a.className = 'nav-link';
li.appendChild(a);
ul.appendChild(li);
});
nav.appendChild(ul);
オブジェクトのプロパティを加工して新しいオブジェクト作成
const students = {
tanaka: { score: 85, attendance: 92 },
yamada: { score: 72, attendance: 88 },
suzuki: { score: 95, attendance: 100 },
sato: { score: 60, attendance: 75 }
};
const results = {};
Object.entries(students).forEach(([name, data]) => { // 総合評価スコア（テスト70%＋出席30%） const totalScore = Math.floor(data.score * 0.7 + data.attendance * 0.3); const grade = totalScore >= 90 ? 'A' : totalScore >= 80 ? 'B' : totalScore >= 70 ? 'C' : 'D';
results[name] = {
...data,
totalScore,
grade
};});
console.log(results); // 出力： // { // tanaka: { score: 85, attendance: 92, totalScore: 87, grade: 'B' }, // yamada: { score: 72, attendance: 88, totalScore: 76, grade: 'C' }, // suzuki: { score: 95, attendance: 100, totalScore: 96, grade: 'A' }, // sato: { score: 60, attendance: 75, totalScore: 64, grade: 'D' } // }
よくある誤解と注意点
break / continue が使えない
forEachではbreak・continueは使えません。continueに相当する「この反復をスキップする」動作はreturnで代替できますが、break（ループの完全な停止）はfor…ofやsome/everyで対応します。
const items = ['a', 'b', 'c', 'd', 'e'];
// continueの代替（returnでスキップ） items.forEach(item => { if (item === 'c') return; // 'c'をスキップ console.log(item); }); // 出力：a, b, d, e
非同期処理内での挙動
Promiseやasync関数との組み合わせ
forEachはasync/awaitと組み合わせても、各非同期処理の完了を待ちません。非同期処理を含むループにforEachを使うと、処理が完了する前に次の反復が実行される「並列実行」になります。
const ids = [1, 2, 3];
// 誤った使い方（awaitが機能しない）
ids.forEach(async (id) => {
const data = await fetch(/api/users/${id});
console.log(await data.json());
});
// 全リクエストが同時に発生し、順序が保証されない
// 正しい使い方（for...ofを使う）
async function processIds(ids) {
for (const id of ids) {
const data = await fetch(/api/users/${id});
console.log(await data.json());
}
}
// 1→2→3の順に順次処理される
// または並列実行が必要な場合はPromise.allを使う
async function processIdsParallel(ids) {
await Promise.all(ids.map(async (id) => {
const data = await fetch(/api/users/${id});
console.log(await data.json());
}));
}
forEach vs map の違い
| メソッド | 戻り値 | 主な用途 |
|---|---|---|
| forEach | undefined（戻り値なし） | 副作用（DOM操作・集計・ログ出力） |
| map | 新しい配列 | 各要素を変換した新しい配列を作る |
const numbers = [1, 2, 3, 4, 5];
// forEachは戻り値がundefined const forEachResult = numbers.forEach(n => n * 2); console.log(forEachResult); // undefined
// mapは変換後の新しい配列を返す const mapResult = numbers.map(n => n * 2); console.log(mapResult); // [2, 4, 6, 8, 10]
JavaScriptのforEachの詳しい解説については、侍エンジニア「JavaScriptのforEachの使い方まとめ」、JavaDrive「JavaScriptのforEachメソッドの使い方」、TechMania「JavaScriptのforEach完全ガイド」も参考にしてください。
JavaScriptをはじめとするWeb開発の実践的な解説は、kakiro-web.comでも幅広く公開しています。
まとめ
forEachは配列・オブジェクトの反復処理に便利
JavaScriptのforEachメソッドは、配列の全要素に対してコールバック関数を順番に実行する標準機能です。DOM操作・集計処理・ログ出力など、各要素に対して副作用を伴う処理を行う場面に最適です。オブジェクトにはObject.entries()やObject.keys()と組み合わせて使用します。
引数の役割や制御方法を理解して効率的に使い分ける
forEachのコールバック関数はelement（要素）・index（インデックス）・array（元配列）の3引数を受け取ります。必要な引数だけを使うことでシンプルなコードが書けます。returnを使うことで現在の反復をスキップ（continueの代替）できますが、ループ全体の停止（break）はできない点が重要な制約です。
forEachの制約を理解し、必要に応じて他のループと使い分け
途中でループを停止したい場合はfor…ofまたはsome/every、新しい配列を生成したい場合はmap、非同期処理を順次実行したい場合はfor…ofのawaitを使うなど、目的に応じたループメソッドの使い分けがモダンJavaScript開発の基本です。
- forEachは配列の全要素に対してコールバック関数を実行する標準メソッド
- 引数はelement（要素）・index（インデックス）・array（元配列）の順で省略可能
- オブジェクトはObject.keys()またはObject.entries()と組み合わせて使う
- break・continueは使えない（returnでスキップ、breakはfor…ofを使う）
- 戻り値はundefinedのため、変換後の配列が必要な場合はmapを使う
- async/awaitとの組み合わせでは順次実行されない（for…ofを使う）
- some()・every()でtrueまたはfalseを返すことで途中停止の代替が可能
