こんにちは。てぃろです。
今回はVue.jsで構築したアプリで日付をフォーマットして表示したいときのMoment.jsの使い方をメモします。
フィルタとMoment.jsを使って日付をフォーマットする
Vueの機能のフィルタも使って、以下のような書き方で簡単に日付がフォーマットして表示されることを目指します。
<p>
Last update : {{ updated_at | moment }}
</p>表示は以下のような形です。
このとき日付の出力をフォーマットしなくてはいけないのですが、JavaScriptの日付フォーマットを簡単にしてくれるMoment.jsというライブラリがあるのでこれをいい感じに組み合わせていきます。
ここからは順を追って説明します。
フィルターを活用してテキストをフォーマットする
Vueではテキストフォーマットを適用するための機能を備えています。
機能としては受け取った文字列をフィルターの定義に従って変換する、というものです。つまり、日付もフィルターを使えば表示の時に文字列として別の書き方に変換できます。
フィルターの書き方には、mustaches展開とv-bind式（2.1.0以降）の二つ方法があります。
{{ message | capitalize }} // mustaches展開
<div v-bind:id="rawId | formatId"></div> // v-bind式私は直観的にわかりやすいmustaches展開を使っています。
上記の例でいうと、messageの文字列をcapitalizeというフィルタで変換して表示する、という意味です。
そのcapitalizeは関数であって、以下のようにfiltersの中に定義します。
filters: {
capitalize : function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
},capitalizeはただのJavaScriptの関数であって、文字列を返せばそれが画面に表示されるというわけです。
つまり、ここでいうcapitalizeが日付フォーマットの機能を持つ関数として定義すればいいのです。
日付フォーマットをMoment.jsで実装する
Moment.jsはJavaScriptの日付を簡単に扱うことができるライブラリです。
公式から例を引用すると、以下のように直観的な操作で日付のフォーマットができる優れモノです。
moment().format('MMMM Do YYYY, h:mm:ss a'); // March 12th 2021, 4:37:39 pm
moment().format('dddd'); // Friday
moment().format("MMM Do YY"); // Mar 12th 21
moment().format('YYYY [escaped] YYYY'); // 2021 escaped 2021先ほど紹介したフィルターにこれを合わせて日付フォーマットのフィルターを実装します。
実装は以下だけです。
<p>
Last update : {{ updated_at | moment }}
</p> filters: {
moment: function (date) {
return moment(date).format('YYYY/MM/DD HH:mm:SS')
}
},引数dateにはupdated_atが入ることになります。これをmomentの関数でフォーマットしたものを返却する、という単純な作りです。
Vue3ではfiltersはなくなります
Vue.jsとMoment.jsを使った日付フォーマットの方法は簡単でした。が、これはVue2までのやり方です。Vue3ではfilterが廃止されました。
純粋なJavaScriptに対して追加的な構文で学習コストもかかるため、というのが理由なようです。
詳しくはこちらを参照ください。
じゃあ、Vue3ではどうするの？という話ですが、単純にfiltersの代わりにmethodsで関数を定義して使えばいいのです。実装はほとんど変わらず、以下のようにすれば問題ないでしょう。
<p>
Last update : {{ moment(updated_at) }} // 関数呼び出しにする
</p> methods: { // filtersじゃなくmethods
moment: function (date) {
return moment(date).format('YYYY/MM/DD HH:mm:SS')
}
},つまり、Moment.jsが便利！ということですね！
Vue 3に関しては以下の記事がよくまとまっていますので、Vue 3の変更点がもっと知りたい方はこちらを参照ください。
（追記：2022/2/5）
ここで紹介しているmoment.jsが最近新機能の開発は停止してしまっているようです。
そのため、同様の日付計算ライブラリとしてはDay.jsがデファクトスタンダードになってきていますね。こちらもmoment.jsと同じくらい使いやすいライブラリで、使用感はほとんどかわらないので、moment.jsから乗り換えやすいのではないでしょうか。
