JavaScriptで経過時間（「〜分前」とか「〜日前」）を表示したい

というわけで、TwitterとかFacebookでよく使われている「〜分前」とかを表示するときの実装例をご紹介します。

実装例

方法としては、現在時刻とデータの時刻の差分を求めて、その差分の時刻を表示します。

サンプルは、

データ　: 2017年2月11日 20時25分42秒 実行日時: 2018年2月5日 10時35分あたり

で試しています。

    var datetime = '2017/02/11 20:25:42';
    var from = new Date(datetime);

    // 現在時刻との差分＝経過時間
    var diff = new Date().getTime() - from.getTime();
    // 経過時間をDateに変換
    var elapsed = new Date(diff);

    // 大きい単位から順に表示
    if (elapsed.getUTCFullYear() - 1970) {
      elapsed.getUTCFullYear() - 1970 + '年前';
    } else if (elapsed.getUTCMonth()) {
      elapsed.getUTCMonth() + 'ヶ月前';
    } else if (elapsed.getUTCDate() - 1) {
      elapsed.getUTCDate() - 1 + '日前';
    } else if (elapsed.getUTCHours()) {
      elapsed.getUTCHours() + '時間前';
    } else if (elapsed.getUTCMinutes()) {
      elapsed.getUTCMinutes() + '分前';
    } else {
      elapsed.getUTCSeconds() + 'たった今';
    }
    →"11ヶ月前";

ライブラリ（moment.js）を使う場合

ライブラリ（moment）を使うとすっごいかんたんデス。 momentjsの使い方は以下のサイトが参考になります。 Asial BLOG

var date = '2017/02/11 20:25:42'; 
moment(date, 'YYYY/MM/DD HH:mm:S').fromNow();
→"1年前"

試してみて

momentはfromNow()を呼び出すだけなのでメチャ楽！！ だけど、表示内容のカスタマイズができないので融通が効かないです。

あと、試していて初めて気づいたんだけど、momentだと「11ヶ月前」は「1年前」として丸められちゃうみたい。 （残り40日から？）

なので、正確に表示したい人はライブラリを使わずに自分で関数を定義したほうがいいです！