配列の中に配列、その中にまた配列。最初はややこしく見えるけれど、「箱の中に箱が入っていて、さらにその中に箱がある」と想像できたらぐっと楽になります。3次元配列は、データを「階層」と「位置」で整理するための強力な道具です。
3次元配列のイメージ図
立方体の箱イメージ（x・y・z の3方向）
array[z][y][x]
z = 0 ┌ y = 0: [a00, a01, a02]
├ y = 1: [a10, a11, a12]
└ y = 2: [a20, a21, a22]
z = 1 ┌ y = 0: [b00, b01, b02]
├ y = 1: [b10, b11, b12]
└ y = 2: [b20, b21, b22]
- z（層）: 上段・下段などの「レイヤー」
- y（行）: タテ方向
- x（列）: ヨコ方向
JavaScript には「多次元配列」という特別な構文はありませんが、「配列の要素に配列を入れる」ことで多次元的に扱えます
基本の作り方と取り出し方
// 3 (z層) × 2 (y行) × 4 (x列) の3次元配列
const cube = [
[ // z = 0
[ 1, 2, 3, 4], // y = 0
[ 5, 6, 7, 8], // y = 1
],
[ // z = 1
[ 9, 10, 11, 12],
[13, 14, 15, 16],
],
[ // z = 2
[17, 18, 19, 20],
[21, 22, 23, 24],
],
];
// 取り出し（z=1, y=0, x=2 → 11）
console.log(cube[1][0][2]);
// 代入（z=2, y=1, x=3 に 999 を入れる）
cube[2][1][3] = 999;
- 添え字の順番: array[z][y][x] の順に「層→行→列」を指すのが定石です。JavaScript では配列の要素に別の配列を格納できるため、これで3次元を表現できます。
図でわかる作成ステップ
ステップ1：1次元「列」を作る
const col0 = [1, 2, 3, 4]; // x = 0..3
const col1 = [5, 6, 7, 8];
ステップ2：2次元「行 × 列」にする
const layer0 = [col0, col1]; // y = 0..1
ステップ3：3次元「層 × 行 × 列」に積み上げる
const layer1 = [[9,10,11,12], [13,14,15,16]];
const layer2 = [[17,18,19,20], [21,22,23,24]];
const cube = [layer0, layer1, layer2]; // z = 0..2
- ポイント: 「配列の要素に配列を入れる」ことで次元が1つ増えます。JavaScript の配列は要素として配列を持てるため、多次元の表現が可能です。
よくある操作とパターン
- 要素数の確認:
const depth = cube.length; // z 層の数
const rows = cube[0].length; // y 行の数（層ごとに異なる場合は注意）
const cols = cube[0][0].length; // x 列の数
- 全走査（全部読む）:
for (let z = 0; z < cube.length; z++) {
for (let y = 0; y < cube[z].length; y++) {
for (let x = 0; x < cube[z][y].length; x++) {
console.log(`z=${z}, y=${y}, x=${x}:`, cube[z][y][x]);
}
}
}
- 初期化（同じサイズで全部 0 で埋める）:
const Z = 3, Y = 2, X = 4;
const cube = Array.from({ length: Z }, () =>
Array.from({ length: Y }, () =>
Array.from({ length: X }, () => 0)
)
);
- 不揃い配列（ジャグ配列）に注意:
// yごと、xごとに長さが違う例（許されるが走査時に注意）
const jagged = [
[ [1], [2,3] ],
[ [4,5,6] ]
];
// それぞれの .length を毎回確認して安全にループする
- コピーの落とし穴（参照コピー）:
const a = [ [ [1] ] ];
const b = a; // 同じ参照を共有
b[0][0][0] = 999; // a も変わる
// → 深いコピーが必要なら JSON や構造化クローン、再帰コピーを検討
JavaScript の配列は「配列の要素に配列を格納できる」ため、行・列・層のような多次元構造を柔軟に作れます。なお、配列の長さや添え字アクセスは通常の配列と同じ規則を使います。
例題で練習
例題1：3D グリッドの合計値
- 課題: 3次元配列の全要素の合計を求める。
function sum3D(arr3d) {
let sum = 0;
for (let z = 0; z < arr3d.length; z++) {
for (let y = 0; y < arr3d[z].length; y++) {
for (let x = 0; x < arr3d[z][y].length; x++) {
sum += arr3d[z][y][x];
}
}
}
return sum;
}
console.log(sum3D([
[[1,2],[3,4]],
[[5,6],[7,8]]
])); // 36
例題2：層ごとの平均値
- 課題: 各 z 層の平均値を配列で返す。
function layerAverages(arr3d) {
return arr3d.map(layer => {
let sum = 0, count = 0;
for (let y = 0; y < layer.length; y++) {
for (let x = 0; x < layer[y].length; x++) {
sum += layer[y][x];
count++;
}
}
return count ? sum / count : 0;
});
}
console.log(layerAverages([
[[1,2],[3,4]], // 平均 2.5
[[10,20],[30]] // 平均 20
])); // [2.5, 20]
例題3：座標アクセスユーティリティ
- 課題: (z,y,x) で読み書きする関数を作る。
function getAt(arr3d, z, y, x) {
return arr3d?.[z]?.[y]?.[x];
}
function setAt(arr3d, z, y, x, value) {
if (!arr3d[z]) arr3d[z] = [];
if (!arr3d[z][y]) arr3d[z][y] = [];
arr3d[z][y][x] = value;
}
const a = [];
setAt(a, 2, 1, 3, 42);
console.log(getAt(a, 2, 1, 3)); // 42
つまずきポイントとコツ
- インデックスは 0 始まり: 最初の要素は [0]。深くなるほど順番ミスが起きやすいので、意味のある順（z→y→x）を統一する。
- 不揃いに注意: 層や行で列数が異なるときは、各階層の .length をチェックしてループする。
- 参照の共有: ネストした配列は「同じものを指す」ことがある。複製時は浅いコピーでは不十分なことがある。
- 視覚化する: 紙に層・行・列を書き出して、座標に対応させると迷いにくい。
JavaScript の配列は要素として配列も格納できるため、段階的に「配列の中に配列」を重ねることで3次元まで自然に拡張できます。多次元専用の構文はない点も合わせて覚えておくと整理がつきます。
参考の考え方: JavaScript では、多次元専用構文がなくても「配列の要素に配列を持たせる」ことで多次元を表現します。基本の添え字アクセスと配列操作メソッドはそのまま活用できます 。
