【2024年最新版】JavaScriptで二次元配列を扱うためのベストプラクティス

JavaScriptで二次元配列を作成する方法

配列リテラルを使用する

これは最もシンプルで分かりやすい方法です。以下のように、内側の配列をカンマで区切って、外側の配列を作成します。

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

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

Array.prototype.map()を使用して、二次元配列を作成することもできます。以下のように、内側の配列を生成する関数を受け取り、その関数を各要素に適用します。

const array2d = Array(3).fill(null).map(() => Array(3).fill(0));

const array2d = Array(3).reduce((acc, _, i) => {
  acc.push(Array(3).fill(i));
  return acc;
}, []);

ライブラリを使用する

Lodashなどのライブラリを使用すると、二次元配列を簡単に作成することができます。

const array2d = _.range(3).map(() => _.range(3));

• シンプルで分かりやすい方法を求めている場合は、配列リテラルを使用するのがおすすめです。
• 内側の配列を動的に生成したい場合は、Array.prototype.map()またはArray.prototype.reduce()を使用するのがおすすめです。
• ライブラリを既に使用している場合は、ライブラリの機能を利用するのがおすすめです。

JavaScriptで二次元配列を作成するには、いくつかの方法があります。それぞれの方法の特徴を理解して、状況に応じて使い分けましょう。

// 配列リテラル
const array2dLiteral = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

// Array.prototype.map()
const array2dMap = Array(3).fill(null).map(() => Array(3).fill(0));

// Array.prototype.reduce()
const array2dReduce = Array(3).reduce((acc, _, i) => {
  acc.push(Array(3).fill(i));
  return acc;
}, []);

// Lodash
const _ = require('lodash');
const array2dLodash = _.range(3).map(() => _.range(3));

console.log(array2dLiteral); // [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
console.log(array2dMap); // [[0, 0, 0], [0, 0, 0], [0, 0, 0]]
console.log(array2dReduce); // [[0, 0, 0], [1, 1, 1], [2, 2, 2]]
console.log(array2dLodash); // [[0, 1, 2], [0, 1, 2], [0, 1, 2]]

このコードを実行すると、以下の出力が得られます。

[[1, 2, 3], [4, 5, 6], [7, 8, 9]]
[[0, 0, 0], [0, 0, 0], [0, 0, 0]]
[[0, 0, 0], [1, 1, 1], [2, 2, 2]]
[[0, 1, 2], [0, 1, 2], [0, 1, 2]]

JavaScriptで二次元配列を作成するその他の方法

forループを使用する

const array2d = [];
for (let i = 0; i < 3; i++) {
  array2d.push([]);
  for (let j = 0; j < 3; j++) {
    array2d[i].push(i * 3 + j);
  }
}

ジェネレータを使用する

function* createArray2d(rows, columns) {
  for (let i = 0; i < rows; i++) {
    yield Array(columns).fill(i);
  }
}

const array2d = [...createArray2d(3, 3)];

スプレッド構文を使用する

const array2d = [
  ...Array(3).fill([1, 2, 3]),
  ...Array(3).fill([4, 5, 6]),
  ...Array(3).fill([7, 8, 9]),
];

• 処理速度を重視したい場合は、forループを使用するのがおすすめです。
• ジェネレータやスプレッド構文に慣れている場合は、それらを使用するのも良いでしょう。