入れ子の for 文（多重ループ）
はじめて触ると少しややこしく見えるけれど、慣れると「表や二次元のデータ」を扱う強い味方になります。ここでは、やさしい言葉と手を動かせる例で理解を深めましょう。
基本の考え方
- 仕組み: 外側の for が1回まわる間に、内側の for は最初から最後まで全部まわります。
- 使いどころ: 表、グリッド、二次元配列（配列の中に配列）を順番に処理したいとき。
- イメージ: 行（row）と列（col）を組み合わせて、全マス目をなめる感じ。
for (let i = 0; i < 3; i++) { // 外側：3回
for (let j = 0; j < 2; j++) { // 内側：2回
console.log(`i=${i}, j=${j}`);
}
}
// 出力: i=0,j=0 / i=0,j=1 / i=1,j=0 / i=1,j=1 / i=2,j=0 / i=2,j=1
例題 1：九九の表（1〜9のかけ算）
九九は入れ子の for 文の最強の練習題です。
for (let a = 1; a <= 9; a++) { // 段（1〜9）
let line = "";
for (let b = 1; b <= 9; b++) { // 掛ける数（1〜9）
line += `${a * b}\t`; // \t はタブで見やすく
}
console.log(line);
}
- 外側のループ: 段（1〜9）を進める
- 内側のループ: その段での掛け算結果を横一列に並べる
- コツ: 1から始めるときは
<= 9、0から始めるときは< 9のように「範囲の含み方」を意識する
例題 2：二次元配列を全部出力する
二次元配列は「行の配列の中に、列の配列がある」イメージです。
const scores = [
[88, 78, 82], // 0行目（3列）
[92, 64, 76], // 1行目（3列）
];
for (let row = 0; row < scores.length; row++) {
for (let col = 0; col < scores[row].length; col++) {
console.log(`row=${row}, col=${col}, value=${scores[row][col]}`);
}
}
- 柔軟性:
lengthを使うことで、配列サイズが変わっても安全に全要素を回せる - 読みやすさ: 変数名は
rowとcolのように“役割が伝わる名前”にする
例題 3：文字でパターンを描く（★を並べる）
見た目の手応えがあると理解が進みます。
const size = 5;
for (let i = 0; i < size; i++) {
let line = "";
for (let j = 0; j < size; j++) {
line += "★";
}
console.log(line);
}
// 5×5 の正方形ができる
応用で「右三角形」にするには、内側の回数を i + 1 に変えます。
const n = 5;
for (let i = 0; i < n; i++) {
let line = "";
for (let j = 0; j <= i; j++) {
line += "★";
}
console.log(line);
}
よくあるつまずきと回避法
- オフバイワン:
ループ条件は「含むか含まないか」が重要。0開始は< length、1開始は<= maxが基本。 - 変数名の混乱:
i,jでもいいけれど、役割:row,colのほうがバグを減らせる。 - ネストの深さ:
3重以上になると読みづらい。対策: 関数に分ける、早めにcontinue/break、データ構造を見直す。 - 不要な計算の繰り返し:
同じ値を何度も計算しているなら、キャッシュ: 変数に入れて使い回す。 - 整形のしづらさ:
文字列連結は行ごとにまとめてから出力。ラベル: 行の先頭に「Row 0:」などを付けると見やすい。
練習問題（手を動かす）
- 表の座席番号を作る:
5行×4列の座席に「R{行}-C{列}」のラベルを表示するプログラムを書いてください。 例の出力:
R1-C1 R1-C2 R1-C3 R1-C4
R2-C1 R2-C2 R2-C3 R2-C4
...
R5-C1 R5-C2 R5-C3 R5-C4
- 二次元配列の合計:
const grid = [[1,2,3],[4,5,6],[7,8,9]];の全要素の合計を計算して表示してください。 - 条件付きスキップ:
8×8 の盤で、行＋列が偶数のときだけ「◯」、奇数のときは「・」を表示してチェッカーパターンを作ってください。
ヒント（1問目の形）:
const rows = 5;
const cols = 4;
for (let r = 1; r <= rows; r++) {
let line = "";
for (let c = 1; c <= cols; c++) {
line += `R${r}-C${c} `;
}
console.log(line.trim());
}