JavaScriptで日付を含む配列を昇順にソートする方法

JavaScriptでは、日付文字列と数値がペアになったデータを扱う場面は少なくありません。例えば、以下のような配列があったとします。

const arr = [
    [ '02/13/2015', 0.096 ],
    [ '11/15/2013', 0.189 ],
    [ '05/15/2014', 0.11 ],
    [ '12/13/2013', 0.1285 ],
    [ '01/15/2013', 0.12 ],
    [ '01/15/2014', 0.11 ],
    [ '02/14/2014', 0.11 ],
    [ '03/14/2014', 0.11 ],
    [ '01/15/2015', 0.096 ],
    [ '07/15/2015', 0.096 ],
    [ '04/15/2013', 0.12 ],
    [ '04/15/2014', 0.11 ],
    [ '05/15/2013', 0.12 ],
    [ '06/14/2013', 0.12 ],
    [ '06/16/2014', 0.11 ],
    [ '07/15/2013', 0.12 ],
    [ '07/15/2014', 0.11 ],
    [ '03/16/2015', 0.096 ]
];

このような配列を受け取り、各行の先頭にある日付に基づいて昇順（古い日付から新しい日付の順）に並べ替えるJavaScript関数を作成してみましょう。

実装コード

ポイントは、Array.prototype.sort() メソッドに比較関数を渡すことです。以下がそのコードです。

const arr = [
    [ '02/13/2015', 0.096 ],
    [ '11/15/2013', 0.189 ],
    [ '05/15/2014', 0.11 ],
    [ '12/13/2013', 0.1285 ],
    [ '01/15/2013', 0.12 ],
    [ '01/15/2014', 0.11 ],
    [ '02/14/2014', 0.11 ],
    [ '03/14/2014', 0.11 ],
    [ '01/15/2015', 0.096 ],
    [ '07/15/2015', 0.096 ],
    [ '04/15/2013', 0.12 ],
    [ '04/15/2014', 0.11 ],
    [ '05/15/2013', 0.12 ],
    [ '06/14/2013', 0.12 ],
    [ '06/16/2014', 0.11 ],
    [ '07/15/2013', 0.12 ],
    [ '07/15/2014', 0.11 ],
    [ '03/16/2015', 0.096 ]
];
const sortByDate = arr => {
    const sorter = (a, b) => {
        return new Date(a[0]) - new Date(b[0]);
    };
    arr.sort(sorter);
};
sortByDate(arr);
console.log(arr);

コードのポイント

1. 比較関数で日付をDateオブジェクトに変換する
sort() に渡す比較関数 sorter の中では、引数 a と b の先頭要素（日付文字列）をそれぞれ new Date() で Date オブジェクトに変換しています。

2. 減算結果で大小を判定する
Dateオブジェクト同士を引き算すると、1970年1月1日00:00:00 UTCからの経過ミリ秒数の差が数値として返されます。この値が負であれば a が前、正であれば b が前、0 であれば同じ順位として扱われるため、日付の昇順に正しく並べ替えられます。

3. sort()は元の配列を書き換える点に注意
sort() は破壊的メソッドのため、呼び出し元の配列自体が変更されます。元の配列を保持したい場合は、スプレッド構文を使った [...arr].sort(sorter) や、ES2023で追加された toSorted() を利用すると安全です。

なお、ここでは「MM/DD/YYYY」という米国式の日付フォーマットを使用しています。この形式は多くのブラウザで問題なく解析できますが、環境による挙動の違いを避けたい場合は、「YYYY-MM-DD」（ISO 8601形式）に統一しておくことをおすすめします。

出力結果

コンソールには次のように表示されます。日付が古いものから新しいものへと昇順に整列しているのが確認できます。

[
    [ '01/15/2013', 0.12 ],
    [ '04/15/2013', 0.12 ],
    [ '05/15/2013', 0.12 ],
    [ '06/14/2013', 0.12 ],
    [ '07/15/2013', 0.12 ],
    [ '11/15/2013', 0.189 ],
    [ '12/13/2013', 0.1285 ],
    [ '01/15/2014', 0.11 ],
    [ '02/14/2014', 0.11 ],
    [ '03/14/2014', 0.11 ],
    [ '04/15/2014', 0.11 ],
    [ '05/15/2014', 0.11 ],
    [ '06/16/2014', 0.11 ],
    [ '07/15/2014', 0.11 ],
    [ '01/15/2015', 0.096 ],
    [ '02/13/2015', 0.096 ],
    [ '03/16/2015', 0.096 ],
    [ '07/15/2015', 0.096 ]
]