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

nuxt.jsNuxt.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関数)の書式について

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

書式内容
YY年が表示される(頭2桁なし 70, 71… 29,30)
YYYY年が表示される(4桁 1970, 1971… 2029)
M月が表示される(0埋めなし、1, 2, 3… 12)
MM月が表示される(0埋め有り、01, 02, 03… 12)
D日付が表示される(0埋めなし、1, 2, 3… 31)
DD日付が表示される(0埋め有り、01, 02, 03… 31)
H24時間表記の時間が表示される(0埋めなし、0, 1, 2… 22, 23)
HH24時間表記の日付が表示される(0埋め有り、00, 01, 02… 22, 23)
h12時間表記の時間が表示される(0埋めなし、1, 2… 11, 12)
hh12時間表記の日付が表示される(0埋め有り、01, 02… 11, 12)
m分が表示される(0埋めなし、1, 2… 58, 59)
mm分が表示される(0埋め有り、01, 02… 58, 59)
s秒が表示される(0埋めなし、1, 2… 58, 59)
ss秒が表示される(0埋め有り、01, 02… 58, 59)
Nuxt.jsプログラミング
yasuakiをフォローする
codelikeなブログ

コメント

タイトルとURLをコピーしました