JavaScriptで条件に基づいてオブジェクト配列を並べ替える方法

問題の概要

カードゲームに参加するプレイヤーのスコアを格納した、次のようなオブジェクトの配列があるとします。

const scorecard = [{
    name: "Zahir",
    score: 23
}, {
        name: "Kabir",
        score: 13
}, {
        name: "Kunal",
        score: 29
}, {
        name: "Arnav",
        score: 42
}, {
        name: "Harman",
        score: 19
}, {
        name: "Rohit",
        score: 41
}, {
        name: "Rajan",
        score: 34
}];

さらに、特定のプレイヤーの名前を格納した変数 selfName も用意されています。

const selfName = 'Arnav';

ここで求められているのは、次のような並べ替えを行う関数を作成することです。

• scorecard 配列を名前のアルファベット順に並べ替える
• selfName と同じ名前を持つオブジェクトは必ず先頭（インデックス0）に配置する

それでは、この問題を解決するコードを見ていきましょう。

実装例

ポイントは、Array.prototype.sort() メソッドに渡す比較関数の中で、特定の名前との一致を優先的に判定することです。一致する場合は -1 または 1 を返して先頭へ移動させ、一致しない場合は通常どおり名前を比較します。

const scorecard = [{
    name: "Zahir",
    score: 23
}, {
        name: "Kabir",
        score: 13
}, {
        name: "Kunal",
        score: 29
}, {
        name: "Arnav",
        score: 42
}, {
        name: "Harman",
        score: 19
}, {
        name: "Rohit",
        score: 41
}, {
        name: "Rajan",
        score: 34
}];
const selfName = 'Arnav';
const sorter = (a, b) => {
    if(a.name === selfName){
        return -1;
    };
    if(b.name === selfName){
        return 1;
    };
    return a.name < b.name ? -1 : 1;
};
scorecard.sort(sorter);
console.log(scorecard);

コードの解説

比較関数 sorter の動作は以下のとおりです。

1. a.name === selfName の場合： a を b より前に配置するため -1 を返し、該当要素が先頭方向へ移動します。
2. b.name === selfName の場合： b を a より前に配置するため 1 を返し、該当要素が必ず手前に来ます。
3. どちらでもない場合： 名前を辞書順で比較し、a の方が小さければ -1、そうでなければ 1 を返して通常のアルファベット順ソートを行います。

出力結果

コンソールには次のように表示されます。「Arnav」が先頭に移動し、残りの要素がアルファベット順に並んでいることが確認できます。

[
    { name: 'Arnav', score: 42 },
    { name: 'Harman', score: 19 },
    { name: 'Kabir', score: 13 },
    { name: 'Kunal', score: 29 },
    { name: 'Rajan', score: 34 },
    { name: 'Rohit', score: 41 },
    { name: 'Zahir', score: 23 }
]

まとめ

このように、sort() メソッドの比較関数内で条件分岐を追加するだけで、「特定の要素を最優先にしつつ、残りを指定した基準で並べ替える」という処理を簡単に実装できます。リーダーボードや検索結果など、自分自身のデータを目立たせたいUIでよく使われるテクニックなので、ぜひ覚えておきましょう。