【JavaScript】オブジェクトの配列をプロパティの値ごとにグループ化して並べ替える方法

JavaScriptでは、オブジェクトの配列を特定のプロパティの値に基づいてグループ化したい場面がよくあります。本記事では、Array.prototype.sort()メソッドを使って、同じ値を持つオブジェクト同士が隣り合うように並べ替える方法を解説します。

課題：車データの配列をタイプ別にまとめる

まず、複数の車に関する情報を持つオブジェクトの配列を用意します。

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プロパティが同じ値であるオブジェクト同士が必ず隣り合う」ようにグルーピングを行うプログラムを作成します。

解決アプローチ：sort()メソッドで並べ替える

最もシンプルな方法は、typeプロパティを基準に配列をソートすることです。そうすることで、同じタイプ（Coupe、Hatchback、Sedan、SUVなど）を持つオブジェクトが自動的に隣接し、結果的にグループ化された状態になります。

比較関数では、大文字・小文字の違いによるソート結果のズレを防ぐため、toLowerCase()を使って文字列を小文字に統一してから比較しています。これにより、アルファベット順に安定した並び替えが可能になります。

コード例

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プロパティを基準に比較する関数（大文字小文字を無視）
const sorter = (a, b) => {
    return a.type.toLowerCase() > b.type.toLowerCase() ? 1 : -1;
}

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

実行結果

コンソールに出力される結果は以下の通りです。typeが同じオブジェクトが隣り合って並んでいることが確認できます。

[
    { 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' }
]

ポイントまとめ

• sort()は元の配列を直接変更する（破壊的メソッド）ため、元の配列を保持したい場合は事前にスプレッド構文などでコピーしておくと安全です。
• toLowerCase()を挟むことで、大文字小文字が混在するデータでも安定したソートが実現できます。
• より高度なグループ化（キーごとの連想配列への集約など）が必要な場合は、reduce()やObject.groupBy()の活用も検討しましょう。