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 (日本標準時)
setYear(date, amount) 指定した年を設定。
setMonth(date, amount) 指定した月を設定。
setDate(date, amount) 指定した日を設定。
setHours(date, amount) 指定した時間を設定。
setMinutes(date, amount) 指定した分を設定。
setSeconds(date, amount) 指定した秒を設定。
set(date, duration) 日付の各値をまとめて設定。

取得

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

{{ $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
getYear(date, amount) 指定した日付の年を取得。
getMonth(date, amount) 指定した日付の月を取得。
getDate(date, amount) 指定した日付の日を取得。
getHours(date, amount) 指定した日付の時間を取得。
getMinutes(date, amount) 指定した日付の分を取得。
getSeconds(date, amount) 指定した日付の秒を取得。

加算

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 (日本標準時)
addYears(date, amount) 指定した年数を加算。
addMonths(date, amount) 指定した月数を加算。
addDays(date, amount) 指定した日数を加算。
addWeeks(date, amount) 指定した週数を加算。
addHours(date, amount) 指定した時間を加算。
addMinutes(date, amount) 指定した分数を加算。
addSeconds(date, amount) 指定した秒数を加算。
add(date, duration) 日付の各値をまとめて加算。

減算

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 (日本標準時)
subYears(date, amount) 指定した年数を減算。
subMonths(date, amount) 指定した月数を減算。
subDays(date, amount) 指定した日数を減算。
subWeeks(date, amount) 指定した週数を減算。
subHours(date, amount) 指定した時間を減算。
subMinutes(date, amount) 指定した分数を減算。
subSeconds(date, amount) 指定した秒数を減算。
sub(date, duration) 日付の各値をまとめて減算。

比較

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
formatDistance(date, baseDate, [options]) 第二引数の日付を基準にして、第一引数の日付までの差を単語で返す。
formatDistanceStrict(date, baseDate, [options]) 第二引数の日付を基準にして、第一引数の日付までの厳密な差を単語で返す。
formatDistanceToNow(date, [options]) 現在から指定した日付までの差を単語で返す。
formatDistanceToNowStrict(date, [options]) 現在から指定した日付までの厳密な差を単語で返す。
compareAsc(dateLeft, dateRight) 指定した日付を比較して、第一引数より第二引数の方が未来の場合は1、第一引数より第二引数の方が過去の場合は-1、等しい場合は0を返す。
compareDesc(dateLeft, dateRight) 指定した日付を比較して、第一引数より第二引数の方が未来の場合は-1、第一引数より第二引数の方が過去の場合は1、等しい場合は0を返す。

判別

指定した値が条件に対して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
isAfter(date, dateToCompare) 第一引数の日付が第二引数の日付より未来かどうかを返す。
等しい場合はfalse。
isBefore(date, dateToCompare) 第一引数の日付が第二引数の日付より過去かどうかを返す。
等しい場合はfalse。
isDate(value) 指定した値がDateインスタンスかどうかを返す。
isEqual(dateLeft, dateRight) 指定した日付が等しいかどうかを返す。
isExists(year, month, day) 指定した引数で日付に変換されるかを返す。
isFuture(date) 指定した日付が現在より未来かどうかを返す。
isPast(date) 指定した日付が現在より未来かどうかを返す。

変換

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

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

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

60
3600000
3600
3600000
2
1
hoursToMinutes(hours) 指定した時間を分に変換。
hoursToSeconds(hours) 指定した時間を秒に変換。
hoursToMilliseconds(hours) 指定した時間をミリ秒に変換。
minutesToHours(minutes) 指定した分を時間に変換。
minutesToSeconds(minutes) 指定した分を秒に変換。
minutesToMilliseconds(minutes) 指定した分をミリ秒に変換。
secondsToHours(seconds) 指定した秒を時間に変換。
secondsToMinutes(seconds) 指定した秒を分に変換。
secondsToMilliseconds(seconds) 指定した秒をミリ秒に変換。
millisecondsToHours(milliseconds) 指定したミリ秒を時間に変換。
millisecondsToMinutes(milliseconds) 指定したミリ秒を分に変換。
millisecondsToSeconds(milliseconds) 指定したミリ秒を秒に変換。

参考サイト

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

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

CAPTCHA


コメントが承認されるまで時間がかかります。

2022年7月
 12
3456789
10111213141516
17181920212223
24252627282930
31