JavaScript | 多重ループ（ネストされたfor文）

では「for文の中でfor文を実行する（多重ループ）」を、プログラミング初心者向けにかみ砕いて、例題付きで丁寧に解説します。

1. 多重ループ（ネストされたfor文）とは？

「多重ループ」とは、for文の中に別のfor文を入れて使うことです。

• 例えるなら「箱の中に箱が入っているイメージ」です。
• 外側の箱（ループ）が1回動くたびに、内側の箱（ループ）が全部動きます。

2. 基本の書き方

for (let i = 0; i < 3; i++) {     // 外側のループ
  for (let j = 0; j < 3; j++) {   // 内側のループ
    console.log('i = ' + i + ', j = ' + j);
  }
}

for (let i = 0; i < 3; i++) {     // 外側のループ
  for (let j = 0; j < 3; j++) {   // 内側のループ
    console.log('i = ' + i + ', j = ' + j);
  }
}

どうなる？

1. 外側の i が0のとき：
   • 内側の j が0 → 2まで動く → i=0,j=0,1,2 が出力される
2. 外側の i が1のとき：
   • 内側の j が0 → 2まで動く → i=1,j=0,1,2 が出力される
3. 外側の i が2のとき：
   • 内側の j が0 → 2まで動く → i=2,j=0,1,2 が出力される

出力結果はこうなります：

i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 1, j = 0
i = 1, j = 1
i = 1, j = 2
i = 2, j = 0
i = 2, j = 1
i = 2, j = 2

💡 ポイント：

• 外側ループが1回動くごとに、内側ループが全部動く
• これが多重ループの基本の仕組みです。

3. 例題：九九表を作ろう

多重ループは「2つの数字を組み合わせて処理したいとき」に便利です。
例えば、1〜3の掛け算表を作ってみましょう。

for (let i = 1; i <= 3; i++) {       // 1の段〜3の段
  for (let j = 1; j <= 3; j++) {     // 掛ける数
    console.log(i + ' × ' + j + ' = ' + (i * j));
  }
}

for (let i = 1; i <= 3; i++) {       // 1の段〜3の段
  for (let j = 1; j <= 3; j++) {     // 掛ける数
    console.log(i + ' × ' + j + ' = ' + (i * j));
  }
}

実行結果：

1 × 1 = 1
1 × 2 = 2
1 × 3 = 3
2 × 1 = 2
2 × 2 = 4
2 × 3 = 6
3 × 1 = 3
3 × 2 = 6
3 × 3 = 9

4. 例題：2次元配列の値を表示する

2次元配列の中身を取り出すときにも使えます。

const scores = [
  [80, 90, 70],
  [60, 85, 75]
];

for (let i = 0; i < scores.length; i++) {       // 行
  for (let j = 0; j < scores[i].length; j++) {  // 列
    console.log('scores[' + i + '][' + j + '] = ' + scores[i][j]);
  }
}

const scores = [
  [80, 90, 70],
  [60, 85, 75]
];

for (let i = 0; i < scores.length; i++) {       // 行
  for (let j = 0; j < scores[i].length; j++) {  // 列
    console.log('scores[' + i + '][' + j + '] = ' + scores[i][j]);
  }
}

出力結果：

scores[0][0] = 80
scores[0][1] = 90
scores[0][2] = 70
scores[1][0] = 60
scores[1][1] = 85
scores[1][2] = 75

💡 ポイント：

• scores.length は「行の数」
• scores[i].length は「その行の列の数」
• こうすることで、どんな大きさの2次元配列でも中身を順番に取り出せます。

5. 初心者向けのまとめ

• 外側ループ：大きな枠を作る
• 内側ループ：小さな枠を作る
• 外側ループが1回動くごとに、内側ループは最初から最後まで実行される
• 数字の組み合わせ、表の作成、2次元配列の処理などに便利