JavaScriptのループをネストして多次元配列を操作する方法を初心者向けに解説！

1. 多次元配列とは？

1. 多次元配列とは？

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

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

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

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

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

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

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

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

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

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. インデックス番号について

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

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

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

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

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

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. ネストされたループで配列の各要素を出力する応用例

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 」のように、行番号とその行の要素をまとめて表示します。

7. 多次元配列のループ処理で気をつけたいポイント

7. 多次元配列のループ処理で気をつけたいポイント

• 外側のループは多次元配列の「行」の数だけ回す
• 内側のループはその行の「列」の数だけ回す
• 配列のインデックスは0から始まるので注意する
• 多次元配列は配列の中に配列が入っているので、深さに応じてループを入れ子にする

これらのポイントを押さえておくと、多次元配列の扱いがスムーズになります。

8. まとめなしで最後にひとこと

8. まとめなしで最後にひとこと

JavaScriptのループのネストは多次元配列を操作するときに欠かせないテクニックです。まずは表のような2次元配列から練習し、慣れてきたら3次元以上の配列にもチャレンジしてみてください。

まとめ

まとめ

ここまでJavaScriptにおける多次元配列の基本から、ループのネスト（入れ子構造）を利用した具体的な操作方法までを詳しく解説してきました。プログラミングを学び始めたばかりの方にとって、配列の中に配列があるという構造や、ループが二重に回る仕組みは、少し頭が混乱する部分かもしれません。しかし、この「多次元配列と多重ループ」の組み合わせをマスターすることは、実務レベルのアプリケーション開発において非常に強力な武器となります。

多次元配列は、単なる数値の羅列ではなく、現実世界の複雑なデータを表現するために使われます。例えば、Webサイトの座席予約システムにおける座席配置、ゲームのマップデータ、あるいは統計データの集計結果など、行と列を持つあらゆるデータ構造に対応できます。これらを自在に操るためには、インデックス（添字）が「どの階層の、どの要素を指しているのか」を常に意識することが重要です。

JavaScriptで多次元配列を扱う際の重要キーワード

検索エンジンでJavaScriptの配列操作について調べていると、よく目にするキーワードがいくつかあります。今回の学習内容をさらに深めるために、以下のポイントを整理しておきましょう。

• ネスト（Nesting）： 制御構造（if文やfor文など）の中に、さらに同じ構造を入れること。
• 2次元配列（Two-dimensional Array）： 配列の要素が配列になっている、もっとも一般的な多次元配列。
• インデックス（Index）： 配列内の位置を示す番号。JavaScriptでは必ず0から始まる「ゼロオリジン」です。
• lengthプロパティ： 配列の要素数を取得するためのプロパティ。ループの終了条件に必須です。

実践的なサンプルコード：複雑なデータの集計

より実践に近い形として、多次元配列に格納されたテストの点数をクラスごとに集計し、平均点を算出するプログラムを書いてみましょう。実務ではこうした数値計算やデータの加工が頻繁に行われます。

// クラスごとのテスト結果（3クラス分、各クラス4名）
const classScores = [
  [80, 90, 75, 65], // 1組
  [55, 100, 92, 88], // 2組
  [70, 70, 85, 95]  // 3組
];

console.log("--- 各クラスの合計点計算開始 ---");

for (let i = 0; i < classScores.length; i++) {
  let total = 0;
  // 各クラスの内訳をループで回す
  for (let j = 0; j < classScores[i].length; j++) {
    total += classScores[i][j];
  }
  
  const average = total / classScores[i].length;
  console.log((i + 1) + "組の合計点: " + total + "点 / 平均点: " + average + "点");
}

上記のコードを実行すると、コンソールには以下のような結果が表示されます。

--- 各クラスの合計点計算開始 ---
1組の合計点: 310点 / 平均点: 77.5点
2組の合計点: 335点 / 平均点: 83.75点
3組の合計点: 320点 / 平均点: 80点

さらなるステップアップに向けて

基本的なfor文によるループに慣れてきたら、JavaScriptが提供するモダンな配列メソッド（forEach, map, filterなど）についても学んでいくと良いでしょう。しかし、アルゴリズムの基礎を理解するためには、今回のようなインデックスを使った古典的なfor文の動きを完璧に理解しておくことが近道です。

もしエラーが出たり、思い通りの数値が取れなかったりしたときは、console.log(matrix[i])のように、ループの途中で中身を小まめに出力して確認する癖をつけましょう。デバッグ作業こそが、プログラミング上達の最大の秘訣です。