Nuxt.jsでMoment.jsを使ってみた

Nuxt.jsでMoment.jsを使ってみた

Nuxt.jsでMoment.jsを使ってみました。
本記事では導入する手順と使い方について記載しています。
載せているサンプルは日付変換と、現在日付取得、日付の加算・減算です。

Moment.jsの公式ページはこちらです。

インストールする

yarnコマンドまたはnpmコマンドを使用します。
yarnの場合は下記コマンドでライブラリを追加します。

yarn add @nuxtjs/moment

npmの場合は下記コマンドでライブラリを追加します。

yarn add @nuxtjs/moment

nuxt.config.jsに設定する

nuxt.config.jsを開いて、編集します。
buildModules項目に’@nuxtjs/moment’を追加して、Moment.jsが使えるようにします。
下記のように、momentの項目を新規に用意して、ロケール(locales)として、日本を設定する。

buildModules: [
  '@nuxtjs/moment'
],

moment: {
  locales: ['ja']
},

Moment.jsを使う

導入したMoment.jsを使用するサンプルを記載しています。

日付変換する(dateformat)

まずimport文で、momentをインポートして使う準備をします。

import moment from 'moment'

読み込んだmomentを使用すると、変換などMoment.jsの機能を使うことができます。
下記は、渡した日付型(DateTime)をstringの指定したフォーマットに変換する処理になります。

moment(value).format('YYYY/MM/DD hh:mm');

上記のように変換した場合(valueが日付型の2021-01-15 10:38:03)は結果がこのようになります。

2021/01/15 10:38

現在の年月日時分秒を取得する

現在の年月日時分秒を出力するには下記のようにします。

moment().format("YYYY/MM/DD HH:mm:ss");

moment関数を引数なしで呼び出した時点で、現在のDateTimeが設定されています。
あとは、format関数で出力したいフォーマットにすればOKです。

日付を加算する

add関数を呼ぶと加算することができます。
第1引数が加算する数値で、第2引数が書式です。

現在の年月日時分秒が下記の場合で加算してみます。

2021/01/18 11:29:20

それぞれの3を加算してみました。
結果は右にコメントしているようになります。

moment().add(3, "y").format("YYYY/MM/DD HH:mm:ss"); // 結果：2024/01/18 11:29:20 
moment().add(3, "M").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/04/18 11:29:20 
moment().add(3, "d").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/21 11:29:20 
moment().add(3, "h").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/18 14:29:20 
moment().add(3, "m").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/18 11:32:20 
moment().add(3, "s").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/18 11:29:23

日付を減算する

subtract関数を呼ぶと減算することができます。
addだったところを、subtractに置き換えた感じで使えます。
第1引数が減算する数値で、第2引数が書式です。

現在の年月日時分秒が下記の場合で減算してみます。

2021/01/18 11:38:19

それぞれの3を加算してみました。
結果は右にコメントしているようになります。

moment().subtract(3, "y").format("YYYY/MM/DD HH:mm:ss"); // 結果：2018/01/18 11:38:19
moment().subtract(3, "M").format("YYYY/MM/DD HH:mm:ss"); // 結果：2020/10/18 11:38:19
moment().subtract(3, "d").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/15 11:38:19
moment().subtract(3, "h").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/18 08:38:19
moment().subtract(3, "m").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/18 11:35:19
moment().subtract(3, "s").format("YYYY/MM/DD HH:mm:ss"); // 結果：2021/01/18 11:38:16

フォーマット(format関数)の書式について

主要なフォーマット書式について、表にしました。
フォーマットについての詳細は、公式ドキュメントのこちらに書いています。