【JavaScript】オブジェクトの配列をプロパティ値でソートする方法

オブジェクト配列のソートとは

JavaScriptでは、オブジェクトが格納された配列を、特定のプロパティの値を基準に並べ替えたい場面がよくあります。例えば、商品リストを価格順に表示したり、ユーザー一覧を名前順に整理したりするケースです。

ここでは、次のような住宅情報を持つオブジェクトの配列を例に、price（価格）プロパティを基準に昇順・降順でソートする方法を解説します。

const homes = [
  {
    "h_id": "3",
    "city": "Dallas",
    "state": "TX",
    "zip": "75201",
    "price": "162500"
  }, {
    "h_id": "4",
    "city": "Bevery Hills",
    "state": "CA",
    "zip": "90210",
    "price": "319250"
  }, {
    "h_id": "5",
    "city": "New York",
    "state": "NY",
    "zip": "00010",
    "price": "962500"
  }
];

このデータには注意点があります。price の値が文字列として格納されていることです。そのまま比較すると文字列として扱われてしまうため、数値として正しくソートするには parseFloat() を使って数値に変換してから比較する必要があります。

sort() メソッドを使った実装例

配列の sort() メソッドにコールバック関数を渡すことで、任意の基準で並べ替えが可能です。以下は price プロパティで昇順にソートするコード例です。

const homes = [
{
  "h_id": "3",
  "city": "Dallas",
  "state": "TX",
  "zip": "75201",
  "price": "162500"
}, {
  "h_id": "4",
  "city": "Bevery Hills",
  "state": "CA",
  "zip": "90210",
  "price": "319250"
}, {
  "h_id": "5",
  "city": "New York",
  "state": "NY",
  "zip": "00010",
  "price": "962500"
}
];

// 昇順ソート関数
const sortByPriceAsc = arr => {
  arr.sort((a, b) => {
    return parseFloat(a.price) - parseFloat(b.price);
  });
};

sortByPriceAsc(homes);
console.log(homes);

実行結果

コンソールには、価格の安い順に並び替えられた配列が出力されます。

[
 {
   h_id: '3',
   city: 'Dallas',
   state: 'TX',
   zip: '75201',
   price: '162500'
 },
 {
   h_id: '4',
   city: 'Bevery Hills',
   state: 'CA',
   zip: '90210',
   price: '319250'
 },
 {
   h_id: '5',
   city: 'New York',
   state: 'NY',
   zip: '00010',
   price: '962500'
 }
]

降順でソートしたい場合

降順（高い順）に並べ替えたい場合は、比較結果の符号を逆にするだけです。減算の順序を入れ替えましょう。

// 降順ソート関数
const sortByPriceDesc = arr => {
  arr.sort((a, b) => {
    return parseFloat(b.price) - parseFloat(a.price);
  });
};

ポイント解説

• 比較関数の仕組み： コールバック関数が負の値を返すと a が先、正の値を返すと b が先に来ます。0 を返した場合は順序が維持されます。
• 文字列の数値化： 今回の price は文字列のため parseFloat() による変換が必須です。最初から数値型で保持しておけば変換は不要になります。
• 元の配列への影響： sort() は元の配列を直接変更します。元の配列を残したい場合は、[...arr].sort() のようにスプレッド構文でコピーを作成してからソートしましょう。

このように、sort() と比較関数を組み合わせることで、オブジェクトの配列を任意のプロパティ基準で柔軟に並べ替えることができます。