はじめに

日付をフォーマットしたい、日付Aと日付Bが何日空いているか知りたいなど、アプリ開発をしていると色々と日付関連でやりたいことって増えて来ますよね。今回は日付処理系ライブラリの中でも定番中の定番「Moment.js」の導入方法と使い方をみていきたいと思います。

そもそもMoment.jsってなに？

DateオブジェクトをラップするMomentオブジェクトを生成して使う日付処理系のライブラリです。用意されている便利な関数を使って、日付の処理が非常に簡潔に書けるようになります。GitHubでもスター数が4万を超え、更新も頻繁に行われている為、安心して導入出来るライブラリの一つです。(2019.08現在)

導入手順

Step1. パッケージのインストール

yarn add @nuxtjs/moment

Step2. モジュールの登録

// nuxt.config.js

module.exports = {
  ~ 中略 ~
  modules: [
    ['@nuxtjs/moment', ['ja']],
  ],
}

これだけで導入は完了です。次に使い方についてみていきましょう。

Moment.jsを使ってみる

Step1. filterの定義

せっかくなので日付形式をフォーマットするfilterを実装したいと思います。

// plugins/my-filter.js

import Vue from 'vue'
import moment from 'moment'

Vue.filter('format-date', function (value) {
  const date = moment(value);
  return date.format("YYYY.MM.DD(ddd)");
})

簡単に解説をすると7行目のmoment()でMomentオブジェクトを生成し、その中で定義されているフォーマット用の関数であるformat関数を使って次の8行目で日付をフォーマットしているのがわかるかと思います。

関数の一覧や詳しい使い方は公式サイトを見るのが良いかと。

Step2. フォーマットしてみる

<template>
  <span>
        {{ new Date() | format-date }}
  </span>
</template>

YYYY.MM.DD(ddd)形式で日付が表示されていれば成功です。

さいごに

開発するコンテンツにもよりますが、日付の操作をする機会は比較的多いと思いますので、導入も簡単ですしおすすめです。そのうちよく使う関数なんかをまとめて記事にしたいと思います。

まとめました。

Moment.jsのよく使う関数をピックアップしてみました