Moment.jsの使い方【かんたん日付処理】

hatomugi_s

5年前

JavaScriptで大人気の日付処理ライブラリ「Monent.js」
僕も日頃からお世話になっているライブラリです。とても便利なので、備忘録も兼ねて使い方をおさらいしようと思います。

公式サイトはこちらです。
https://momentjs.com/

Moment.jsとは

Moment.jsを使うと、JavaScriptのDateオブジェクトをより使いやすい形で扱えるようになります。使い方はDateオブジェクトの代わりにmoment()を呼び出し、そのオブジェクトをいじるだけです。

ざっくりこんなことができます。

日付のフォーマット（”MM月DD日”→”01月23日”）
日付の加算、減算（2日後、1年前、100日後など）
日付の比較（開始日から終了日までは15日間だったなど）

よく使う使用例

呼び出し

公式サイトからダウンロードするか、CDNを使います。
CDNの方が早くて楽で、ディレクトリ構成も気にしなくていいので基本的にはこれでOK。

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

普通は1行目だけで大丈夫です。
日本語表記の曜日がほしいときは、2行目も必要です。

基本的な使い方

// momentオブジェクトを生成
var date = moment(); //現在の時刻が入る

var date = moment('2020-01-23'); //日付を入れたらその日が入る

日付のフォーマット

指定した日付の書き方で、文字列として出力してくれます。引数の中は下記トークンを使って指定します。

var format = m.format('YYYY年MM月DD日 HH:mm:ss dddd');
console.log(format); // => 2020年03月15日 11:22:33 Friday

トークン	説明
MあるいはMM	月の数字（1 – 12）
MMMあるいはMMMM	月の名前（言語は`moment.lang()`で指定）
DあるいはDD	日（月：たとえば10月の何日目）
DDDあるいはDDDD	日（年：たとえば2010年の何日目）
d, dd, dddあるいはdddd	曜日（注：これらのトークンは日付を得ることには使えない。1ヶ月は4〜5週あり、曜日を元に日付を取得することは不可能だから）
YY	2ケタの年数（もし70以上であれば、1900年代か、そうでなければ2000年代を返す）
YYYY	4ケタの年数
aあるいはA	AM／PM
H, HH	時間（24時制）
hあるいはhh	時間（12時制、aあるいはAと組み合わせて使用）
mあるいはmm	分
sあるいはss	秒
S	デシ秒（1/10秒）
SS	センチ秒（1/100秒）
SSS	ミリ秒（1/1000秒）
ZあるいはZZ	`+0700`あるいは`+07:30`などタイムゾーンの時差。タイムゾーンが指定されていない限り、文字のパースは現在のタイムゾーンでdateを作る。

部分単位で取得

月だけ、日だけ取得したいときに使います。DateのgetFullYear()とかと同じです。

var date = moment();
// 部分単位で取得
/*
date.year();    // 年
date.month();   // 月 ※0〜11（0が1月、11が12月です。）
date.date();   // 日
date.day();    // 曜日
date.hours();    // 時
date.minutes();  // 分
date.seconds();  // 秒
date.milliseconds();  // ミリ秒
*/

console.log(date.year()); // => 2020

日付の加算、減算

○日後、○年前、などを取りたいときに使います。

// 加算は「add」、減算は「subtract」
var date = moment().add( 30, 'days' ); // 引数1：数、引数2：単位
// 引数2の単位はショートハンドがある
/*
years: y
quarters: Q
months: M
weeks: w
days: d
hours: h
minutes: m
seconds: s
milliseconds: ms
*/
var date = moment().add( 30, 'd' ); // 30日後
var date = moment().subtract( 5, 'M' ); // 5ヶ月前

日付の比較

開始日から終了日までの数を出します。日数、月数なども指定可能です。

var fromDate = moment('2019-01-01 0:00');
var toDate   = moment('2020-01-01 12:00');
toDate.diff( fromDate, 'd' ); // 365

// 引数3がtrueなら小数点まで返してくれます
toDate.diff( fromDate, 'd', true ); // 365.5

まとめ

他にも細かなニーズに合わせてたくさんのメソッドがありますが、よく使うのはこのあたりだと思います。dateが若干使いづらいこともあり、CDNで一度入れておけば今後かなり楽になるので、是非試してみてはいかがでしょうか。

参考文献

今回紹介したような基礎的な部分も、プログラミングスクールで学ぶことで体系的、効率的に学ぶことができます。

特に初心者の方で、Progateやドットインストール、書籍で勉強しながらも「もう少し専門的なところまで学びたい」や「分からないところがあるが気軽に聞ける相手がいない」などの悩みを持っている方は多いです。

プログラミングスクールではそういった初心者からWebエンジニアとして羽ばたくまでをプロの講師がサポートしてくれます。無制限のレビューや相談が出来るところも多いので、一度検討してみてはいかがでしょうか。

このブログでも各プログラミングスクールを比較しながら紹介していますので、興味がある方は是非ご覧ください。