JavaScriptで日付に基づいてネストされた配列を昇順・降順にソートする方法

Web開発では、APIレスポンスなどで受け取ったオブジェクト内のネストされた配列を、日時情報を基準に並べ替えたい場面がよくあります。ここでは、次のようなJSONオブジェクトを例に考えてみましょう。

const arr = {
    "DATA": [
        {
            "BookingID": "9513",
            "DutyStart": "2016-02-11 12:00:00"
        },
        {
            "BookingID": "91157307",
            "DutyStart": "2016-02-11 13:00:00"
        },
        {
            "BookingID": "95117317",
            "DutyStart": "2016-02-11 13:30:00"
        },
        {
            "BookingID": "957266",
            "DutyStart": "2016-02-12 19:15:00"
        },
        {
            "BookingID": "74",
            "DutyStart": "2016-02-11 12:21:00"
        }
    ]
};

この記事では、上記のようなオブジェクトを受け取り、DutyStartプロパティ（勤務開始日時）に従ってネストされた配列を昇順または降順にソートするJavaScript関数の実装方法を解説します。

昇順ソートの実装コード

まずは、古い日時から新しい日時へと並べる昇順ソートのコードです。

const arr = {
    "DATA": [
        { "BookingID": "9513", "DutyStart": "2016-02-11 12:00:00" },
        { "BookingID": "91157307", "DutyStart": "2016-02-11 13:00:00" },
        { "BookingID": "95117317", "DutyStart": "2016-02-11 13:30:00" },
        { "BookingID": "957266", "DutyStart": "2016-02-12 19:15:00" },
        { "BookingID": "74", "DutyStart": "2016-02-11 12:21:00" }
    ]
};

// 日時を基準に昇順へソートする関数
const sortByDate = obj => {
    const sorter = (a, b) => {
        return new Date(a.DutyStart).getTime() - new Date(b.DutyStart).getTime();
    };
    obj["DATA"].sort(sorter);
    return obj;
};

console.log(sortByDate(arr));

コードの解説

この実装のポイントは以下の3点です。

• new Date()で日時文字列をDateオブジェクトに変換し、getTime()でミリ秒単位の数値にしています。これにより文字列比較ではなく、正確な時刻比較が可能になります。
• Array.prototype.sort()のコールバック関数が負の値を返すとaが前、正の値を返すとbが前に移動します。そのため「a − b」を返せば昇順になります。
• sort()は元の配列を直接書き換える破壊的メソッドなので、元データを保持したい場合は事前にslice()やスプレッド構文でコピーしておくのが安全です。

降順でソートする場合

降順（新しい日時から古い日時へ）にしたい場合は、減算の順序を逆にするだけです。

const sortByDateDesc = obj => {
    obj["DATA"].sort((a, b) => {
        return new Date(b.DutyStart).getTime() - new Date(a.DutyStart).getTime();
    });
    return obj;
};

出力結果

昇順ソートの場合、コンソールには次のように出力されます。DutyStartの時刻順に並び替えられていることが確認できます。

{
    DATA: [
        { BookingID: '9513', DutyStart: '2016-02-11 12:00:00' },
        { BookingID: '74', DutyStart: '2016-02-11 12:21:00' },
        { BookingID: '91157307', DutyStart: '2016-02-11 13:00:00' },
        { BookingID: '95117317', DutyStart: '2016-02-11 13:30:00' },
        { BookingID: '957266', DutyStart: '2016-02-12 19:15:00' }
    ]
}