Photosynthesic blog

夫婦でやってるWeb屋です。

2018-10-08

vue.jsとなかよくなろう:日本時間の表示にFilterを使ってmomentを利用

こんにちは、みみです。

先日アップしたこのサイトのテーマですが、トップのREST APIのところの日付がGMT ISO形式のままだった事にやっと気がついてしれっと修正したのでそのメモです。

Vueとは関係なくまず moment.jsという素敵なライブラリがMITであって、それをvueに使える vue-moment というのもあるのですが、このサイトでは今の処VueをCDNで使っているので moment.jsもCDNで引っ張ってきて使ってみました。

moment.js – cdnjs.com – The best FOSS CDN for web related libraries to speed up your websites!

この一覧から使いたいタイムゾーンのCDNのURLをコピー。現時点のバージョンの日本版だとこれ。

https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/ja.js

これを読み込ませて、vueの方にFilter化して使います。

Vue の Filter を使ってみましょう

そうです。Filterです。Array.filter()じゃないよ!

Vue.js では、一般的なテキストフォーマットを適用するために使用できるフィルタを定義できます

https://jp.vuejs.org/v2/guide/filters.html

え、やだVueめっちゃお利口さん…ってなりませんでしたこの機能?あれ私だけ?なんか、こういう端から重箱の角が整ってる感じがぐっときません?

つまり、

filters: {
        moment: function (date) {
            return moment(date).format('YYYY/MM/DD HH:mm');// eslint-disable-line
        }
    }

というふうに書いておいたら、

{{post.date| moment}}

と書けば変換してくれるのです。すばらしい。

先の vue-moment はこのFilterを書かなくても直でMustacheに書くだけで動くようにしたやつぽいですね。多分。

というわけで、以前の記事で紹介したgistの適当コードも修正しておきましたので良かったらご覧ください。

ここではインスタンスの中に書いていますが、グローバルでフィルタを定義することもできます。

参照:

Vue.jsで日付処理ライブラリMoment.jsを使う | webOpixel

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter