JavaScriptでオブジェクトのdateプロパティに基づいて配列を並べ替える方法

はじめに

JavaScriptでは、日付情報を持つオブジェクトの配列を、日付順に並べ替えたい場面がよくあります。たとえば、次のような date プロパティを持つオブジェクトの配列を考えてみましょう。

const arr = [
    {date: "2016-06-08 18:10:00"},
    {date: "2016-04-26 20:01:00"},
    {date: "2017-02-06 14:38:00"},
    {date: "2017-01-18 17:30:21"},
    {date: "2017-01-18 17:24:00"}
];

この配列を受け取り、各オブジェクトの date プロパティ（日付・時刻）に基づいて昇順にソートする関数を作成します。

ソートの実装方法

ポイントは、Array.prototype.sort() の比較関数の中で、日付文字列を Date オブジェクトに変換してから比較することです。Date オブジェクト同士は < や > で直接大小比較できるため、これを利用するとシンプルに書けます。

コード例

const arr = [
    {date: "2016-06-08 18:10:00"},
    {date: "2016-04-26 20:01:00"},
    {date: "2017-02-06 14:38:00"},
    {date: "2017-01-18 17:30:21"},
    {date: "2017-01-18 17:24:00"}
];

const sortByTime = (arr = []) => {
    arr.sort((a, b) => {
        const dateA = new Date(a.date);
        const dateB = new Date(b.date);
        return dateA < dateB ? -1 :
        (dateA > dateB ? 1 : 0);
    });
};

sortByTime(arr);
console.log(arr);

出力結果

コンソールには、古い日付から新しい日付の順に並べ替えられた配列が出力されます。

[
    { date: '2016-04-26 20:01:00' },
    { date: '2016-06-08 18:10:00' },
    { date: '2017-01-18 17:24:00' },
    { date: '2017-01-18 17:30:21' },
    { date: '2017-02-06 14:38:00' }
]

コードの解説

• 比較関数の戻り値： 比較関数が負の値（-1）を返すと a が先に、正の値（1）を返すと b が先に、0 を返すと順序は維持されます。
• 元の配列への影響： sort() は元の配列を破壊的に変更します。元の配列を残したい場合は、あらかじめ [...arr] のようにスプレッド構文でコピーしてからソートしましょう。
• 降順にしたい場合： 比較結果の符号を逆にするか、ソート後に .reverse() を呼び出すだけで切り替えられます。

注意点：日付文字列の書式について

"YYYY-MM-DD HH:mm:ss" のようにスペース区切りの日付文字列は、ブラウザや環境によって解析結果が異なる場合があります。確実に動作させたい場合は、ISO 8601 形式（"YYYY-MM-DDTHH:mm:ss"）に置き換えてから Date に渡すのが安全です。

const dateA = new Date(a.date.replace(' ', 'T'));
const dateB = new Date(b.date.replace(' ', 'T'));

このひと手間を加えることで、クロスブラウザ環境でも安定したソート処理を実現できます。