JavaScriptでX hours agoを表示させたいなら、moment.jsを使おう

この記事では、JavaScriptで ”2019-01-01 00:00:00” のようなdatetimeの値を、SNSとかでよくある「5 hours ago」とか「1 week ago」のような、現在時刻と比較してどれくらい前のデータなのか(いわゆるRelative Time)を表示するための方法をご紹介します。

moment.jsをインストール

datetimeの値を変換してくれるライブラリは、何個かあるようなのですが、moment.jsが一番シンプルで導入も簡単でしたし、他の機能も豊富なので、入れておいて損はないのかなと思っています。

もしかしたら、moment.jsは普通のdatetimeのフォーマッティングで使ったことがある人もいるかもしれません。僕の場合は過去に使ったことがあったのですが、Relative Timeのフォーマットがあるとは知りませんでした。

以下のmoment.jsの簡単なインストール方法です。

npm install moment --save

インストールできたら、jsから読み込んであげます。だいたいの場合はVueとかReactとかのフロントエンド側でAPIで取得したdatetimeデータをHTMLにバインドするときに、フィルターとして使うことが多いかと思います。

Vue.jsでRelative Timeフィルターを作る

本記事では、VueでRelative Timeを扱う場合にどうやってフィルターを実装していくかをご紹介していきます。実装と言っても超簡単でこんな感じでフィルターを書いてあげるだけです。

import moment from "moment"
export default {
  name: "Sample",
  filters: {
    moment: function (date) {
        return moment(date).fromNow()
      }
  },
  data () {
    return {
      create_datetime: "2019-01-01 00:00:00"
    }
  }
}

ここで定義してあげたフィルターをHTML上で使う場合はこんな感じで書いてあげましょう。

<p>{{create_datetime | moment}}</p>

バインドするデータの後にパイプで区切って、フィルター名を入れてあげるだけです。かなりシンプルに書けますね。

moment.jsのウェブページでは、moment()の第二引数に第一引数のフォーマットをYYYYMMDDのような形で入れてあげるっぽいですが、MySQLのDATETIME型の関数の場合、第二引数を書かずに、第一引数にその値を入れてあげるだけで動きました。

Relative Timeだけでなく、他のフォーマットも使えそう

前述した通り、moment.jsはRelative Timeへのフォーマットだけでなく、他のタイプのフォーマットにも対応しているので、日付を表示するWebサービスを開発するときは、とりあえず入れておけば良さそうです。

Moment.jsが対応しているフォーマットはこんな感じ。