JavaScriptで二次元配列をオブジェクトの配列に変換する方法

はじめに

JavaScriptでは、配列の中に配列が入ったデータ(二次元配列)を、キーを持つオブジェクトの配列へ変換したいケースがあります。

例えば、以下のような配列を考えてみましょう。この配列を、英アルファベット(a、b、c、d...)をキーとするオブジェクトの配列に変換します。

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

この変換は、外側の配列に対してmap()を実行し、各サブ配列をreduce()でオブジェクトへ畳み込むことで実現できます。以下の例をご覧ください。

コード例

const data = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
const dataArr = data.map(arr => {
   return arr.reduce((acc, cur, index) => ({
      ...acc,
      [String.fromCharCode(97 + index)]: cur
   }), Object.create({}))
});
console.log(dataArr);

処理の流れ

このコードでは、以下のような処理が行われています。

• map(): 外側の配列の各要素(サブ配列)に対して処理を行い、新しい配列を生成します。
• reduce(): 各サブ配列の要素を先頭から順に処理し、オブジェクトへと蓄積していきます。
• String.fromCharCode(97 + index): 文字コード97は「a」に対応するため、インデックスに応じて「a」「b」「c」「d」というキーが自動的に生成されます。
• スプレッド構文(...acc): すでに蓄積したプロパティを保持しながら、新しいキーと値を追加します。

出力結果

このコードを実行すると、コンソールには以下のように表示されます。

[
   { a: 1, b: 2, c: 3, d: 4 },
   { a: 5, b: 6, c: 7, d: 8 },
   { a: 9, b: 10, c: 11, d: 12 }
]

まとめ

map()とreduce()を組み合わせることで、二次元配列を柔軟にオブジェクトの配列へ変換できます。また、String.fromCharCode()を活用すればキー名を動的に生成できるため、CSVデータの整形やAPIレスポンスの変換など、さまざまな場面で役立つ実用的なテクニックです。