ネストしたループとは何か
「ネストしたループ」とは、ループの中にさらにループを書くことです。入れ子構造になっているため「ネスト」と呼ばれます。これを使うと、二重・三重の繰り返し処理ができ、表や配列の組み合わせを扱うときに便利です。
基本構造と流れ
ネストしたループは次のように書きます。
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 2; j++) {
console.log(`i=${i}, j=${j}`);
}
}
この場合、外側のループ（i）が1回進むごとに、内側のループ（j）がすべて実行されます。
結果は以下のようになります。
i=1, j=1
i=1, j=2
i=2, j=1
i=2, j=2
i=3, j=1
i=3, j=2
例題で理解する
例題1：九九の表を作る
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= 9; j++) {
console.log(`${i} × ${j} = ${i * j}`);
}
}
外側のループで「段」を決め、内側のループで「掛ける数」を繰り返すことで九九の表が作れます。
例題2：二次元配列の処理
const matrix = [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9]
];
for (let row = 0; row < matrix.length; row++) {
for (let col = 0; col < matrix[row].length; col++) {
console.log(matrix[row][col]);
}
}
二次元配列（表形式のデータ）を扱うとき、外側のループで「行」、内側のループで「列」を処理します。
例題3：組み合わせを列挙する
const colors = ["red", "blue"];
const sizes = ["S", "M", "L"];
for (let c = 0; c < colors.length; c++) {
for (let s = 0; s < sizes.length; s++) {
console.log(`${colors[c]} - ${sizes[s]}`);
}
}
色とサイズの組み合わせをすべて列挙できます。結果は「red-S」「red-M」「red-L」「blue-S」…と続きます。
注意点とコツ
ネストが深くなると読みにくい
三重以上のループになるとコードが複雑になりがちです。必要なら関数に分けたり、処理を整理しましょう。
break と continue の影響
内側のループで break や continue を使うと、外側のループには影響せず「その内側のループ」だけが制御されます。
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
if (j === 2) continue; // j=2 をスキップ
console.log(`i=${i}, j=${j}`);
}
}
処理量に注意
ネストしたループは「外側の回数 × 内側の回数」だけ繰り返されます。大きなデータを扱うときは処理が重くなるので注意しましょう。
まとめ
- ネストしたループは「ループの中にループ」を書く方法。
- 外側が1回進むごとに、内側がすべて実行される。
- 九九の表、二次元配列、組み合わせの列挙などに便利。
- 深すぎるネストは読みにくくなるので整理が大切。
初心者は「外側が大きな枠、内側が細かい繰り返し」とイメージすると理解しやすいです。