ここからは「3次元配列（配列の中の配列の中に配列）」を、初心者向けにわかりやすく、図と例題でじっくり解説します。
3次元配列とは？
イメージからつかもう
「配列の中に配列があり、その中にさらに配列がある」構造です。
たとえるなら：
📦 大きな箱 → 🧺 棚 → 📦 小箱 → 🎁 中身
つまり：
[
[ [A, B], [C, D] ],
[ [E, F], [G, H] ]
]
- 一番外の
[ ... ]が「大きな箱」 - その中に「棚（配列）」があり
- 棚の中には「小箱（配列）」があり
- 小箱の中に実際の値が入っています
2次元配列との違い
| 種類 | 構造 | イメージ |
|---|---|---|
| 2次元配列 | 配列の中に配列 | 表（行と列） |
| 3次元配列 | 配列の中に配列の中に配列 | 表がいくつも重なった立体（立方体） |
実際のコード例で見てみよう
例1：3×2×2 の配列（数字データ）
let data = [
[ [1, 2], [3, 4] ],
[ [5, 6], [7, 8] ],
[ [9, 10], [11, 12] ]
];
この配列の構造を分解すると：
data = [
0: [ [1, 2], [3, 4] ], ← 「第1グループ」
1: [ [5, 6], [7, 8] ], ← 「第2グループ」
2: [ [9, 10], [11, 12] ] ← 「第3グループ」
]
要素にアクセスする
3つのインデックスを使います。
console.log(data[0][0][0]); // 1
console.log(data[0][1][1]); // 4
console.log(data[2][1][0]); // 11
つまり：
data[グループ番号][棚番号][小箱番号]
例2：学校・クラス・生徒のデータ
let school = [
[ // 1校目
['Yamada', 'Suzuki'], // 1組
['Tanaka', 'Kobayashi'] // 2組
],
[ // 2校目
['Sato', 'Kondo'], // 1組
['Honda', 'Inoue'] // 2組
]
];
これを図にすると：
school = [
0: [
0: ['Yamada', 'Suzuki'],
1: ['Tanaka', 'Kobayashi']
],
1: [
0: ['Sato', 'Kondo'],
1: ['Honda', 'Inoue']
]
]
アクセス例：
console.log(school[0][0][1]); // 'Suzuki'（1校目の1組の2人目）
console.log(school[1][1][0]); // 'Honda'（2校目の2組の1人目）
ループで全ての要素を表示する
3次元配列では 三重ループ になります。
for (let i = 0; i < school.length; i++) { // 学校
for (let j = 0; j < school[i].length; j++) { // クラス
for (let k = 0; k < school[i][j].length; k++) {// 生徒
console.log(`school[${i}][${j}][${k}] = ${school[i][j][k]}`);
}
}
}
出力：
school[0][0][0] = Yamada
school[0][0][1] = Suzuki
school[0][1][0] = Tanaka
...
コツ（初心者向け）
- まず2次元配列の理解をしっかり。
3次元はそれを「もう1段」重ねただけ。
「表を何枚も重ねた立体」と考えるとわかりやすい。 - インデックスの順序を意識する。
data[学校][クラス][生徒]のように、「階層の順番」に名前をつけると混乱しにくい。 - 途中の配列を変数に入れてから扱うと見やすい。
let school1 = school[0]; let class1 = school1[0]; console.log(class1[1]); // 'Suzuki'
練習問題（手を動かす！）
問題1
次の配列から "Honda" を取り出して表示してください。
let school = [
[ ['Yamada', 'Suzuki'], ['Tanaka', 'Kobayashi'] ],
[ ['Sato', 'Kondo'], ['Honda', 'Inoue'] ]
];
✅ 答え
console.log(school[1][1][0]); // 'Honda'
問題2
次の scores から「クラスごとの合計点」を出して表示してください。
let scores = [
[ [80, 70], [60, 90] ],
[ [55, 75], [85, 95] ]
];
✅ 答え
for (let i = 0; i < scores.length; i++) {
for (let j = 0; j < scores[i].length; j++) {
let sum = 0;
for (let k = 0; k < scores[i][j].length; k++) {
sum += scores[i][j][k];
}
console.log(`Group ${i}, Class ${j} total = ${sum}`);
}
}
出力例：
Group 0, Class 0 total = 150
Group 0, Class 1 total = 150
Group 1, Class 0 total = 130
Group 1, Class 1 total = 180
応用のヒント
- 3次元配列は「立体データ」や「複数グループの表データ」を扱うときに使います。
例）ゲームマップ、時系列データ、画像のピクセル（RGB）など。 - 4次元、5次元配列も作れますが、構造が複雑になるので、
オブジェクトやクラスで表す方が現実的です。
まとめ
| ポイント | 説明 |
|---|---|
| 3次元配列 | 配列の中に配列の中に配列 |
| 構造 | data[外側][中間][内側] |
| 利用例 | 学校→クラス→生徒、時系列→日→データなど |
| ループ処理 | 三重ループ（for ×3）で全要素を処理 |
| コツ | 一段ずつ変数に取り出して考えると理解しやすい |
See the Pen 3D Array Visualization Animation by MONO365 -Color your days- (@monoqlo365) on CodePen.