開発

JavaScriptの日付ライブラリdate-fnsでよく使うメソッドのまとめ

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

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

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

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

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

日付型のデータを画面に表示する時、文字列型に変換しつつ適切なフォーマットにできるメソッドが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でよく使うメソッド2|日付の加算・減算

「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でよく使うメソッド3|過去・未来・同日の日付判定

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でよく使うメソッド4|月初・月末の日付判定

これは本当によく使う。月初はまあどの月も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はどちらが比較基準になるのかよく忘れるので整理できてよかった。

ABOUT ME
稲垣 貴映
サーバーエンジニア兼Webフロントエンジニア。 新卒で独立系SIerに入社後、金融系システム基盤の構築・運用を3年間経験。 プログラミングを独学していた頃に、CEOの馬谷が開講していたSwiftスクールに通い、2019年9月に入社。 趣味はブラジル音楽の演奏。
株式会社Playgroundのサービス
  • 【今なら無料】ノーコードでホームページを作成できるRakwi
  • 【月額500円】Web制作とアプリ開発を学べるオンラインプログラミング講座Upstairs
  • 【月額44万円で開発支援】スタートアッププラン

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA