日付を扱うJavascriptライブラリmoment.jsの使い方

2016-04-02 最終更新日:2016-04-03

今回はJavascriptライブラリのmoment.jsのご紹介です。⇒詳しくは公式サイトにてご確認ください現在のバージョンは2.12.0です。2016年4月現在

日付を取り扱うアプリケーションを使う場合は必須ですね、あまり使わない場合はdate関数を使っても良いのですが、日付の計算や今日が何曜日とか今年は閏年なのかとかこの日付は期間中の値なのかなど時間や日に関することならこのライブラリーに任せてしまいましょう。

カレンダーとか作る際にも役立ちそうですね。

それでは早速見ていきましょう。

インストール方法ですがサイトからダウンロードして使うかnpmやbowerなど使っても良いです。 moment.min.jsの方が軽くて良いのですがローカライズ版のmoment-with-locales.jsを使ってみます。英語出力以外に日本語環境が入っています。フランス語やイタリア語など他の言語も入っています。特に日本語出力をしない場合は普通にmoment.min.jsで良いと思います。

初期化方法からご紹介します。いろいろな初期化方法が有ります。

// ローカライズ
moment.locale('ja');

// 現在時刻
moment();
=> Sat Apr 02 2016 21:00:00 GMT+0900

// フォーマット指定
moment("2011-03-11 14:46", "YYYY-MM-DD HH:mm");
=> Fri Mar 11 2011 14:46:00 GMT+0900

// 配列
moment([2010, 1, 14, 15, 25, 50, 125]);
=> Sun Feb 14 2010 15:25:50 GMT+0900

// オブジェクト
moment({ y:2010, M:3, d:5, h:15, m:10, s:3, ms:123});
moment({ year :2010, month :3, day :5, hour :15, minute :10, second :3, millisecond :123});
=> Mon Apr 05 2010 15:10:03 GMT+0900

// unixタイムスタンプ
moment.unix(1318781876);
=> Mon Oct 17 2011 01:17:56 GMT+0900

次は出力です。様々なフォーマットが用意されています。

// ローカライズ
moment.locale('ja');

moment().format('YYYY-MM-DD HH:mm:ss');
=>2016-04-02 21:00:00

moment().format('Do');
=> 2日

moment().format('a');
=> 午後

moment().format('ddd');
=> 土

moment().format('dddd');
=>土曜日

指定日から今までの日にちを取得します。

moment([2000, 0, 1]).fromNow();
=> 16年前

moment("20110311", "YYYYMMDD").fromNow();
=> 5年前

指定日から指定日の日にちを取得

var a = moment([1976, 5, 23]);
var b = moment([2000, 0, 29]);
a.from(b)
=> 24年前

指定日から指定日が何日たったかを取得

var c = moment([2010, 3, 28]);
var d = moment([2012, 8, 29]);
c.to(d);
=> 2年後

各年月日の値を取得

//今月の日数
moment().daysInMonth();
=> 30

// 年
moment().year();
=> 2016

// 月 ※ 0〜11の値（始まりが0なので-1で計算）
moment().month();
=> 3

// 日
moment().date();
=> 2

// 週
moment().week();
=> 15

// 曜日番号
moment().day();
=> 6

// 曜日番号
moment().weekday();
=> 6

// 時
moment().hours();
=> 1

// 分
moment().minutes();
=> 16

// 秒
moment().seconds();
=> 50

// ミリ秒
moment().milliseconds();
=> 551

日付の存在チェック関数

moment([2010, 2, 29], 'YYYY-MM-DD').isValid();
=> false

moment([2016, 2, 29], 'YYYY-MM-DD').isValid();
=> true

配列形式とJSON形式の出力

// 配列
moment().toArray();
=> 2016,3,3,0,40,54,293

// JSON形式
moment().toJSON();
=> 2016-04-02T15:40:54.293Z

// オブジェクト形式
moment().toObject()
=>	{
		years: 2016
		months: 3
		date: 3,
		hours: 1,
		minutes: 53,
		seconds: 14,
		milliseconds: 600
	}

ローカライズ年月日出力

// ローカライズ
moment.locale('ja');
moment().format('LLLL');
=> 2016年4月2日午後9時00分 土曜日

momentオブジェクトが作成された後、入力のすべてが作成データとメソッドにアクセスすることができます。

moment("2013-01-02", "YYYY-MM-DD", true).creationData();
 =>	{
		input: "2013-01-02",
		format: "YYYY-MM-DD",
		locale: A,
		isUTC: false,
		strict: true
	}

ユニットの一部を指定する瞬間のオブジェクトを作成することができ、残りは現在の年、月、日、時間、分、秒、ミリ秒を何も渡されなかったときに0のデフォルト設定されます。

moment(15, "hh");
=> Sun Apr 03 2016 15:00:00 GMT+0900

moment(5, "DD");
=> Tue Apr 05 2016 00:00:00 GMT+0900

moment(1, "MM");
=> Fri Jan 01 2016 00:00:00 GMT+0900

与えられた瞬間インスタンスの最大（最も近い日）を返します。

var e = moment("2015-08-30", "YYYY-MM-DD");
var f = moment("2015-12-31", "YYYY-MM-DD");
moment.max(e, f);
=> Thu Dec 31 2015 00:00:00 GMT+0900

与えられた瞬間のインスタンスの最小（最も遠い日）を返します。

var g = moment("2015-08-30", "YYYY-MM-DD");
var h = moment("2015-12-31", "YYYY-MM-DD");
moment.min(g, h);
=> Sun Aug 30 2015 00:00:00 GMT+0900

時間を追加することで、元の時間を変更することができます。時間を追加するには、追加する時間のキー（years, y, quarters, Q, months, M, weeks, w, days, d, hours, h, minutes, m, seconds, s, milliseconds, ms）、追加したい量を渡します。

moment().add(7, 'days');
=> Sun Apr 10 2016 20:15:37 GMT+0900

moment().add(7, 'days').add(1, 'months'); // メソッドチェイン形式で
moment().add({days:7,months:1}); // オブジェクト形式で
=> Tue May 10 2016 20:15:37 GMT+0900

時間を減算することにより、元の時間を変更することが出来ます。時間を減算するには、追加の方法と同じ。

moment().subtract(7, 'days');
=> Sun Mar 27 2016 20:24:28 GMT+0900

moment().subtract({days:7,months:1});
=> Sat Feb 27 2016 20:24:28 GMT+0900

時間の単位を開始に設定することで、元の時間を変更します。

moment().startOf('year');  // 今年の1月1日午前0時00分に設定
=> Fri Jan 01 2016 00:00:00 GMT+0900

moment().startOf('month'); // 今月の最初の日の午前0時00分設定
=> Fri Apr 01 2016 00:00:00 GMT+0900

moment().startOf('quarter'); // 現在の四半期の最初、月の1日目、午前0:00に設定
=> Fri Apr 01 2016 00:00:00 GMT+0900

moment().startOf('week'); // この週の最初の日の午前0時00分に設定
=> Sun Apr 03 2016 00:00:00 GMT+0900

moment().startOf('isoWeek'); // ISO 8601によるこの週の最初の日の午前0時00分に設定
=> Mon Mar 28 2016 00:00:00 GMT+0900

moment().startOf('day'); // 今日の午前0時00分に設定
=> Sun Apr 03 2016 00:00:00 GMT+0900

moment().startOf('hour'); // 今すぐに0分0秒0ミリ秒に設定
=> Sun Apr 03 2016 21:00:00 GMT+0900

moment().startOf('minute'); // 今すぐに0秒0ミリ秒で設定
=> Sun Apr 03 2016 21:06:00 GMT+0900

moment().startOf('second'); // moment().milliseconds(0)と同じ
=> Sun Apr 03 2016 21:06:41 GMT+0900

時間の終わりを設定することにより、元の時間を変更します。上記の時間の開始の設定と同じ。

moment().endOf('year');
=> Sat Dec 31 2016 23:59:59 GMT+0900

moment().endOf('month');
=> Sat Apr 30 2016 23:59:59 GMT+0900

ある特定の時間と時間の差分を取得します。デフォルトではミリ秒の差で取得します。

var i = moment([2015, 10, 25]);
var j = moment([2015, 10, 26]);
j.diff(i)
=> 86400000

var k = moment([2016, 4, 25]);
var l = moment([2016, 4, 30]);
l.diff(k, 'days');
=> 5

タイムスタンプの取得・Unix タイムスタンプ (ミリ秒) valueOf() ・Unix タイムスタンプ (秒) unix()

moment().valueOf();
=> 1459687707403

moment().unix();
=> 1459687707

指定の時間の前かどうかを確認します。第2引数で年(year)月(month)日(day)を指定できます。

moment('2012-9-20').isBefore('2012-9-21');
=> true

moment('2012-9-20').isBefore('2012-12-31', 'year');
=> false

時間と時間の比較で同じかどうかを確認します。

moment('2016-4-2').isSame('2016-4-2');
=> true

moment('2010-10-20').isSame('2010-01-01', 'year');
=> true

特定の時間の後かどうか確認します。

moment('2013-6-20').isAfter('2013-6-19');
=> true

moment('2011-10-20').isAfter('2011-10-10', 'year');
=> false

特定の日が同じか前にあるか、どうかを確認します。

moment('2010-10-20').isSameOrBefore('2010-10-21');
=> true

特定の日が同じか後にあるか、どうかを確認します。

moment('2010-10-20').isSameOrAfter('2010-10-19');
=> true

特定の日がその期間内にあるかどうかを確認します。

moment('2010-10-20').isBetween('2010-10-19', '2010-10-25');
=> true

指定の年が閏年かどうかを確認します。

moment([2000]).isLeapYear();
=> true

moment([2001]).isLeapYear();
=> false

moment([2016]).isLeapYear();
=> true

moment([2100]).isLeapYear();
=> false