JavaScript 逆引き集 | 配列のループ（for…of）

JavaScript配列のループ（for…of）の基本と実践

最初は「インデックスって必要？」と迷うかもしれないけれど、値だけ順に扱いたいなら for…of がいちばん素直で読みやすい。配列から要素を一つずつ取り出して処理する、という目的にぴったりの書き方です。

構文と考え方

for (const v of arr) {
  // v は、arr の “値” を順に表す
  // ここに処理を書く
}

for (const v of arr) {
  // v は、arr の “値” を順に表す
  // ここに処理を書く
}

• 役割: 配列（や文字列、Map/Setなどの「反復可能オブジェクト」）の値を1つずつ取り出すループ構文。
• メリット: インデックスを気にせず「値」中心で書けるので、コードが簡潔でわかりやすい。
• 注意点: 途中終了は break で可能だが、インデックスが必要なら別の方法（ふつうの for や entries を併用）を選ぶ。

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

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

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

for (const fruit of fruits) {
  console.log(fruit);
}

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

for (const fruit of fruits) {
  console.log(fruit);
}

• ポイント: 値だけ使いたいときの最短ルート。読みやすさ重視ならまずこれ。

条件でスキップ・途中終了

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

for (const n of nums) {
  if (n < 0) continue; // **スキップ:** 負数は処理しない
  console.log("処理中:", n);
  if (n === 10) break; // **途中終了:** 10が来たら終わり
}

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

for (const n of nums) {
  if (n < 0) continue; // **スキップ:** 負数は処理しない
  console.log("処理中:", n);
  if (n === 10) break; // **途中終了:** 10が来たら終わり
}

• ポイント: for…of でも continue/break は使える。早期終了の意図をシンプルに書ける。

値を変換して新しい配列を作る

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

for (const p of prices) {
  withTax.push(Math.round(p * 1.1));
}

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

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

for (const p of prices) {
  withTax.push(Math.round(p * 1.1));
}

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

• ポイント: map でも書けるが、ループの基礎練習には for…of がわかりやすい。

条件で絞り込み（フィルタ）

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

const adults = [];
for (const u of users) {
  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 = [];
for (const u of users) {
  if (u.age >= 20) adults.push(u);
}

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

• ポイント: filter 相当。絞り込みつつ別の処理を混ぜても読みやすい。

for…of と他のループの使い分け

• 直感の結論: 値だけ扱いたいなら for…of。インデックスが必要ならふつうの for。一様処理を宣言的に書きたいなら forEach。オブジェクトのプロパティ列挙は for…in。

よくある落とし穴と回避策

• インデックスが欲しくなる問題
  • 状況: for…of は「値」中心なので i がない。
  • 対策: arr.entries() を使うか、ふつうの for に切り替える。

const arr = ["A", "B", "C"];
for (const [i, v] of arr.entries()) {
  console.log(i, v);
}

const arr = ["A", "B", "C"];
for (const [i, v] of arr.entries()) {
  console.log(i, v);
}

• 配列に for…in を使う問題
  • 理由: 列挙対象や順序の扱いが配列処理に向かず、意図しないプロパティまで拾う可能性がある。
  • 回避: 配列には for…of か for を使う

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

1. 合計値を求める

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

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

for (const n of nums) {
  sum += n;
}

console.log(sum); // 18

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

for (const n of nums) {
  sum += n;
}

console.log(sum); // 18

2. 最初の偶数を見つけて終了

• 課題: const nums = [3, 7, 11, 12, 5]; 最初の偶数を見つけたら出力してすぐ終了。

const nums = [3, 7, 11, 12, 5];

for (const n of nums) {
  if (n % 2 === 0) {
    console.log("最初の偶数:", n);
    break;
  }
}

const nums = [3, 7, 11, 12, 5];

for (const n of nums) {
  if (n % 2 === 0) {
    console.log("最初の偶数:", n);
    break;
  }
}

3. 空文字や null をスキップ

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

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

for (const s of names) {
  if (!s) continue; // 空文字・nullをスキップ
  valid.push(s);
}

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

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

for (const s of names) {
  if (!s) continue; // 空文字・nullをスキップ
  valid.push(s);
}

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

使い分けの指針（初心者向けの直感）

• 値を順に処理するだけで十分: for…of。
• インデックスが必要・厳密な回数制御: ふつうの for。
• 宣言的に一様処理を適用したい: forEach。
• オブジェクトのプロパティ列挙: for…in（配列には使わない）。