ここからは「forEachを実務レベルでどう使うか」を、初心者でも理解できるようにやさしく解説していきます。
テーマはこの2つです👇
1️⃣ オブジェクト配列の処理（よくあるデータ操作）
2️⃣ 非同期処理と forEach の相性（初心者がよくハマるポイント）
① オブジェクト配列の処理
よくあるシーン
「ユーザー情報」や「商品リスト」など、1人分・1個分をオブジェクトで表した配列を処理したいときに forEach は大活躍します。
例：ユーザーのリストを順に表示する
let users = [
{ name: 'Taro', age: 20 },
{ name: 'Hanako', age: 25 },
{ name: 'Ken', age: 30 }
];
users.forEach(function(user){
console.log(user.name + ' さんは ' + user.age + ' 歳です。');
});
🧾 出力結果
Taro さんは 20 歳です。
Hanako さんは 25 歳です。
Ken さんは 30 歳です。
👉 各 user には { name: 'Taro', age: 20 } のようなオブジェクトが順に入ります。user.name や user.age で中身を取り出せます。
例：条件に応じて処理を分ける
users.forEach(function(user){
if (user.age >= 25) {
console.log(user.name + ' さんは大人クラスです。');
} else {
console.log(user.name + ' さんは若者クラスです。');
}
});
💬 出力:
Taro さんは若者クラスです。
Hanako さんは大人クラスです。
Ken さんは大人クラスです。
例：合計年齢を出す（計算処理）
let totalAge = 0;
users.forEach(user => {
totalAge += user.age;
});
console.log('合計年齢:', totalAge);
🧮 出力:
合計年齢: 75
例：HTMLリストに出力（Webでよく使う）
<ul id="userList"></ul>
<script>
let users = [
{ name: 'Taro', age: 20 },
{ name: 'Hanako', age: 25 },
{ name: 'Ken', age: 30 }
];
let ul = document.getElementById('userList');
users.forEach(function(user){
let li = document.createElement('li');
li.textContent = `${user.name}（${user.age}歳）`;
ul.appendChild(li);
});
</script>
👀 ページにこんなリストが表示されます：
Taro（20歳）
Hanako（25歳）
Ken（30歳）
✅ ポイント
forEachは「何かを1つずつ画面に出す」「データを集計する」など“副作用”のある処理に向いています。- 「新しい配列を作りたい」場合は
map()がより適しています。
② 非同期処理と forEach の相性
ここが 初心者が最もつまずくポイント です！
よくある勘違い
forEach の中で async / await を使うと
「順番に待ってくれる」と思いがちですが…実は違います！
例：非同期処理を「待ってくれない」ケース
let ids = [1, 2, 3];
ids.forEach(async (id) => {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const data = await res.json();
console.log('データ取得:', data.title);
});
console.log('← ここが先に実行される');
🧾 結果：
← ここが先に実行される
データ取得: xxx
データ取得: yyy
データ取得: zzz
💡 理由：forEach は「中の処理が終わるのを待たずに」次の要素へ進む。
つまり 非同期関数をうまく順番に処理できない のです。
✅ 正しい書き方（順番に非同期処理したい場合）
方法①：for…of を使う
let ids = [1, 2, 3];
async function fetchSequential() {
for (const id of ids) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
const data = await res.json();
console.log('取得:', data.title);
}
console.log('すべて完了');
}
fetchSequential();
⏱️ この書き方なら、1→2→3の順で確実に処理されます。
方法②：Promise.all() で一気に並列処理
「全部同時にリクエストして、終わるのを待つ」パターン。
let ids = [1, 2, 3];
async function fetchParallel() {
const promises = ids.map(id =>
fetch(`https://jsonplaceholder.typicode.com/posts/${id}`).then(res => res.json())
);
const results = await Promise.all(promises);
results.forEach(post => console.log('取得:', post.title));
}
fetchParallel();
📈 これなら全部同時に動くので速いです。
ただしサーバー負荷が高くなるので、数が多い場合は注意。
まとめ（非同期で覚えるポイント）
| やりたいこと | おすすめ方法 | 備考 |
|---|---|---|
| 1つずつ順に実行したい | for...of + await | 一番安全で直感的 |
| 並列に実行したい | Promise.all() + map | 同時処理で高速 |
forEach で async/await 使いたい | ❌ NG | 待ってくれない・バグの元 |
③ 実践練習問題
問題1：
以下の配列の人のうち、年齢が25歳以上の人の名前だけを console.log で出力せよ。
let people = [
{name: 'Taro', age: 20},
{name: 'Hanako', age: 25},
{name: 'Ken', age: 30}
];
問題2：
次のURLの配列から、順番にAPIを呼び出して結果を出力せよ。
（ヒント：for...of と await を使う）
let urls = [
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3'
];
解答例
問題1
people.forEach(person => {
if (person.age >= 25) {
console.log(person.name);
}
});
🟩 結果:
Hanako
Ken
問題2
async function loadData() {
for (const url of urls) {
const res = await fetch(url);
const data = await res.json();
console.log(data.title);
}
}
loadData();
⏱️ 1→2→3 の順にタイトルが出力されます。
まとめ（実務で役立つ使い分け）
| 処理内容 | おすすめ |
|---|---|
| 画面にリストを出す・合計を出す | ✅ forEach |
| 新しい配列を作る | ✅ map |
| 条件を満たす要素を探す | ✅ find / some |
| 非同期処理（await 使う） | ✅ for…of |
| 空の要素をスキップしたい | ✅ forEach（自動でスキップ） |