JavaScriptの多次元配列（配列の入れ子構造）を扱う方法

1. 多次元配列とは？配列の中に配列がある構造

1. 多次元配列とは？配列の中に配列がある構造

多次元配列とは、配列の中にさらに配列が入っている状態を指します。たとえば、学校の成績表のように「クラスごとに生徒の点数がある」場合に便利です。

普通の配列は1列のリストですが、多次元配列は行と列のように2次元以上の構造を表せます。

let scores = [
  [80, 90, 85],  // クラス1の生徒3人の点数
  [75, 88, 92],  // クラス2の生徒3人の点数
  [90, 85, 87]   // クラス3の生徒3人の点数
];

このように配列の中に3つの配列があり、それぞれが生徒の点数を表しています。

2. 多次元配列の要素にアクセスする方法

2. 多次元配列の要素にアクセスする方法

多次元配列の中の値にアクセスするときは、[行の番号][列の番号]の順に書きます。たとえば、先ほどの例でクラス2の2番目の生徒の点数を取り出す場合はこう書きます。

let score = scores[1][1];  // 88
console.log(score);

ここで、配列の番号（インデックス）は0から始まるので、1は2番目を意味します。

3. 多次元配列をループで処理する方法

3. 多次元配列をループで処理する方法

多次元配列のすべての値を取り出したり、合計を計算したりするには、ループを2重に使います。つまり、外側の配列を回して、その中にある配列も回します。

for (let i = 0; i < scores.length; i++) {
  for (let j = 0; j < scores[i].length; j++) {
    console.log(`クラス${i + 1}の生徒${j + 1}の点数: ${scores[i][j]}`);
  }
}

このように書くことで、全ての生徒の点数を順番に表示できます。

4. 多次元配列の便利な使いどころ

4. 多次元配列の便利な使いどころ

多次元配列は、表やマトリックスのようなデータを扱うときに特に便利です。たとえば、チェスの盤面、カレンダーの予定、ゲームのマップ情報なども多次元配列で表現できます。

また、配列の中にもっと深い配列を入れれば、3次元やそれ以上の配列も作れますが、まずは2次元配列に慣れることが大切です。

5. 多次元配列の注意点

5. 多次元配列の注意点

多次元配列の要素にアクセスするときは、存在しないインデックスにアクセスするとエラーやundefinedになるので気をつけましょう。

例えば、配列の長さより大きい番号を指定しないように、lengthプロパティを活用してループの範囲を決めるのがおすすめです。

まとめ

まとめ

多次元配列という概念は、JavaScriptの学習において理解しておくと非常に役に立つ知識です。配列の中にさらに配列を入れることで、複雑な情報を整理しながら扱えるようになり、表形式のデータや二次元のマップ、行と列で成り立つ構造を自然な形で管理できます。今回の記事では、配列の入れ子構造という考えかたを具体的にイメージしやすいように、学校の成績表や表形式のデータを例にしながら説明しました。配列は一列に並んだデータを扱うもので、多次元配列はそれを複数組み合わせてより広い情報を扱える器のような存在だと捉えると理解しやすくなります。 多次元配列の扱いかたとして、まず知っておきたいのは「どの位置にある要素を取り出すか」という点で、行と列の二つの数字を使ってアクセスする仕組みです。インデックスがゼロから始まるというJavaScriptのルールを改めて意識しながら、多次元配列の中にある値を正確に取り出すことが大切です。配列の番号がずれるとまったく別の値が取り出されてしまうため、慣れるまではゆっくり確認しながら書くと理解が深まります。とくに、scores[1][1] のように二つの番号が続く形は初心者が最初に躓きやすい場所なので、一つ一つ意味を把握しながら読み解く練習が必要です。 また、多次元配列を扱ううえで避けられないのが二重ループの使いかたです。一つ目のループで行を繰り返し、二つ目のループで列を繰り返すことで、表に並んだ全ての値を順番に処理できます。二重ループに慣れると、全体の合計値を計算したり、特定の条件に合うデータを探したり、さらに複雑な処理へと応用を広げることが可能になります。プログラムの書き方を整理しながら丁寧にループを重ねていくことで、配列の構造を自然と頭の中でイメージできるようになります。 多次元配列の便利さは、単なる数値や文字列の管理にとどまりません。たとえば、ゲームのマップ情報を二次元配列で表すことで、地形の種類やオブジェクトの位置を把握したり、カレンダーのような日付の並びを扱ったり、表形式の一覧データを扱ったりと、実用的な場面が非常に広いのが特徴です。こうした仕組みを知っておくことで、JavaScriptでのデータ処理はもちろん、後の学習で登場するAPI操作や外部のデータ構造を読み解く際にも理解が進みやすくなります。 ただし、多次元配列を扱う際に注意しておきたいのは、存在しないインデックスを参照したときにundefinedになってしまう点です。配列の長さを確認しながら安全にアクセスする習慣を身につけておくことが、エラーを防ぎながら安心してコードを書くためのポイントになります。lengthプロパティを利用しながらループの範囲を正しく指定することで、予期しない動作を避けることができます。特に慣れないうちは、どの行に何が入っているのか、どの列にどの値があるのかを意識しながら丁寧に確認することがとても重要です。 以下には、今回学んだ内容をふりかえりながら実行できるサンプルコードを掲載しています。このコードを参考に、自分でも配列を増やしたり値を変えたりしながら練習してみることで、多次元配列の理解がより深まります。

サンプルプログラム

// 多次元配列の基本構造
let classes = [
  ["たろう", "じろう", "はなこ"],
  ["みさき", "ゆうと", "あかり"],
  ["けんた", "りさ", "まこと"]
];

// 名前を一覧表示する処理
for (let i = 0; i < classes.length; i++) {
  for (let j = 0; j < classes[i].length; j++) {
    console.log(`クラス${i + 1}の生徒${j + 1}: ${classes[i][j]}`);
  }
}

// 指定位置の生徒名を取り出す例
let target = classes[1][2];
console.log("取り出した生徒: " + target);

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

JavaScriptの多次元配列とは何ですか？

JavaScriptの多次元配列とは、配列の中にさらに別の配列が入っている構造のことです。これは、表やマトリックスのような二次元以上のデータを扱いたいときに使われます。たとえば、クラスごとの生徒の点数などを整理して格納するのに適しています。