JavaScriptの日付ライブラリdate-fnsでよく使うメソッドのまとめ｜Playground発！アプリ開発会社の技術ブログ

日付処理、面倒ですよね。

どんなサービス・システムを開発する時にも必要だけど扱うのが難しいデータ型が日付型だと思っています。

そんな日付型のデータを楽に扱えるライブラリがどの言語にも存在しているわけですが、JavaScriptではdate-fnsやday.jsなどが有名です。私はdate-fns派です。

普段サービス開発している中でよく使うdate-fnsのメソッドをいくつかご紹介します。

1 date-fnsでよく使うメソッド１｜日付から文字列へのフォーマット
2 date-fnsでよく使うメソッド２｜日付の加算・減算
3 date-fnsでよく使うメソッド３｜過去・未来・同日の日付判定
4 date-fnsでよく使うメソッド４｜月初・月末の日付判定

date-fnsでよく使うメソッド１｜日付から文字列へのフォーマット

日付型のデータを画面に表示する時、文字列型に変換しつつ適切なフォーマットにできるメソッドがformat()です。

以下のように第一引数に日付型のデータ、第二引数にフォーマットを指定します。

import format from 'date-fns/format'

const now = new Date()
const date = format(now, 'yyyy/MM/dd')
console.log(date) // output: 2021/07/01

さらに日本語用ライブラリをインポートして、曜日などを日本語表示することも可能です。

import format from 'date-fns/format'
import ja from 'date-fns/locale/ja'

const now = new Date()
const date = format(now, 'M月d日(E)', {locale: ja})
console.log(date) // output: 7月1日(木)

yyyyやMMなどの対応パターンは公式ドキュメントを参考にしてくださいね。

date-fnsでよく使うメソッド２｜日付の加算・減算

「1日後の日付データがほしい」
「9時間後の日付データがほしい」
「1ヶ月前の日付データがほしい」

日付データを扱っていてあるあるなケースです。

date-fnsには加算・減算したい単位に応じてaddXxxxx、subXxxxxxといったメソッドが用意されています。

import {addDays, addHours, addMonths, subMinutes} from 'date-fns'

const now = new Date()
console.log(now) // 2021-07-01T04:57:08.015Z

// 1日後の日付データを取得
const tomorrow = AddDays(now, 1)
console.log(tomorrow) // 2021-07-02T04:57:08.015Z

// 9時間後の日付データを取得
const jst = AddHours(now, 9)
console.log(jst) // 2021-07-01T13:57:08.015Z

// 1ヶ月後の日付データを取得
const nextMonth = addMonths(now, 1)
console.log(nextMonth) // 2021-08-01T04:57:08.015Z

// addメソッドでも減算できる
const prevMonth = addMonths(now, -1)
console.log(prevMonth) // 2021-06-01T04:57:08.015Z

// subXxxxxは減算メソッド
const thirtyMinutesAgo = subMinutes(now, 30)
console.log(thirtyMinutesAgo) // 2021-07-01T04:27:08.015Z

date-fnsでよく使うメソッド３｜過去・未来・同日の日付判定

2つの日付を比較して過去なのか未来なのか同じ日なのかを判定するメソッドたちです。

第一引数が第二引数よりbefore/afterなのか、あるいはsameなのかを判定します。

import {isBefore, isAfter, isSameDay, addHours, addDays} from 'date-fns'

const now = new Date()
console.log(now) // 2021-07-01T04:57:08.015Z

const jst = addHours(now, 9) // 2021-07-01T13:57:08.015Z
const tomorrow = AddDays(now, 1) // 2021-07-02T04:57:08.015Z
const yesterday = AddDays(now, -1) // 2021-06-30T04:57:08.015Z

// 第一引数が第二引数より過去の日付かを判定
console.log(isBefore(now, jst)) // true
console.log(isBefore(now, tomorrow)) // true
console.log(isBefore(now, yesterday)) // false

// 第一引数が第二引数より未来の日付かを判定
console.log(isAfter(now, jst)) // false
console.log(isAfter(now, tomorrow)) // false
console.log(isAfter(now, yesterday)) // true

// 第一引数が第二引数と同じ日付かを判定
console.log(isSameDay(now, jst)) // true
console.log(isSameDay(now, tomorrow)) // false
console.log(isSameDay(now, yesterday)) // false

date-fnsでよく使うメソッド４｜月初・月末の日付判定

これは本当によく使う。月初はまあどの月も1日から始まるけど、月末の判定をライブラリ使わずにやろうと思うとめちゃくちゃ面倒。

date-fnsにはstartOfMonth()とendOfMonth()というメソッドが用意されています。

import {startOfMonth, endOfMonth} from 'date-fns'

const now = new Date()
console.log(now) // 2021-07-15T04:57:08.015Z

// 月初の日付データを取得
const startDate = startOfMonth(now)
console.log(startDate) // 2021-06-30T15:00:00.000Z→JSTに変換すると2021-07-01T00:00:00.000Z　

// 月末の日付データを取得
const endDate = endOfMonth(now)
console.log(endDate) // 2021-07-31T14:59:59.999Z→JSTに変換すると2021-07-31T23:59:59.999Z

以上、date-fnsでよく使うメソッドの紹介でした。

isBeforeやisAfterはどちらが比較基準になるのかよく忘れるので整理できてよかった。