JavaScriptで曜日順にオブジェクトの配列を並べ替える方法

ここでは、1週間7日分の湿度データを持つオブジェクトの配列を例に考えてみましょう。現状、このデータは配列内にランダムな順序で格納されています。そこで、月曜日のデータが最初、続いて火曜日・水曜日と続き、最後に日曜日が来るように、曜日の順番どおりに配列を並べ替える必要があります。

今回使用するサンプルの配列は以下のとおりです。

const weather = [{
    day: 'Wednesday',
    humidity: 60
}, {
    day: 'Saturday',
    humidity: 50
}, {
    day: 'Thursday',
    humidity: 65
}, {
    day: 'Monday',
    humidity: 40
}, {
    day: 'Sunday',
    humidity: 35
}, {
    day: 'Friday',
    humidity: 80
}, {
    day: 'Tuesday',
    humidity: 45
}];

解決のポイント：曜日をインデックスに対応付けるマップを作る

この問題の鍵となるのは、各曜日が週の中で何番目に位置するかを正しく対応付けた「マップオブジェクト」を作成することです。具体的には次のような形になります。

const map = {
    'Monday': 1,
    'Tuesday': 2,
    'Wednesday': 3,
    'Thursday': 4,
    'Friday': 5,
    'Saturday': 6,
    'Sunday': 7
};

このマップを用意しておけば、Array.prototype.sort() メソッドにカスタムコールバック関数を渡し、各オブジェクトが持つ曜日に応じたインデックスの大小を比較することで、意図した順序で並べ替えが可能になります。

完全なコード例

実際のコード全体は以下のようになります。

const weather = [{
    day: 'Wednesday',
    humidity: 60
}, {
    day: 'Saturday',
    humidity: 50
}, {
    day: 'Thursday',
    humidity: 65
}, {
    day: 'Monday',
    humidity: 40
}, {
    day: 'Sunday',
    humidity: 35
}, {
    day: 'Friday',
    humidity: 80
}, {
    day: 'Tuesday',
    humidity: 45
}];
const map = {
    'Monday': 1, 'Tuesday': 2, 'Wednesday': 3, 'Thursday': 4, 'Friday': 5, 'Saturday': 6,
    'Sunday': 7
};
weather.sort((a, b) => {
    return map[a.day] - map[b.day];
});
console.log(weather);

実行結果

このコードを実行すると、コンソールには以下のように出力されます。

[
    { day: 'Monday', humidity: 40 },
    { day: 'Tuesday', humidity: 45 },
    { day: 'Wednesday', humidity: 60 },
    { day: 'Thursday', humidity: 65 },
    { day: 'Friday', humidity: 80 },
    { day: 'Saturday', humidity: 50 },
    { day: 'Sunday', humidity: 35 }
]

このように、曜日ごとの数値マップと sort() の比較関数を組み合わせることで、文字列としての曜日名を正しい週の順序で簡単にソートできます。同様の手法は、優先度やカテゴリーなど任意の順序でオブジェクト配列を整列させたい場合にも応用できます。