JavaScript初心者必見！二次元配列の作成・使い方・対処法・カスタマイズ10選

はじめに
●二次元配列とは
●二次元配列の作成方法
- ○サンプルコード1：二次元配列の作成
●二次元配列の使い方
●二次元配列の応用例
- ○サンプルコード5：二次元配列を使った行列の加算
- ○サンプルコード6：二次元配列を使ったゲームのマップ表現
●二次元配列の注意点と対処法
- ○サンプルコード7：二次元配列のコピーに関する注意点
●二次元配列のカスタマイズ方法
まとめ

はじめに

JavaScriptにおける二次元配列は、データを表形式で扱うための非常に便利な構造です。

初心者の方々にも理解しやすいよう、この記事では二次元配列の基本から応用まで、段階的に説明していきます。

作成方法、使用方法、注意点、そしてカスタマイズ方法まで、具体的な例を交えながら詳しく解説していきますので、最後までしっかりとお読みください。

●二次元配列とは

二次元配列は、配列の中に配列が入っているデータ構造のことを指します。

表計算ソフトのようなグリッド状のデータ構造を表現するのに適しており、行と列で構成されるデータを効率的に扱うことができます。

例えば、チェス盤の状態を表現したり、座席表を管理したりする場面で活躍します。

●二次元配列の作成方法

二次元配列を作成するには、複数の方法がありますが、最もシンプルで直感的な方法をご紹介します。

○サンプルコード1：二次元配列の作成

JavaScriptで二次元配列を作成する際は、角括弧を入れ子にして表現します。

次のコードでは、3行3列の二次元配列を作成しています。

// 二次元配列を作成する
var array2D = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

この例では、外側の配列が3つの要素を持ち、それぞれの要素が内側の配列になっています。

各内側配列は3つの数値を含んでおり、全体として3×3のグリッド構造を形成しています。

●二次元配列の使い方

二次元配列を効果的に活用するには、要素へのアクセス方法や操作方法を理解することが重要です。

ここでは、具体的な使用方法を見てみましょう。

○サンプルコード2：二次元配列の要素へのアクセス

二次元配列の特定の要素にアクセスするには、2つのインデックスを使用します。

最初のインデックスで行を、2番目のインデックスで列を指定します。

// 二次元配列の要素にアクセスする
var value = array2D[0][1]; // 2

このコードでは、array2D[0][1]と指定することで、1行目（インデックス0）の2列目（インデックス1）の要素、つまり値「2」にアクセスしています。

○サンプルコード3：二次元配列の要素を変更

二次元配列の要素を変更する際も、同様に2つのインデックスを使用して目的の要素を指定し、新しい値を代入します。

// 二次元配列の要素を変更する
array2D[0][1] = 10; // 2が10に変更される

このコードにより、1行目2列目の要素が10に更新されます。

○サンプルコード4：二次元配列の要素を追加・削除

二次元配列に新しい要素を追加したり、既存の要素を削除したりする場合は、内側の配列に対して操作を行います。

// 二次元配列の要素を追加する
array2D[1].push(11); // 2行目の末尾に11が追加される

// 二次元配列の要素を削除する
array2D[2].pop(); // 3行目の末尾の要素が削除される

push() メソッドを使用すると配列の末尾に新しい要素を追加でき、pop() メソッドを使用すると末尾の要素を削除できます。

この操作を行うことで、二次元配列の構造を動的に変更することが可能です。

●二次元配列の応用例

二次元配列は、様々な場面で活用することができます。

ここでは、数学的な計算やゲームプログラミングにおける応用例を紹介します。

○サンプルコード5：二次元配列を使った行列の加算

行列の加算は、二次元配列を使用することで簡単に実装できます。

次のコードでは、2つの2×2行列の加算を行っています。

// 二次元配列を使った行列の加算
var matrixA = [
  [1, 2],
  [3, 4]
];

var matrixB = [
  [5, 6],
  [7, 8]
];

var result = [
  [0, 0],
  [0, 0]
];

for (var i = 0; i < matrixA.length; i++) {
  for (var j = 0; j < matrixA[i].length; j++) {
    result[i][j] = matrixA[i][j] + matrixB[i][j];
  }
}

console.log(result); // [[6, 8], [10, 12]]

このコードでは、2つのループを使用して各要素同士を加算し、結果を新しい二次元配列に格納しています。

行列の加算以外にも、乗算や転置など、様々な行列演算を実装することが可能です。

○サンプルコード6：二次元配列を使ったゲームのマップ表現

ゲーム開発において、二次元配列はマップやフィールドの表現に頻繁に使用されます。

次の例では、簡単な迷路のような構造を二次元配列で表現しています。

// 二次元配列を使ったゲームのマップ表現
var gameMap = [
  [0, 0, 0, 0, 0],
  [0, 1, 1, 1, 0],
  [0, 1, 2, 1, 0],
  [0, 1, 1, 1, 0],
  [0, 0, 0, 0, 0]
];

// 0: 壁, 1: 通路, 2: プレイヤーの位置

この二次元配列では、0が壁、1が通路、2がプレイヤーの位置を表しています。

ゲームの進行に合わせて配列の要素を更新することで、マップ上のオブジェクトの移動や状態変化を管理することができます。

●二次元配列の注意点と対処法

二次元配列を扱う際には、いくつかの注意点があります。

特に、配列のコピーや参照に関する問題は初心者がつまずきやすいポイントです。

○サンプルコード7：二次元配列のコピーに関する注意点

JavaScriptでは、単純な代入操作では配列の参照がコピーされるため、意図せず元の配列が変更される可能性があります。

次のコードでは、正しいコピー方法と間違ったコピー方法を比較しています。

// 二次元配列の深いコピー
var original = [
  [1, 2],
  [3, 4]
];

// 間違ったコピー方法
var wrongCopy = original;
wrongCopy[0][0] = 99;
console.log(original); // [[99, 2], [3, 4]] 値が変更されてしまっている

// 正しいコピー方法
var correctCopy = original.map(function(arr) {
  return arr.slice();
});
correctCopy[0][0] = 88;
console.log(original); // [[1, 2], [3, 4]] 値が変更されていない

正しくコピーするには、map() メソッドと slice() メソッドを組み合わせて使用します。

これにより、元の配列とは独立した新しい二次元配列を作成することができます。

●二次元配列のカスタマイズ方法

二次元配列は、様々な方法でカスタマイズすることができます。

ここでは、配列のソートや行列の転置、フラット化などの高度な操作方法を紹介します。

○サンプルコード8：二次元配列をソートする

二次元配列の要素をソートする場合、カスタム比較関数を使用します。

次の例では、スコアによって降順にソートしています。

// 二次元配列のソート
var scores = [
  ["Alice", 90],
  ["Bob", 80],
  ["Carol", 95],
  ["David", 85]
];

// スコアで降順にソート
scores.sort(function(a, b) {
  return b[1] - a[1];
});

console.log(scores);
// [["Carol", 95], ["Alice", 90], ["David", 85], ["Bob", 80]]

この方法を応用することで、複数の基準に基づいたソートや、特定の列のみを考慮したソートなど、様々なソート処理を実装することができます。

○サンプルコード9：二次元配列の行と列を入れ替える

行列の転置操作は、二次元配列の行と列を入れ替えることで実現できます。

次のコードでは、3×3の行列を転置しています。

// 二次元配列の行と列を入れ替える
var matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

function transpose(matrix) {
  var result = [];
  for (var i = 0; i < matrix[0].length; i++) {
    result[i] = [];
    for (var j = 0; j < matrix.length; j++) {
      result[i][j] = matrix[j][i];
    }
  }
  return result;
}

var transposedMatrix = transpose(matrix);
console.log(transposedMatrix);
// [[1, 4, 7], [2, 5, 8], [3, 6, 9]]

この転置関数を使用することで、行列の行と列を効率的に入れ替えることができます。

データ解析や画像処理など、様々な分野で活用できる重要な操作です。

○サンプルコード10：二次元配列をフラット化する

二次元配列を一次元配列に変換する操作は、フラット化と呼ばれます。

次のコードでは、reduce() メソッドを使用してフラット化を実現しています。

// 二次元配列をフラット化する
var matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

var flattened = matrix.reduce(function(acc, cur) {
  return acc.concat(cur);
}, []);

console.log(flattened); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

フラット化は、二次元配列のデータを一次元的に処理したい場合や、配列の構造を簡略化したい場合に有用です。