今回は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
まだまだ便利な関数がたくさんありますので公式ドキュメントをご覧ください。詳しく載っています。この記事はドキュメントの中で役立ちそうな物をピックアップして日本語にして載せております。
∞Tadashi Suyama∞
あまりcgiは使いたくないのですが使わざるを得ない時があります。仕方なく設置するのですがエラーが出ちゃうんです。なんか知らないけど。 ありがちなのがパーミッションとかパスが問題になるんのですけど...
19 Feb 2022
今回はワードプレス専用のアドレス変更方法をご紹介します。ワードプレスのアドレスはwordpress@~という形で送られてきますが変更可能です。 functions.phpに記載するのですがプラグ...
12 Feb 2022
Sassの遷移は多すぎる今日この頃 Ruby Sass→LibSass→DartSass(いまここ) Ruby SassはSassの最初の実装でしたが、2019年3月26日にサポートが終了しま...
22 Jan 2022
明けましておめでとうございます。 本年も何卒よろしくお願いいたします。 年末年始は雪でしたね、そこまで積もっていませんが。 {% include adsensearticle.html...
10 Jan 2022
最近はjQueryよりvueで書いた方が楽ではないかと思い学習中です。 そもそもVuejsはドキュメントが日本語対応なので試しやすいし情報も豊富なので学習しやすいです。 3大フレームワークと呼...
02 May 2021
ウェブエンジニアの須山のブログです。
WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。