Moment.jsを使って、指定した日までどれくらいかを表示する

tです。
Moment.jsというJavaScriptのライブラリについて紹介します。
Moment.jsは日付処理を行うライブラリです。JavaScriptには、標準でDateクラスがありますが、Moment.jsは、多言語対応や様々な機能が追加されています。

今回は、現時刻から指定した日(2017年7月1日)まで、どれくらいあるか表示する方法を、2パターンご紹介します。
1.だいたいの単位で表示する (Twitterのツイートの時間表示などでよく見られます)
2.正確に表示する (カウントダウンイベントなどで使えるかと思います)

実行環境

Node v7.10.0
Moment.js v2.18.1

1. だいたいの単位で表示する

以下のようにするだけで、だいたいの単位で表示できます。
fromNowを実行するだけなので、簡単です。

const moment = require('moment');

// locale関数を使って言語を設定すると、日本語で出力される
moment.locale( 'ja' );

// 出力 (2017年7月1日まで、どれだけあるか)
console.log( moment( '2017-07-01' ).fromNow() );

const moment = require('moment');

// locale関数を使って言語を設定すると、日本語で出力される

moment.locale( 'ja' );

// 出力 (2017年7月1日まで、どれだけあるか)

console.log( moment( '2017-07-01' ).fromNow() );

fromNowメソッドは、現在日時から指定した日時までの期間を、文字列で返します。
momentオブジェクトを生成してfromNowメソッドを使うだけで、だいたいの単位での出力が可能です。

実行してみます。

$ node from-now.js
1ヶ月後

1 2	$ node from-now.js 1ヶ月後

2017年5月30日23時42分に実行したので、「1ヶ月後」と返ってきました。だいたい合ってますね。

2. 正確に表示する

以下のようにすると、正確な表示ができます。
先ほど紹介した、だいたいの単位での表示方法より、手順を踏みます。

const moment = require('moment');

// diffメソッドを使って、現時刻と2017年7月1日の日時の差を、ミリ秒で取得
const diff = moment( '2017-07-01' ).diff( moment() );

// ミリ秒からdurationオブジェクトを生成
const duration = moment.duration( diff );

// 日・時・分・秒を取得
const days    = Math.floor( duration.asDays() );
const hours   = duration.hours();
const minutes = duration.minutes();
const seconds = duration.seconds();

// 出力
console.log( `${days}日と${hours}時間${minutes}分${seconds}秒` );

const moment = require('moment');

// diffメソッドを使って、現時刻と2017年7月1日の日時の差を、ミリ秒で取得

const diff = moment( '2017-07-01' ).diff( moment() );

// ミリ秒からdurationオブジェクトを生成

const duration = moment.duration( diff );

// 日・時・分・秒を取得

const days = Math.floor( duration.asDays() );

const hours = duration.hours();

const minutes = duration.minutes();

const seconds = duration.seconds();

// 出力

console.log( `${days}日と${hours}時間${minutes}分${seconds}秒` );

4行目で、diffメソッドを使って日時の差をミリ秒で取得し、7行目でdurationオブジェクトにしています。
10行目でasDaysメソッドを使って、日換算した時に全体で何日かを取得して、切り捨てを行っています。
11〜13行目のhours、minutes、secondsメソッドは、「時・分・秒」それぞれの単位でどれだけ経過したかを返します。例えば、hoursなら0〜23の値を返します。

実行してみます。