JavaScript | 第4章「ループと反復処理」

初級・中級・上級の3ステップ練習問題＋解説付き

初級編：ループの基本を覚える

問題1：0〜4 を順に出力する

次のようにコンソールに数字を出すプログラムを書いてみましょう。

0
1
2
3
4

0
1
2
3
4

ヒント：

• for 文を使います。
• i を 0 から始めて、i < 5 の間ループ。

解答例

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for (let i = 0; i < 5; i++) {
  console.log(i);
}

解説

• let i = 0 → ループのカウンタを初期化
• i < 5 → 5未満の間繰り返す
• i++ → ループ1回ごとに i を1増やす
  ➡ つまり、「0から4まで5回繰り返す」しくみになります。

問題2：偶数だけ出力する

0〜10のうち、偶数（2で割り切れる数）だけを出しましょう。

解答例

for (let i = 0; i <= 10; i++) {
  if (i % 2 !== 0) continue;
  console.log(i);
}

for (let i = 0; i <= 10; i++) {
  if (i % 2 !== 0) continue;
  console.log(i);
}

解説

• % は「余り」演算子。i % 2 が 0 のときは偶数。
• 奇数のときだけ continue でスキップして偶数だけ出力。

中級編：条件と制御文の応用

問題3：合計値を計算する

配列 [1, 2, 3, 4, 5] の合計を求めよう。

解答例

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

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum); // 15

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

for (let i = 0; i < numbers.length; i++) {
  sum += numbers[i];
}

console.log(sum); // 15

解説

• numbers.length は配列の長さ。
• sum += numbers[i] は「sum = sum + numbers[i]」の短縮形。
• ループで1つずつ足し算していく。

問題4：オブジェクトの内容を列挙する

次のオブジェクトのプロパティ名と値を順に表示しましょう。

const user = { name: "Alice", age: 30, city: "Tokyo" };

const user = { name: "Alice", age: 30, city: "Tokyo" };

解答例

for (let key in user) {
  console.log(key + ": " + user[key]);
}

for (let key in user) {
  console.log(key + ": " + user[key]);
}

解説

• for…in はオブジェクトの「キー（プロパティ名）」を順に取り出す。
• user[key] でそのキーの値を取得できる。

問題5：1〜100 の中で最初に 50 で割り切れる数を見つけて止める

解答例

for (let i = 1; i <= 100; i++) {
  if (i % 50 === 0) {
    console.log("最初に見つけた:", i);
    break;
  }
}

for (let i = 1; i <= 100; i++) {
  if (i % 50 === 0) {
    console.log("最初に見つけた:", i);
    break;
  }
}

解説

• break はループを強制的に終了する。
• 条件に合う数が見つかった時点で止まる。

上級編：for…of やネストしたループの実践

問題6：for…of で配列を処理

次の配列から文字列を順に出力しよう。

const fruits = ["apple", "banana", "orange"];

const fruits = ["apple", "banana", "orange"];

解答例

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

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

解説

• for…of は配列の「値」を直接取り出す。
• const fruit に各要素（apple, banana, orange）が順に入る。

問題7：2次元配列（配列の中に配列）を全部出力

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

出力例：

1 2 3
4 5 6
7 8 9

1 2 3
4 5 6
7 8 9

解答例

for (const row of matrix) {
  let line = "";
  for (const num of row) {
    line += num + " ";
  }
  console.log(line);
}

for (const row of matrix) {
  let line = "";
  for (const num of row) {
    line += num + " ";
  }
  console.log(line);
}

解説

• 外側の for…of → 各行（配列）を取り出す
• 内側の for…of → 各行の中の値を取り出す
• 2重ループ（ネスト）で構造を展開している

問題8：ラベル付き文の動作確認

2重ループの中で「外側のループごと抜ける」処理を作ろう。

解答例

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      console.log("外側まで抜ける！");
      break outer;
    }
    console.log(`i=${i}, j=${j}`);
  }
}

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) {
      console.log("外側まで抜ける！");
      break outer;
    }
    console.log(`i=${i}, j=${j}`);
  }
}

解説

• 通常の break は「内側のループ」だけを抜ける。
• break outer; は「outerラベル付きループ」まで一気に抜ける。
• 多重ループの制御に使えるが、使いすぎると読みにくくなる。

総まとめクイズ（実践問題）

問題9（実践）

文字列 "HELLO" の各文字を1文字ずつ出力する。
ヒント：文字列も for…of で反復できる！

解答例

const text = "HELLO";
for (const ch of text) {
  console.log(ch);
}

const text = "HELLO";
for (const ch of text) {
  console.log(ch);
}

ポイント

• 文字列も「反復可能（iterable）」なので for…of で使える。
• "H" "E" "L" "L" "O" が順に出力される。

最後にまとめ