とあるWebアプリを作ろうとしている中で、JavaScriptでもっと日付を楽に扱いたいと調べていて、 Moment.js というライブラリを知りました。
このMoment.jsについて紹介しているサイトは以前からあるので、最近できたものではないです。 比較的最近の Cybozuさんの記事 を読んだのをきっかけに使ってみることにしました。
現在の日付を扱う
Moment.js を参考にダウンロード、もしくはインストールをしてscriptタグで moment.min.js を読み込みます。
// momentオブジェクトの初期化
var today = moment();
// 日付の出力
console.log(today.format()); // -> 2016-06-05T19:37:38+09:00
// フォーマットを指定して出力
console.log(today.format('LLLL')); // -> Sunday, June 5, 2016 7:54 PM
// 年月日をそれぞれ出力
console.log("year: ", today.year()); // -> year: 2016
console.log("month: ", today.month()); // -> month: 5
console.log("date: ", today.date()); // -> date: 5
moment().month() は、0から11の数字で帰ってくるため6月の場合は 5 と返ってきます。
日本語で出力する
上の手順と同様に、次は moment-with-locales.min.js をscriptタグで読み込みます。
Dateオブジェクトと比較して、この出力フォーマットの指定方法が一番楽だと感じました。
// locale指定
moment.locale('ja');
// momentオブジェクトの初期化
var today = moment();
// フォーマットを指定して出力
console.log(today.format('LLLL')); // -> 2016年6月5日午後7時54分 日曜日
特定の日付を設定
日付の設定方法はいくつかあります。
moment() と括弧内で指定を行わなかった場合は現在日時で初期化が行われ、逆に括弧内で年月のみ指定された場合は1日で初期が行われます。そのため、上2つと下2つの結果が異なってきます。
// locale指定
moment.locale('ja');
console.log(moment(new Date(2016, 6 -1)).format('LL')); // -> 2016年6月1日
console.log(moment({year:2016, month:6 -1}).format('LL')); // -> 2016年6月1日
console.log(moment().year(2016).month(6 -1).format('LL')); // -> 2016年6月5日
console.log(moment().set('year',2016).set('month',6 -1).format('LL')); // -> 2016年6月5日
最後に
すべての使い方を把握した訳ではないけれど、便利そうだなと思ったものをいくつか。 これら以外にも多くの関数が用意されている上に、タイムゾーンを扱うこともできるようです(タイムゾーンについては今回触れなかったので省略)。
// locale指定
moment.locale('ja');
// 指定した年月の日数を取得
console.log(moment(new Date(2016, 2 -1)).daysInMonth()); // -> 29
// 1月1日からの経過日数を取得
console.log(moment(new Date(2016, 6 -1, 5)).dayOfYear()); // -> 157
// 1月1日からの何週目か取得
console.log(moment(new Date(2016, 6 -1, 5)).weeksInYear()); // -> 53
