JavaScriptでisImportantと日付の2条件を使った配列ソートの実装方法

はじめに

JavaScriptでは、sort()メソッドのコールバック関数を工夫することで、複数の基準に基づいた配列の並べ替えが簡単に実現できます。本記事では、「isImportant（重要フラグ）」と「date（日付）」という2つのプロパティを組み合わせて配列をソートする方法を、具体的なコード例とともに解説します。

ソートの要件

今回目指す並び順は以下のとおりです。

• isImportant が true のオブジェクトは、false のオブジェクトよりも常に上位に配置される
• true のグループと false のグループそれぞれの中では、date プロパティ（タイムスタンプ）に従って降順に並べ替えられる

サンプルデータ

まず、並べ替え対象となる配列を用意します。

const array = [{
    id: 545,
    date: 591020824000,
    isImportant: false,
},
{
    id: 322,
    date: 591080224000,
    isImportant: false,
},
{
    id: 543,
    date: 591080424000,
    isImportant: true,
},
{
    id: 423,
    date: 591080225525,
    isImportant: false,
},
{
    id: 135,
    date: 591020225525,
    isImportant: true,
},
];

sort()メソッドによる2条件ソートの実装

次のように sort() メソッドのコールバック関数を定義することで、目的の並び順を得られます。

array.sort((a, b) => {
    if(a.isImportant && !b.isImportant){
        return -1;
    }else if(!a.isImportant && b.isImportant){
        return 1;
    }else{
        return b.date-a.date;
    }
});

コールバック関数の戻り値の意味

sort() のコールバック関数は、比較対象となる配列内の2つの要素（ここでは a と b）を受け取ります。このコールバックは、配列内の各要素のペアに対して呼び出され、その戻り値によって順序が決まります。

• -1（負の値）を返す場合： 最初の要素（a）を2番目の要素（b）より上位として扱う
• 1（正の値）を返す場合： 2番目の要素（b）を最初の要素（a）より上位として扱う
• 0 を返す場合： 順序を変更しない

上記のコードでは、まず a または b のどちらか一方だけが isImportant: true かどうかを判定し、true の方を優先的に上位に配置します。両者の isImportant が一致している場合は、b.date - a.date を返すことで、日付の新しいものから順に並べ替えています。

完全なコード例

ここまでの内容をまとめた完全なコードは以下のとおりです。

const array = [{
    id: 545,
    date: 591020824000,
    isImportant: false,
},
{
    id: 322,
    date: 591080224000,
    isImportant: false,
},
{
    id: 543,
    date: 591080424000,
    isImportant: true,
},
{
    id: 423,
    date: 591080225525,
    isImportant: false,
},
{
    id: 135,
    date: 591020225525,
    isImportant: true,
},
];

array.sort((a, b) => {
    if(a.isImportant && !b.isImportant){
        return -1;
    }else if(!a.isImportant && b.isImportant){
        return 1;
    }else{
        return b.date-a.date;
    }
});

console.log(array);

出力結果

このコードをコンソールで実行すると、以下のような結果が出力されます。

[
    { id: 543, date: 591080424000, isImportant: true },
    { id: 135, date: 591020225525, isImportant: true },
    { id: 423, date: 591080225525, isImportant: false },
    { id: 322, date: 591080224000, isImportant: false },
    { id: 545, date: 591020824000, isImportant: false }
]

ご覧のとおり、isImportant: true の要素が先頭に集まり、その中で日付の新しい順、続いて false のグループも日付の新しい順に並んでいます。

まとめ

sort() メソッドのコールバック関数内で条件分岐を行えば、重要度や日付など、複数の基準を組み合わせた柔軟なソート処理を簡潔に実装できます。タスク管理アプリの一覧表示など、優先度と更新日の両方を考慮した並べ替えが必要な場面でぜひ活用してみてください。