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

2017.05.31.水 JavaScript

20170531
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を実行するだけなので、簡単です。

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

実行してみます。

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

2. 正確に表示する

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

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

実行してみます。

2017年5月30日23時42分55秒に実行。そこから2017年7月1日までは「31日と0時間17分5秒」あると返ってきました。

最後に

今回は簡単な処理を紹介しましたが、Moment.jsがあれば日付処理で困らないと思います。
JavaScriptの標準のDateクラスで日付処理で困ったら、Moment.jsを検討してみてはいかがでしょうか。

キー・ポイントでは、いろいろなライブラリを使いこなすエンジニアを募集しています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です