Nuxt.jsでdate-fnsを使ってみる

@nuxtjs/date-fnsを使って、Nuxt.jsで日付の処理を行ってみます。

サンプルコード

まずはNuxt.jsのプロジェクトに@nuxtjs/date-fnsを追加します。

yarn add --dev @nuxtjs/date-fns

npmの場合は下記です。

npm install @nuxtjs/date-fns

nuxt.config.jsのbuildModulesに@nuxtjs/date-fnsを追加します。

export default {
  buildModules: [
    '@nuxtjs/date-fns',
  ]
}

実際に使ってみます。
$dateFnsを使って日付処理(今回はフォーマット)を行います。

{{ $dateFns.format(new Date('2121/12/24'), 'yyyy.MM.dd') }}
{{ $dateFns.format(new Date(2021, 11, 24, 20, 30, 0), 'yyyy.MM.dd HH:mm:ss') }}
{{ $dateFns.format(new Date('2121/12/24'), 'MMM.dd.yyyy(E)') }}

フォーマット形式の種類はいろいろありますので、詳しくは公式ドキュメントをご確認ください。
保存すると、以下のように表示されました。

2121.12.24
2021.12.24 20:30:00
Dec.24.2121(Wed)

次に日本語で日付を表示させてみます。
nuxt.config.jsでの記述を変更して、日本語のインポートを追加します。

export default {
  buildModules: [
    ['@nuxtjs/date-fns', { locales: ['ja'] }]
  ]
}

これで日本語対応が追加されたので、日本語でのフォーマットを試してみます。

{{ $dateFns.format(new Date('2121/12/24'), 'yyyy.MMMdo(E)', { locale: 'ja' }) }}

結果は以下のように表示されました。

2121.12月24日(水)

デフォルトだとdate-fnsのメソッドが全てインポートされますが、必要なメソッドのみインポートしたい場合もnuxt.config.jsから設定できます。
例えば現在使用しているformatのみインポートしたい場合、以下のようになります。

export default {
  buildModules: [
    ['@nuxtjs/date-fns', { locales: ['ja'], methods: ['format'] }]
  ]
}

オプション

date-fns自体のオプションをいくつか分類して試してみます。

設定

まずは年や月などの設定です。

{{ new Date(2021, 11, 24, 20, 30, 0) }}
{{ $dateFns.setYear(new Date(2021, 11, 24, 20, 30, 0), 2022) }}
{{ $dateFns.setMonth(new Date(2021, 11, 24, 20, 30, 0), 1) }}
{{ $dateFns.setDate(new Date(2021, 11, 24, 20, 30, 0), 1) }}
{{ $dateFns.set(new Date(2021, 11, 24, 20, 30, 0), {
  year: 2011,
  month: 11,
  date: 11,
  hours: 11,
}) }}

結果は以下のように表示されました。

Fri Dec 24 2021 20:30:00 GMT+0900 (日本標準時)
Sat Dec 24 2022 20:30:00 GMT+0900 (日本標準時)
Wed Feb 24 2021 20:30:00 GMT+0900 (日本標準時)
Wed Dec 01 2021 20:30:00 GMT+0900 (日本標準時)
Sun Dec 11 2011 11:30:00 GMT+0900 (日本標準時)

取得

次に日付から年や月などを取得方法です。

{{ $dateFns.getYear(new Date(2021, 11, 24, 20, 30, 0)) }}
{{ $dateFns.getMonth(new Date(2021, 11, 24, 20, 30, 0)) }}
{{ $dateFns.getDate(new Date(2021, 11, 24, 20, 30, 0)) }}

結果は以下のように表示されました。

2021
11
24

加算

addYears()やaddMonths()、addDays()などで年・月・日などの値に加算ができます。
add()でまとめて加算もできます。

{{ $dateFns.addYears(new Date(2021, 11, 24, 20, 30, 0), 1) }}
{{ $dateFns.addMonths(new Date(2021, 11, 24, 20, 30, 0), 1) }}
{{ $dateFns.addDays(new Date(2021, 11, 24, 20, 30, 0), 7) }}
{{ $dateFns.add(new Date(2021, 11, 24, 20, 30, 0), {
  years: 2,
  months: 9,
  weeks: 1,
  days: 7,
  hours: 5,
  minutes: 9,
  seconds: 30,
}) }}

以下のような結果になります。

Sat Dec 24 2022 20:30:00 GMT+0900 (日本標準時)
Mon Jan 24 2022 20:30:00 GMT+0900 (日本標準時)
Fri Dec 31 2021 20:30:00 GMT+0900 (日本標準時)
Wed Oct 09 2024 01:39:30 GMT+0900 (日本標準時)

減算

subYears()やsubMonths()、subDays()などで年・月・日などの値に減算ができます。
sub()でまとめて減算もできます。

{{ $dateFns.subYears(new Date(2021, 11, 24, 20, 30, 0), 1) }}
{{ $dateFns.subMonths(new Date(2021, 11, 24, 20, 30, 0), 1) }}
{{ $dateFns.subDays(new Date(2021, 11, 24, 20, 30, 0), 1) }}
{{ $dateFns.sub(new Date(2021, 11, 24, 20, 30, 0), {
  years: 1,
  months: 2,
  weeks: 2,
  days: 4,
  hours: 5,
  minutes: 9,
  seconds: 30,
}) }}</div>

以下のような結果になります。

Thu Dec 24 2020 20:30:00 GMT+0900 (日本標準時)
Wed Nov 24 2021 20:30:00 GMT+0900 (日本標準時)
Thu Dec 23 2021 20:30:00 GMT+0900 (日本標準時)
Tue Oct 06 2020 15:20:30 GMT+0900 (日本標準時)

比較

2つの日付を比較して、その差や判別を行います。
動作テストを行なったのは記事投稿日(2021年11月20日)になります。

{{ $dateFns.formatDistance(
  new Date(2021, 11, 24, 20, 0, 0),
  new Date(2021, 11, 1, 0, 0, 0),
  { addSuffix: true, locale: 'ja' }
) }}
{{ $dateFns.formatDistanceStrict(
  new Date(2021, 11, 24),
  new Date(2021, 11, 1),
  { locale: 'ja' }
) }}
{{ $dateFns.formatDistanceToNow(
  new Date(2021, 11, 24),
  { addSuffix: true, locale: 'ja' }
) }}
{{ $dateFns.formatDistanceToNowStrict(
  new Date(2021, 11, 24),
  { locale: 'ja' }
) }}
{{ $dateFns.compareAsc(
  new Date(2021, 11, 24),
  new Date(2021, 11, 1)
) }}
{{ $dateFns.compareDesc(
  new Date(2021, 11, 24),
  new Date(2021, 11, 1)
) }}

以下のような結果になります。

24日後
23日
約1か月後
1か月
1
-1

判別

指定した値が条件に対してtrueかfalseかを返します。

{{ $dateFns.isAfter(
  new Date(2021, 11, 24),
  new Date(2021, 11, 1)
) }}
{{ $dateFns.isBefore(
  new Date(2021, 11, 24),
  new Date(2021, 11, 1)
) }}
{{ $dateFns.isDate(new Date(2021, 11, 24)) }}
{{ $dateFns.isEqual(
  new Date(2021, 11, 24),
  new Date(2021, 11, 1)
) }}
{{ $dateFns.isExists(2018, 1, 31) }}
{{ $dateFns.isFuture(new Date(2021, 11, 24)) }}
{{ $dateFns.isPast(new Date(2021, 11, 24)) }}

以下のような結果になります。

true
false
true
false
false
true
false

変換

指定した値を変換します。

{{ $dateFns.hoursToMinutes(1) }}
{{ $dateFns.hoursToMilliseconds(1) }}
{{ $dateFns.minutesToSeconds(60) }}
{{ $dateFns.secondsToMilliseconds(3600) }}
{{ $dateFns.secondsToHours(7200) }}
{{ $dateFns.secondsToHours(7199) }}

以下のような結果になります。

60
3600000
3600
3600000
2
1