二次元配列(表形式のデータ)

このレッスンでは、JavaScriptで二次元配列を扱う書き方を学び、表形式やマス目状のデータを表現できるようになることを目標にします。「JavaScript 二次元配列 使い方」「JavaScript 配列 入れ子」で調べている方向けの内容です。

配列の中に配列を入れると、行と列を持つ「マス目のような表」を表現できます。これを二次元配列と呼びます。grid[行][列]のように2つの添字でアクセスします。座標を持つゲームの盤面や、表計算のようなデータを扱うときに使われる基本の考え方です。三次元・四次元と、配列の中に配列を入れ子にすればさらに複雑なデータ構造も表現できます。

サンプルコードでは、3×2のgridという二次元配列を作り、grid[1][2]で2行目・3列目の値を取り出しています。for...of文で各行を.join(",")して表示しているのは、二次元配列の中身を見やすく確認する際によく使われるパターンです。行を先に、列を後に指定する順番を覚えておきましょう。

初心者がよくつまずくのが、行と列の添字の順番を逆にしてしまうミスです。grid[列][行]のように書いてしまうと、意図しない位置の値にアクセスしてしまいます。また、二次元配列をコピーするときに...だけでは内側の配列まではコピーされない(浅いコピーになる)点にも注意が必要です。

実際の開発現場では、画像処理やゲームの盤面管理、表計算ソフトのようなデータのインポートなど、格子状のデータを扱うプログラムで二次元配列は頻繁に登場します。行列演算を使うデータ分析やAIの分野でも、この考え方が基礎になっています。

二次元配列を初期化するとき、同じ配列を使い回して複製すると、すべての行が同じ配列を参照してしまう落とし穴もあります。行ごとに新しい配列を作るよう意識することが、正しい二次元配列を作るコツです。