JavaScriptで日付時刻を扱うならMoment.jsを使おう!

以前、JavaScriptで日付を扱う方法について紹介しました。

JavaScriptで日付と曜日を取得する方法について紹介しています。曜日については日本語、英語等に対応しています。JavaScriptで日付、曜日を取得する際に参考にしてください。

JavaScriptには、日付を扱う有名なライブラリー「moment.js」があります。
Githubで39630ものスターを(2018年12月26日現在)獲得しているライブラリーです。

今回の記事では、Moment.jsの使用方法について紹介します。

インストール

Moment.jsのインストールは、npmやYarnなどでインストールすることができますが、次のコマンドを打つことでインストールすることができます。

npm install moment --save   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower install moment --save # bower (deprecated)

また、Moment.jsのCDNを使用する方法もあります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/locale/ja.js"></script>

Moment.jsの使用方法

日付時刻のインスタンスの生成

Moment.jsでは、日付をの生成を配列・オブジェクト・UNIXタイムスタンプなど様々な方法で取得することができます。

Moment.jsを使用した日付のフォーマット

トークン 指定の意味
M 月の数字(1 – 12) 1〜12
MM 月の数字(01 – 12) 01〜12
MMMあるいはMMMM moment.locale()でローカライズされた月の名前 1月〜12月
D 日(月:たとえば10月の何日目 1 – 31) 1〜31
DD 日(月:たとえば10月の何日目 01 – 31) 01〜31
DDDあるいはDDDD 日(年:たとえば2010年の何日目) 1〜366
d, dd, dddあるいはdddd moment.locale()でローカライズされた曜日 月〜日
YY 2ケタの年数(もし70以上であれば、1900年代か、そうでなければ2000年代を返す) 19
YYYY 4ケタの年数 2019
aあるいはA AM/PM am/pm
H, HH 時間(24時制) 0〜23
hあるいはhh 時間(12時制、aあるいはAと組み合わせて使用) 1〜12
mあるいはmm 0〜59
sあるいはss 0〜59
S デシ秒(1/10秒) 0〜59
SS センチ秒(1/100秒) 0〜59
SSS ミリ秒(1/1000秒) 0〜999
ZあるいはZZ +0700あるいは+07:30などタイムゾーンの時差。タイムゾーンが指定されていない限り、文字のパースは現在のタイムゾーンでdateを作る。 +12:00

=>より詳細な情報を知りたい方はこちら

年や月単位で日時を取得

Moment.jsでは月だけの情報が欲しい場合や設定する場合も簡単に行うことが出来ます。月は-1されるのに注意が必要です。

そのほかにgetメソッドを使用する方法もあります。

Moment.jsで作成したインスタンスに新たな日付をセットするためにsetメソッドを使用する方法もあります。

指定日までの日時を知る(fromNow)
現在からの指定日までの期間を知る

Moment.jsを使用すると今と指定日までの日数を簡単に知ることができます。
fromNowメソッドを使用します。

詳細に日時を指定の場合は、下記のリンクを参照ください。
Time from now 1.0.0+

指定日と指定日の期間を知る

日時の加算・減算をする

Moment.jsを使用すると日付の加算・減算も簡単にすることが出来ます。
下記の例では、年・月・日の減算ですが、引数に”hours”・”seconds”を与えることで、時間・秒の加算・減算も当然行うことが出来ます。

年始めや月初などの取得

moment.jsを使用して年初・月初を取得することが出来ます。

年末・月末などの取得

moment.jsを使用すると年末や月末の情報も簡単に取得することが出来ます。

日付日時の比較
日時が同じかどうか(isSame)

日時が前かどうか(isBefore)

日時が前かどうかを比較することもできます。以前出ないことに注意です。

日時が後かどうか(isAfter)

以前(isSameOrBefore)

以後(isSameOrAfter)

間(isBetween)

今回は、JavaScriptで日付日時を扱うライブラリー「Moment.js」について紹介しました。
「Moment.js」を使用しようと思っている方は、ぜひ、参考にしてください。