JavaScriptで2次元配列を初期化する7つの方法

●2次元配列とは？

プログラミングで、配列は非常に重要な役割を果たします。

中でも、2次元配列は複雑なデータ構造を表現する際に欠かせない存在です。

○2次元配列の基本概念

2次元配列とは、配列の中に配列を入れ子にしたデータ構造のことを指します。

つまり、縦と横の2つの次元を持った配列です。

これは、表形式のデータや、グリッドベースのゲームマップなどを表現する際に非常に便利です。

例えば、3×3の2次元配列は次のように表現できます。

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

この例では、array2Dは3つの要素を持つ配列であり、各要素もまた3つの要素を持つ配列となっています。

つまり、array2D[0][0]は1、array2D[1][2]は6を表しています。

○2次元配列の利点

2次元配列を使うことで、複雑なデータ構造をシンプルに表現できるようになります。

例えば、画像処理において、各ピクセルの色情報を2次元配列で管理することができます。

また、迷路の経路探索や、チェスのようなボードゲームの開発など、2次元配列が活躍するシーンは数多くあります。

2次元配列を扱う際は、ループ処理を駆使することで、効率的にデータにアクセスできます。

例えば、先ほどの3×3の2次元配列を走査するには、次のようなネストされたループを使用します。

for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    console.log(array2D[i][j]);
  }
}

この処理により、array2Dのすべての要素に順番にアクセスし、それぞれの値をコンソールに出力することができます。

実行結果

1
2
3
4
5
6
7
8
9

このように、2次元配列を使いこなすことで、より複雑なデータ構造を扱うことができるようになります。

2次元配列は、アルゴリズムやデータ構造の理解を深める上でも重要な概念の1つです。

●JavaScriptでの2次元配列の宣言

さて、JavaScriptで2次元配列を扱うためには、まず配列の宣言方法を理解しておく必要があります。

2次元配列の宣言は、1次元配列の宣言をベースに、もう1つ次元を追加するイメージです。

○サンプルコード1：基本的な2次元配列の宣言

JavaScriptで2次元配列を宣言する基本的な方法は、次のようになります。

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

この例では、array2Dという変数に、3つの要素を持つ配列を割り当てています。

各要素は、それぞれ3つの要素を持つ配列となっています。

つまり、array2D[0][0]は1、array2D[1][2]は6を表しています。

実行結果

console.log(array2D[0][0]); // 1
console.log(array2D[1][2]); // 6

このように、角括弧[]を2つ使うことで、2次元配列にアクセスすることができます。

1つ目の角括弧は行を、2つ目の角括弧は列を表しています。

○サンプルコード2：指定したサイズの2次元配列の宣言

次に、指定したサイズの2次元配列を宣言する方法を見ていきましょう。

例えば、3行4列の2次元配列を宣言するには、次のようにします。

const rows = 3;
const cols = 4;
const array2D = new Array(rows);

for (let i = 0; i < rows; i++) {
  array2D[i] = new Array(cols);
}

この例では、まずrowsとcolsという変数に、それぞれ行数と列数を設定しています。

次に、new Array(rows)で、rows個の要素を持つ配列を作成し、array2Dに割り当てています。

さらに、for文を使って、array2Dの各要素に、cols個の要素を持つ配列を割り当てています。

これにより、3行4列の2次元配列が完成します。

実行結果

console.log(array2D.length); // 3
console.log(array2D[0].length); // 4

array2D.lengthは行数を、array2D[0].lengthは列数を表しています。

このように、JavaScriptでは、配列のサイズを動的に指定して2次元配列を宣言することができます。

この方法は、配列のサイズが予め決まっていない場合や、ユーザーからの入力に基づいて配列を作成する場合に便利です。

●2次元配列の初期化方法

2次元配列を宣言したら、次はいよいよ配列の初期化です。

初期化とは、配列の要素に初期値を設定することを指します。

JavaScriptでは、2次元配列の初期化にもいくつかの方法があります。

それぞれの方法を、サンプルコードを交えながら詳しく見ていきましょう。

○サンプルコード3：for文を使った初期化

まずは、for文を使った初期化方法です。

これは、配列のサイズが予め決まっている場合に便利な方法です。

const rows = 3;
const cols = 4;
const array2D = new Array(rows);

for (let i = 0; i < rows; i++) {
  array2D[i] = new Array(cols);
  for (let j = 0; j < cols; j++) {
    array2D[i][j] = i * cols + j + 1;
  }
}

この例では、3行4列の2次元配列を宣言し、各要素に1から始まる連番を割り当てています。

外側のfor文で行を、内側のfor文で列を制御しています。

実行結果

console.log(array2D);
// [
//   [1, 2, 3, 4],
//   [5, 6, 7, 8],
//   [9, 10, 11, 12]
// ]

○サンプルコード4：Array.from()を使った初期化

次に、Array.from()メソッドを使った初期化方法を見ていきましょう。

このメソッドは、配列のサイズと初期値を指定できるので、for文よりもシンプルに書くことができます。

const rows = 3;
const cols = 4;
const initialValue = 0;
const array2D = Array.from(Array(rows), () => new Array(cols).fill(initialValue));

この例では、Array.from()メソッドの第1引数にArray(rows)を指定して、rows個の要素を持つ配列を作成しています。

第2引数には、各要素の初期値を返すコールバック関数を指定します。

ここでは、new Array(cols).fill(initialValue)で、cols個の要素を持つ配列を作成し、initialValueで初期化しています。

実行結果

console.log(array2D);
// [
//   [0, 0, 0, 0],
//   [0, 0, 0, 0],
//   [0, 0, 0, 0]
// ]

○サンプルコード5：スプレッド演算子を使った初期化

スプレッド演算子(…)を使うと、配列のシャローコピーを作成できます。

これを利用して、2次元配列を初期化することもできます。

const rows = 3;
const cols = 4;
const initialValue = 1;
const array2D = Array(rows).fill(Array(cols).fill(initialValue));

この例では、Array(rows).fill()で、rows個の要素を持つ配列を作成し、各要素をArray(cols).fill(initialValue)で初期化しています。

ただ、この方法には注意点があります。

実行結果

console.log(array2D);
// [
//   [1, 1, 1, 1],
//   [1, 1, 1, 1],
//   [1, 1, 1, 1]
// ]

array2D[0][0] = 0;
console.log(array2D);
// [
//   [0, 1, 1, 1],
//   [0, 1, 1, 1],
//   [0, 1, 1, 1]
// ]

array2D[0][0]の値を変更すると、すべての行の最初の要素が変更されてしまいます。

これは、Array(cols).fill(initialValue)で作成した配列が、すべての行で共有されているためです。

○サンプルコード6：Array.fill()を使った初期化

Array.fill()メソッドを使って、2次元配列を初期化することもできます。

ただし、サンプルコード5と同様の注意点があります。

const rows = 3;
const cols = 4;
const initialValue = 1;
const array2D = Array(rows).fill().map(() => Array(cols).fill(initialValue));

この例では、Array(rows).fill()で、rows個のundefinedを持つ配列を作成し、map()メソッドで各要素をArray(cols).fill(initialValue)で初期化しています。

実行結果

console.log(array2D);
// [
//   [1, 1, 1, 1],
//   [1, 1, 1, 1],
//   [1, 1, 1, 1]
// ]

array2D[0][0] = 0;
console.log(array2D);
// [
//   [0, 1, 1, 1],
//   [1, 1, 1, 1],
//   [1, 1, 1, 1]
// ]

この方法なら、各行が独立した配列になるので、サンプルコード5の問題は解決されます。

○サンプルコード7：Array.from()とmap()を使った初期化

最後に、Array.from()メソッドとmap()メソッドを組み合わせた初期化方法を見ていきましょう。

この方法は、配列のサイズと初期値を指定でき、かつ各行が独立した配列になります。

const rows = 3;
const cols = 4;
const initialValue = 1;
const array2D = Array.from(Array(rows), () => Array.from(Array(cols), () => initialValue));

この例では、Array.from()メソッドの第1引数にArray(rows)を指定して、rows個の要素を持つ配列を作成しています。

第2引数には、各要素の初期値を返すコールバック関数を指定します。

ここでは、Array.from(Array(cols), () => initialValue)で、cols個の要素を持つ配列を作成し、initialValueで初期化しています。

実行結果

console.log(array2D);
// [
//   [1, 1, 1, 1],
//   [1, 1, 1, 1],
//   [1, 1, 1, 1]
// ]

array2D[0][0] = 0;
console.log(array2D);
// [
//   [0, 1, 1, 1],
//   [1, 1, 1, 1],
//   [1, 1, 1, 1]
// ]

この方法は、シンプルで安全な2次元配列の初期化方法だと言えるでしょう。

●2次元配列の要素へのアクセス

2次元配列を宣言し、初期化できるようになったら、いよいよ配列の要素にアクセスする方法を学んでいきましょう。

配列の要素にアクセスできなければ、せっかく作成した配列も意味がありません。

○サンプルコード8：インデックスを使った要素へのアクセス

2次元配列の要素にアクセスする最も基本的な方法は、インデックスを使うことです。

インデックスとは、配列の要素の位置を表す数値のことです。

JavaScriptの配列は0から始まるので、1行目の要素にアクセスするには0を、2行目の要素にアクセスするには1を使います。

const array2D = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12]
];

console.log(array2D[0][0]); // 1
console.log(array2D[1][2]); // 7
console.log(array2D[2][3]); // 12

この例では、array2D[0][0]で1行目の1列目の要素である1にアクセスしています。

同様に、array2D[1][2]で2行目の3列目の要素である7に、array2D[2][3]で3行目の4列目の要素である12にアクセスしています。

インデックスを使ったアクセス方法は、配列のサイズが小さい場合や、特定の要素だけにアクセスしたい場合に便利です。

しかし、配列のサイズが大きくなると、インデックスを使ったアクセスは面倒になってきます。

○サンプルコード9：for文を使った要素の走査

配列のすべての要素にアクセスしたい場合は、for文を使うのが一般的です。

for文を使えば、配列のサイズに関係なく、すべての要素に順番にアクセスできます。

const array2D = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12]
];

for (let i = 0; i < array2D.length; i++) {
  for (let j = 0; j < array2D[i].length; j++) {
    console.log(array2D[i][j]);
  }
}

この例では、外側のfor文でarray2Dの行を、内側のfor文で各行の列を走査しています。

array2D.lengthは行数を、array2D[i].lengthは各行の列数を表しています。

実行結果

1
2
3
4
5
6
7
8
9
10
11
12

for文を使った走査方法は、配列のすべての要素に順番にアクセスしたい場合に便利です。

例えば、2次元配列に格納された数値の合計を求めたり、配列の要素を加工したりする場合などです。

2次元配列の要素へのアクセス方法について、インデックスを使う方法とfor文を使う方法を見てきました。

状況に応じて適切な方法を選択することが大切です。

●よくあるエラーと対処法

JavaScriptで2次元配列を扱っていると、思わぬエラーに遭遇することがあります。

初心者の方は特に、エラーメッセージを見ただけでは原因がわからず、戸惑ってしまうかもしれません。

そんな時に備えて、よくあるエラーとその対処法について見ていきましょう。

○TypeError: Cannot read property ‘0’ of undefined

このエラーは、存在しない配列の要素にアクセスしようとした時に発生します。

例えば、次のようなコードを実行すると、このエラーが発生します。

const array2D = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12]
];

console.log(array2D[3][0]); // TypeError: Cannot read property '0' of undefined

この例では、array2Dは3行の2次元配列ですが、array2D[3]は存在しない4行目の要素を参照しようとしています。

その結果、array2D[3]はundefinedになり、さらにその0番目の要素にアクセスしようとしたために、このエラーが発生しています。

このエラーを避けるためには、配列のサイズを超えたインデックスを使わないように注意する必要があります。

配列のサイズは、array.lengthプロパティで取得できます。

○RangeError: Invalid array length

このエラーは、配列のサイズに負の数や非常に大きな数を指定した時に発生します。

例えば、次のようなコードを実行すると、このエラーが発生します。

const rows = -1;
const cols = 4;
const array2D = new Array(rows); // RangeError: Invalid array length

for (let i = 0; i < rows; i++) {
  array2D[i] = new Array(cols);
}

この例では、rowsに-1を指定しているため、配列のサイズとして不正な値になっています。

このエラーを避けるためには、配列のサイズには0以上の整数を指定するようにしましょう。

また、配列のサイズが不明な場合は、動的に配列を作成するようにします。

○配列のサイズを超えたインデックスへのアクセス

これは、エラーではありませんが、配列のサイズを超えたインデックスを使った場合の動作について知っておく必要があります。

const array2D = [
  [1, 2, 3, 4],
  [5, 6, 7, 8],
  [9, 10, 11, 12]
];

console.log(array2D[1][4]); // undefined
array2D[1][4] = 100;
console.log(array2D[1][4]); // 100
console.log(array2D[1]); // [5, 6, 7, 8, 100]

この例では、array2D[1]は4つの要素を持つ配列ですが、5つ目の要素にアクセスしています。

この場合、undefinedが返されます。

さらに、存在しないインデックスに値を割り当てると、配列が自動的に拡張されます。

この例では、array2D[1][4]に100を割り当てているため、array2D[1]は[5, 6, 7, 8, 100]になっています。

配列が自動的に拡張されることを理解していれば、意図しない動作を避けることができます。

しかし、可能な限り、配列のサイズを超えたインデックスを使わないようにするのが賢明です。

●2次元配列の応用例

JavaScriptの2次元配列は、さまざまな場面で活用されています。

ここでは、実際のアプリケーション開発で2次元配列がどのように使われているのかを、具体的な例を交えながら見ていきましょう。

○サンプルコード10：行列の表現

2次元配列は、行列を表現するのに最適です。

行列は、数学や物理学などの分野で頻繁に使われる概念で、複数の数値を長方形の形に並べたものです。

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

function printMatrix(matrix) {
  for (let i = 0; i < matrix.length; i++) {
    console.log(matrix[i].join(' '));
  }
}

printMatrix(matrix);

この例では、3×3の行列を2次元配列matrixで表現しています。

printMatrix関数では、配列の各行をjoin(‘ ‘)でスペース区切りの文字列に変換し、console.logで出力しています。

実行結果

1 2 3
4 5 6
7 8 9

行列は、グラフィックスプログラミングや機械学習など、さまざまな分野で使われています。

2次元配列を使えば、行列を直感的に表現できます。

○サンプルコード11：グリッドベースのゲームマップ

2次元配列は、グリッドベースのゲームマップを表現するのにも便利です。

例えば、次のようなマップを考えてみましょう。

const map = [
  ['S', '.', '.', '#', '.'],
  ['.', '#', '.', '.', '.'],
  ['.', '#', 'G', '#', '.'],
  ['.', '.', '.', '#', '.'],
  ['.', '#', '.', '.', '.']
];

function printMap(map) {
  for (let i = 0; i < map.length; i++) {
    console.log(map[i].join(''));
  }
}

printMap(map);

この例では、5×5のゲームマップを2次元配列mapで表現しています。

‘S’はスタート地点、’G’はゴール地点、’#’は壁、’.’は通路を表しています。

printMap関数では、配列の各行をjoin(”)で文字列に変換し、console.logで出力しています。

実行結果

S..#.
.#...
.#G#.
...#.
.#...

このようなマップ表現は、ローグライクゲームや パズルゲームなどでよく使われています。

2次元配列を使えば、マップの構造を直感的に理解できます。

また、マップ上の任意の位置にアクセスしたり、マップを更新したりするのも簡単です。

○サンプルコード12：表形式データの格納

2次元配列は、表形式のデータを格納するのにも適しています。

例えば、次のような学生の成績データを考えてみましょう。

const grades = [
  ['Alice', 90, 80, 85],
  ['Bob', 75, 80, 90], 
  ['Charlie', 85, 90, 95]
];

function printGrades(grades) {
  console.log('Name\tMath\tScience\tEnglish');
  for (let i = 0; i < grades.length; i++) {
    console.log(grades[i].join('\t'));
  }
}

printGrades(grades);

この例では、3人の学生の3科目の成績を2次元配列gradesで表現しています。

各行の最初の要素は学生の名前で、残りの要素は数学、理科、英語の成績です。

printGrades関数では、配列の各行をjoin(‘\t’)でタブ区切りの文字列に変換し、console.logで出力しています。

実行結果

Name    Math    Science English
Alice   90      80      85
Bob     75      80      90
Charlie 85      90      95

このような表形式のデータは、CSVファイルやスプレッドシートなどでよく使われています。

2次元配列を使えば、データの構造を直感的に理解できます。

また、特定の行や列のデータにアクセスしたり、データを加工したりするのも簡単です。

まとめ

JavaScriptで2次元配列を扱う方法について、基本的な概念から実践的な応用例まで幅広く解説してきました。

2次元配列は、複雑なデータ構造を表現するのに非常に便利で、行列、ゲームマップ、表形式データなど、さまざまな場面で活躍します。

宣言と初期化の方法を理解し、要素へのアクセス方法を身につけることで、2次元配列を自在に操ることができるようになります。

また、よくあるエラーと対処法を知っておくことで、問題に直面した時にも冷静に対処できるでしょう。

2次元配列を使いこなすことで、より高度なアルゴリズムやデータ構造に挑戦できるようになります。

今回学んだ知識を生かして、実際のアプリケーション開発で2次元配列を活用してみてください。