JavaScriptで子オブジェクトのプロパティに基づいて配列をグループ化する方法

はじめに

JavaScriptでは、オブジェクトを格納した配列を、そのプロパティ（特にネストされた子プロパティ）の値に基づいて並べ替えたりグループ化したりする場面がよくあります。本記事では、「type（車体タイプ）」プロパティの値が同じオブジェクト同士を隣り合わせに配置する方法を、コード例とともにわかりやすく解説します。

サンプルデータ

以下は、複数の車種情報を格納したオブジェクトの配列です。各オブジェクトには「company（メーカー）」と「type（タイプ）」という2つのプロパティがあります。

const cars = [
  { company: 'Honda', type: 'SUV' },
  { company: 'Hyundai', type: 'Sedan' },
  { company: 'Suzuki', type: 'Sedan' },
  { company: 'Audi', type: 'Coupe' },
  { company: 'Tata', type: 'SUV' },
  { company: 'Morris Garage', type: 'Hatchback' },
  { company: 'Honda', type: 'SUV' },
  { company: 'Tata', type: 'Sedan' },
  { company: 'Honda', type: 'Hatchback' }
];

この配列に対して、同じ「type」を持つオブジェクトが互いに隣接するように処理を行います。実現方法はいくつかありますが、最もシンプルなのは Array.prototype.sort() メソッドを使う方法です。

sort()メソッドを使った並べ替え

sort() メソッドには比較関数を渡すことができます。この比較関数の中で「type」プロパティを比較することで、タイプごとにアルファベット順へ整列させることができます。

const sorter = (a, b) => {
  return a.type.toLowerCase() > b.type.toLowerCase() ? 1 : -1;
};

cars.sort(sorter);
console.log(cars);

ポイントは toLowerCase() を使って大文字・小文字の違いを無視している点です。これにより、表記ゆれがあるデータでも正しく比較できます。より堅牢な比較が必要な場合は、localeCompare() を利用するのもおすすめです。

実行結果

コンソールには以下のように出力されます。

[
  { company: 'Audi', type: 'Coupe' },
  { company: 'Honda', type: 'Hatchback' },
  { company: 'Morris Garage', type: 'Hatchback' },
  { company: 'Tata', type: 'Sedan' },
  { company: 'Suzuki', type: 'Sedan' },
  { company: 'Hyundai', type: 'Sedan' },
  { company: 'Honda', type: 'SUV' },
  { company: 'Tata', type: 'SUV' },
  { company: 'Honda', type: 'SUV' }
]

Coupe → Hatchback → Sedan → SUV の順に、同じタイプのオブジェクトがきちんとまとまっていることが確認できます。

reduce()を使った本格的なグループ化

単に隣接させるだけでなく、タイプごとにオブジェクトを分類した連想配列（マップ）を作成したい場合は、reduce() を使うと便利です。元の配列の順序を壊さずに済む点もメリットです。

const grouped = cars.reduce((acc, car) => {
  const key = car.type;
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(car);
  return acc;
}, {});

console.log(grouped);
// {
//   Coupe: [{ company: 'Audi', type: 'Coupe' }],
//   Hatchback: [
//     { company: 'Morris Garage', type: 'Hatchback' },
//     { company: 'Honda', type: 'Hatchback' }
//   ],
//   Sedan: [
//     { company: 'Hyundai', type: 'Sedan' },
//     { company: 'Suzuki', type: 'Sedan' },
//     { company: 'Tata', type: 'Sedan' }
//   ],
//   SUV: [
//     { company: 'Honda', type: 'SUV' },
//     { company: 'Tata', type: 'SUV' },
//     { company: 'Honda', type: 'SUV' }
//   ]
// }

このように構造化しておけば、後続の処理で特定のタイプだけを取り出したり、件数を集計したりするのが格段に容易になります。

まとめ

オブジェクト配列を子プロパティの値でグループ化するには、手軽さ重視なら sort() による並べ替え、構造化や再利用性を重視するなら reduce() によるグルーピングが適しています。用途に応じて両者を使い分けることで、データ操作のコードをより読みやすく保守しやすいものにできるでしょう。