先生と生徒の会話形式で理解しよう

生徒

「先生、JavaScriptで多次元配列って何ですか？そして、どうやってループで操作するんですか？」

先生

「多次元配列は、配列の中にさらに配列が入っているものです。たとえば、表のように行と列があるデータを扱うときに使います。操作には、ループを入れ子にして使うんですよ。」

生徒

「ループを入れ子？それってどういう意味ですか？」

先生

「ループの中にさらにループを書くことを入れ子（ネスト）と言います。多次元配列は階層が深いので、外側のループで行を、内側のループで列を順番に処理します。」

生徒

「なるほど！具体的にコード例を教えてください！」

先生

「はい、それでは順を追って解説していきましょう！」

1. 多次元配列とは？

多次元配列とは、配列の中にさらに配列が入っている構造のことです。わかりやすく言うと、2次元の表（例えば、エクセルのような行と列のデータ）を扱うときに使います。

例えば、次のように書きます。


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

この例では、3行3列の数字の表が配列で表されています。

2. ループのネストとは？

ループのネストとは、「ループの中に別のループを入れる」ことです。例えば、外側のループで行を1つずつ見て、内側のループでその行の中の列を1つずつ見ます。

こうすることで、多次元配列のすべての要素に順番にアクセスできます。

3. 多次元配列をループのネストで操作する基本例

実際に、先ほどの3x3の配列をループのネストで1つずつ出力するコードを見てみましょう。


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

for (let i = 0; i < matrix.length; i++) {      // 外側のループ：行を順に見る
  for (let j = 0; j < matrix[i].length; j++) {  // 内側のループ：その行の列を順に見る
    console.log(matrix[i][j]);
  }
}

このコードでは、iが行番号（インデックス）、jが列番号（インデックス）を表しています。

実行すると、1から9まで順番にコンソールに表示されます。

4. インデックス番号について

配列の番号は0から始まるので、matrix[0]が1行目の配列、matrix[1]が2行目の配列です。

同様に、matrix[0][0]は1行1列目の要素（数字の1）、matrix[2][1]は3行2列目の要素（数字の8）です。

このようにインデックスを使うことで、多次元配列のどの位置の値でも取り出せます。

5. 多次元配列の値を変更する方法

ループの中で配列の値を書き換えることもできます。例えば、すべての数字に10を足す場合は次のように書きます。


for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    matrix[i][j] = matrix[i][j] + 10;
  }
}
console.log(matrix);

実行結果はすべての数字に10が足された新しい多次元配列になります。

6. ネストされたループで配列の各要素を出力する応用例

多次元配列の中身を行ごとにわかりやすく表示したい場合は、以下のようにループ内で文字列を組み合わせて出力することもできます。


for (let i = 0; i < matrix.length; i++) {
  let rowStr = "";
  for (let j = 0; j < matrix[i].length; j++) {
    rowStr += matrix[i][j] + " ";
  }
  console.log("行 " + (i + 1) + ": " + rowStr);
}

このコードは、「行 1: 1 2 3 」のように、行番号とその行の要素をまとめて表示します。