こんにちは、steshima です。
今回は date-fns でカレンダーに関する計算（週や月を中心とした日付処理）をする時に役立ちそうな関数や tips を紹介します。
月初日・月末日の取得や判定
他の日時計算用ライブラリでもよくあると思いますが、月初日などは簡単に取得・判定ができる下記などの関数が用意されています。
startOfMonthendOfMonthisFirstDayOfMonthisLastDayOfMonth
import {
startOfMonth,
endOfMonth,
isFirstDayOfMonth,
isLastDayOfMonth
} from 'date-fns';
const date = new Date('2024-08-06')
const firstDay = startOfMonth(date) // => Thu Aug 01 2024 00:00:00 GMT+0900 (日本標準時)
const lastDay = endOfMonth(date) // => Sat Aug 31 2024 23:59:59 GMT+0900 (日本標準時)
isFirstDayOfMonth(firstDay) // => true
isLastDayOfMonth(lastDay) // => true
週も同様に、startOfWeek などが用意されているため簡単に取得できます。
特定の日が第何週に当たるかを取得する
特定の日が第何週に当たるかは getWeekOfMonth を使って求めることができます。
以下は2024年8月6日がカレンダーの第何週に当たるかの例です。
getWeekOfMonth(new Date('2024-08-06'))
// => 2
基本的に上記で問題ないことが多いと思いますが、場合によっては月初日を基準とした考え方で第何週かを計算したいこともあるかもしれません。
この場合、基準の曜日を指定できる weekStartsOn オプションに月初日の曜日を指定することで第何週かを取得できます。
weekStartsOn に指定する曜日の値は0~6で、0が日曜日です。
const targetDate = new Date('2024-08-06')
// 月初日を取得
const firstDayOfMonth = startOfMonth(targetDate)
// 月初日の曜日を取得
const dayOfWeek = getDay(firstDayOfMonth)
// 月初日の曜日を基準として、第何週かを取得
getWeekOfMonth(targetDate, { weekStartsOn: dayOfWeek })
// => 1
その他、便利そうなもの
特定のケースで役立ちそうなものもあります。
isSameWeek（2つの日が同じ週に当たるか）
isSameWeek(new Date('2024-08-06'), new Date('2024-08-10'))
// => true
isThisWeek（対象日が今週かどうか）
// 今日が2024年8月6日（火）の場合
isThisWeek(new Date('2024-08-10'))
// => true
週の定義（最初の曜日など）は地域などによって変わってくるため、上記の関数などにも weekStartsOn のオプションが指定できるようになっています。
とはいえ、言語情報を持つ Locale オブジェクト内に weekStartsOn も設定されているため、言語設定していれば特に意識することないオプションかもしれません。
さいごに
他の日時計算用ライブラリとの比較はしていませんが、date-fns だけでも便利な関数が豊富に用意されており、週が絡む部分のややこしそうな計算なども楽に実装することができます。
ここでは紹介しきれなかったものも多いので、気になる方は是非公式ドキュメントを覗いてみてください。
Discussion