【JavaScript】オブジェクトの配列を、日本語を含む複数キーでソートしたい

はじめに

ソート対象

• オブジェクトの配列
  • 第一ソートキー：日本語の値を持つnameの昇順
  • 第二ソートキー：数字の値を持つvalueの昇順

const array = [
    {name: "うえき", value: 2}, 
    {name: "いのうえ", value: 1}, 
    {name: "うえき", value: 1}, 
    {name: "あいかわ", value: 2}, 
    {name: "いのうえ", value: 2}, 
    {name: "あいかわ", value: 1}
];

目標とするソート結果

[
    {name: "あいざわ", value: 1},
    {name: "あいざわ", value: 2},
    {name: "いのうえ", value: 1},
    {name: "いのうえ", value: 2},
    {name: "うえき", value: 1},
    {name: "うえき", value: 2}
]

• 漢字をソートするのは困難であるため、ふりがなでソートしています
  • 詳細は以下をご参照ください
    • JavaScriptのsort関数で日本語を50音順に並べたい
    • MDN：String.prototype.localeCompare()

作成したコード

array.sort((a, b) => {
  const firstKeySortResult = a.name.localeCompare(b.name, 'ja');
  if (firstKeySortResult !== 0) {
    return firstKeySortResult
  } else {
    return a.value - b.value; // a < b のとき、-1になり昇順になる
  }
});

簡単な解説

• まずlocaleCompareを使用して、nameプロパティでソートします
  • nameが同じでない（つまりa.name.localeCompare(b.name, 'ja') !== 0）ならこのソート結果を返します
  • nameが同じなら、valueプロパティでソートした結果を返します

別解

• 三項演算子を使って以下のようにも書けます
  • @eufss0183様からコメントにてご教示いただきました

array.sort((a, b) => a.name.localeCompare(b.name, 'ja') || a.value - b.value);

簡単な解説

• a.name.localeCompare(b.name, 'ja') について、
  • 0以上か0未満ならa.name.localeCompare(b.name, 'ja')の結果が返る
  • 0ならfalseとなりa.value - b.valueの結果が返る

• 「a.value - b.valueでなんで昇順になるの？？」と思った方は以下のページを参考にしてください
  • 配列の要素を並び替える

おわりに

• ひらがな、カタカナの属性を持たせれば、日本語でもソートできることを知りました
• ソートの基礎知識も再確認でき、良い機会でした