Twitter風の〜分前を実装する(JavaScript/Vue編)

ダッシュボードを作っていて最新データの更新時刻を一覧表示にしたけど、パッとみても時間がわかりにくい...ということでTwitter風の〜分前って表示を実装しようと思いました...とRails版をQiitaに書いてから早５年。

最近はVueJSメインなので、再調査してみました。

調査

Javascriptで時間を扱うならMomentJsだよね、と調べたら普通に関数がありました。TimeFrom, TimeToなどで時間差が文字列で帰ってくるようです。

MomentJS:"Time from now"
https://momentjs.com/docs/#/displaying/fromnow/

正確な差がほしい場合はdiffを使います。こちらは好きな単位（秒、分、日など好きな単位で取得できます）

MomentJS:"Diffrence"
https://momentjs.com/docs/#/displaying/difference/

実装

日本語で表示するにはLocaleを'ja'にセットするだけでよさそうです（簡単！。
以下にVueのテストコードをおいておきます。Inputエリアの時刻を書き換えると変わります。

https://bellx2.github.io/time_diff.html

time_diff.html

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.js"></script>

<div id="app">
  <input v-model="mytime">
  <p>
  <p>FromNow : {{ time_diff() }}
  <p>Diff(sec) : {{ time_diff_sec() }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    mytime: moment().format("YYYY/MM/DD HH:mm:ss"),
  },
  methods: {
    time_diff: function(){
      moment.locale('ja')
      return moment(this.mytime).fromNow()
    },
    time_diff_sec: function(){
      return moment(this.mytime).diff(moment(),'seconds')
    } 
  }
})
</script>

参考

Twitter風の〜分前を実装する
https://qiita.com/bellx2/items/30906a7832ef4ff4c886