JavaScriptの配列を特定のキー（tableName）ごとにグループ化する方法

JavaScriptでデータを扱っていると、フラットな配列を特定のキーごとにまとめ直したい場面がよくあります。本記事では、tableName プロパティの値を基準に、オブジェクトの配列をグループ化する方法を解説します。

前提となる入力データ

まず、次のような配列があったとします。

const data = [
  {
    "dataId": "1",
    "tableName": "table1",
    "column": "firstHeader",
    "rows": ["a", "b", "c"]
  },
  {
    "dataId": "2",
    "tableName": "table1",
    "column": "secondHeader",
    "rows": ["d", "e", "f"]
  },
  {
    "dataId": "3",
    "tableName": "table2",
    "column": "aNewFirstHeader",
    "rows": [1, 2, 3]
  }
];

ここで求められているのは、元の配列をもとにして、tableName ごとにデータを集約した新しい配列を作成するJavaScriptの関数です。同じテーブル名を持つ要素は1つのオブジェクトに統合し、column と rows はそれぞれ配列として格納します。

最終的に期待される出力は次のとおりです。

const output = [
  {
    "tableName": "table1",
    "column": ["firstHeader", "secondHeader"],
    "rows": [["a", "b", "c"], ["d", "e", "f"]]
  },
  {
    "tableName": "table2",
    "column": ["aNewFirstHeader"],
    "rows": [[1, 2, 3]]
  }
];

実装例：reduce と Map を組み合わせる

それでは、実際のコードを見てみましょう。Array.prototype.reduce() と Map を組み合わせることで、シンプルかつ効率的にグループ化できます。

const arr = [
  {
    "dataId": "1",
    "tableName": "table1",
    "column": "firstHeader",
    "rows": ["val", "b", "c"]
  },
  {
    "dataId": "2",
    "tableName": "table1",
    "column": "secondHeader",
    "rows": ["d", "e", "f"]
  },
  {
    "dataId": "3",
    "tableName": "table2",
    "column": "aNewFirstHeader",
    "rows": [1, 2, 3]
  }
];

const groupArray = (arr = []) => {
  const res = arr.reduce((obj => (acc, val) => {
    let item = obj.get(val.tableName);
    if (!item) {
      item = {
        tableName: val.tableName,
        column: [],
        rows: []
      };
      obj.set(val.tableName, item);
      acc.push(item);
    }
    item.column.push(val.column);
    item.rows.push(val.rows);
    return acc;
  })(new Map()), []);
  return res;
};

console.log(JSON.stringify(groupArray(arr), undefined, 4));

コードのポイント

• Mapによる重複管理： Map を使って tableName をキーとした対応表を作成することで、すでに処理済みのテーブル名かどうかを高速に判定できます。
• 初回登場時のみオブジェクトを生成： 該当する tableName がまだ存在しない場合のみ、column と rows を持つ空の配列を備えた新規オブジェクトを作成し、Mapと結果配列の両方に登録します。
• クロージャーの活用： (obj => (acc, val) => {...})(new Map()) の形でMapをクロージャー内に閉じ込めることで、reduceの外部に余計な変数を露出させずに済みます。
• 値の蓄積： 各要素を処理するたびに、対応するオブジェクトの column と rows へ値を追加していくため、元の配列の順序も保持されます。

出力結果

上記のコードを実行すると、コンソールには次のように出力されます。

[
  {
    "tableName": "table1",
    "column": [
      "firstHeader",
      "secondHeader"
    ],
    "rows": [
      ["val", "b", "c"],
      ["d", "e", "f"]
    ]
  },
  {
    "tableName": "table2",
    "column": [
      "aNewFirstHeader"
    ],
    "rows": [
      [1, 2, 3]
    ]
  }
]

このように、reduce と Map を組み合わせれば、元の配列の構造や順序を保ちながら、任意のキーでデータをきれいにグループ化できます。APIレスポンスの整形やテーブル表示用データの変換など、さまざまな場面で応用できるテクニックなので、ぜひ活用してみてください。