[Rails+Vue.js]〜分前を実装してみた

はじめに

Q＆Aサイトを作成している中で、質問の投稿時刻をTwitterのような〜分前にしたいと考えました。
しかし、Railsから渡される値をそのまま使うと、

のようになってしまいます。
そこで今回は、Moment.jsを用いて相対時刻の表示をしたいと思います。

バージョン等

Rails 6.1.3
Vue.js 2.6.11
Moment.js 2.29.1

手順

まずは、moment.jsをインストールします

npm install moment --save 

次に〜分前表示をしたいコンポーネント内に以下の記述をします。

<script>
import moment from "moment";

export default {
   filters: {
      moment: function(date) {
　　　　　　　　　　　　　　　　moment.locale("ja");
        return moment(date).fromNow();
      },
    },
</script>

コードの解説をすると、
moment.locale("ja");で日本語表示にしています。
returnでmoment(date)の後に、希望のフォーマットになるようにメソッドを記述します。
ここに関しては、
https://blog.capilano-fw.com/?p=1033
が参考になりました。

あとは、Vueのフィルターを使用して、

{{ question.created_at | moment }}

とすると、

〜分前のフォーマットで表示することができました！

まとめ

Railsから渡された値を、フロント側で処理をすることができました。
また、最近ではDay.jsがMoment.jsよりも処理が早いとも聞いたのでこれから導入する方は調べてみるのもいいかもしれません。