さてさて、前々回に全217件！Carbonで時間操作する実例という記事を書いたのですが、思いのほかそれまで知らなかった便利なメソッドや記述方法があることがわかりました。

そこで、時間・日付つながりということで今回はクライアントサイド（つまり、JavaScript）の時間管理パッケージ「Moment.js」についてまとめることにしました。

あまり長くなってもいけませんので、まずは「日付フォーマット」です。今後もMoment.jsのGetterやSetterなどその他の便利な記述についても記事を公開していきますのでお楽しみに。

実行環境について

Moment.js: バージョン 2.22.2（日本語対応コードも読み込んでいるものとします）
CDNを使ってMoment.jsを使う場合は以下のようになります。

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

 

基本的な日付フォーマット

年を４桁で取得する（例： 2018）

moment().format('YYYY'); // 2018

※ただし、４桁より少ない場合は「0010」のようにゼロが補完され、さらに、西暦10000年を越えた場合は「10000」と４桁ではなくなります。

年を下２桁で取得する（例： 18）

moment().format('YY'); // 18

年をISO 8601形式で取得する（例： 2018）

moment().format('Y'); // 2018

「YYYY」フォーマットと似ていますが、桁は関係なくそのままの数字を表示します。例えば、西暦10年なら「10」が返ってきます。ただし、10000年を越えると「+10000」とプラス文字がついて返ってくることに注意してください。

月を取得する（例： 8）

moment().format('M'); // 8

取得できる月は、「1」〜「12」となります。

※ちなみに「08」のように必ず２桁で取得したい場合は、「MM」フォーマットを使いましょう

月を序数で取得する（例： 8）

moment().format('Mo'); // 8

※この日付フォーマットは、「1st」「2nd」「15th」など日本語にはない序数表記を取得するものです。そのため、日本語対応コードを利用している場合は「M」フォーマットと同じになります。また、「Do」フォーマットは「＊日」になるのに対し、「Mo」は数字だけしか取得できないので注意が必要です。

月を２桁で取得する（例： 08）

moment().format('MM'); // 08

取得できる月は、「01」〜「12」となります。

※ゼロで２桁にしたくない場合は、「M」フォーマットを使いましょう。

月を日本語表記で取得する（例： 8月）

moment().format('MMMM'); // 8月

※ちなみに、このフォーマットは英語表記では例えば「August」と省略形式ではないフル表記となります。ただし、日本語では通常「8月」のみしか表記が存在しないため「MMM」フォーマットと結果は同じになります。

月を日本語表記で取得する（例： 8月）

moment().format('MMM'); // 8月

※英語表記では、「Aug」など省略された月名を返すフォーマットですが、日本語には月の省略形式が存在しないため、結果は「MMMM」フォーマットと同じになります。

日にちを取得する（例： 8）

moment().format('D'); // 8

※「08」のように２桁で日にちを取得する場合は「DD」フォーマットを使ってください。

日にちを２桁で取得する（例： 08）

moment().format('DD'); // 08

※「8」のようにゼロで２桁にしたくない場合は「D」フォーマットを使ってください。

日にちを日本語で取得する（例： 8日）

moment().format('Do'); // 8日

時間を24時間形式で取得する（例： 8, 20）

moment().format('H'); // 8

※もし「08」のように２桁にしたい場合は、「HH」フォーマットを、「0」時を「24」時としたい場合は、「k」フォーマットを使ってください。

時間を２桁の24時間形式で取得する（例： 08, 20）

moment().format('HH'); // 08

※もし「8」のように２桁にしたくない場合は、「H」フォーマットを、「00」時を「24」時としたい場合は、「kk」フォーマットを使ってください。

時間を12時間形式で取得する（例： 8）

moment().format('h'); // 8

※もし「08」のように２桁にしたい場合は、「hh」フォーマットをを使ってください。

時間を２桁の12時間形式で取得する（例： 08）

moment().format('hh'); // 08

※もし「8」のように２桁にしたくない場合は、「h」フォーマットをを使ってください。

時間を「24時」を含む24時間形式で取得する（例： 8, 24）

moment().format('k'); // 8

※「k」フォーマットは、「0」時が存在せず「24」時として扱われます。そのため、「0」時を使いたい場合は「H」フォーマットを使ってください。

時間を「24時」を含む2桁の24時間形式で取得する（例： 08, 24）

moment().format('kk'); // 08

※「kk」フォーマットは、「00」時が存在せず「24」時として扱われます。そのため、「00」時を使いたい場合は「HH」フォーマットを使ってください。

分を取得する（例： 8）

moment().format('m'); // 8

※「08」のように2桁の分を取得したい場合は、「mm」フォーマットを使ってください。

分を2桁で取得する（例： 08）

moment().format('mm'); // 08

※「8」のようにゼロで補完しない分を取得したい場合は、「m」フォーマットを使ってください。

秒を取得する（例： 8）

moment().format('s'); // 8

※「08」のように2桁で秒を取得する場合は、「ss」フォーマットを使ってください。
※小文字の「s」です。

秒を2桁で取得する（例： 08）

moment().format('ss'); // 08

※「8」のようにゼロで補完しない秒を取得する場合は、「s」フォーマットを使ってください。
※小文字の「s」です。

小数点以下の秒を取得する（例： 8）

moment().format('S'); // 8

※「08」のように2桁で秒を取得する場合は、「SS」フォーマットを使ってください。
※大文字の「S」です。

小数点以下の秒を2桁で取得する（例： 08）

moment().format('SS'); // 08

※「8」のようにゼロで補完しない秒を取得する場合は、「S」フォーマットを使ってください。
※大文字の「S」です。

年の何日目かを取得する（例： 63）

moment().format('DDD'); // 63（3月4日）

※もし「63日」のように日本語表記で取得する場合は「DDDo」フォーマットを、「060」のように３桁で取得する場合は「DDDD」フォーマットを使ってください。

年の何日目かを３桁で取得する（例： 063）

moment().format('DDDD'); // 063（3月4日）

年の何日目かを日本語表記で取得する（例： 63日）

moment().format('DDDo'); // 63日（3月4日）

曜日番号を取得する（例： 3）

moment().format('d'); // 3（水曜日）

曜日番号は、

• 日曜日　・・・　０
• 月曜日　・・・　１
• 火曜日　・・・　２
• 水曜日　・・・　３
• 木曜日　・・・　４
• 金曜日　・・・　５
• 土曜日　・・・　６

となります。

曜日番号を日本語表記で取得する（例： 3日）

moment().format('do'); // 3日

※曜日番号の詳細は「d」フォーマットをご覧ください。

曜日を日本語表記で取得する（例： 水）

moment().format('dd'); // 水

※「火曜日」のようなフル表記にする場合は「dddd」フォーマットを使ってください。
※ちなみに英語環境では「Su」など２文字の表記となります。

日本用の曜日番号を取得する（例： 3）

moment().format('e'); // 3

曜日が日曜から始まるのか、月曜から始まるのかが地域によって違っている（例えば「fi」は１から始まる）ため、もし言語による切り替えが必要な場合は「e」フォーマットを使うといいでしょう。

つまり、以下の２パターンが自動的に切り替わります。

• ０〜６（日〜土）　・・・　日本など
• １〜７（月〜日）　・・・　フランスなど

ISOの曜日番号を取得する（例： 3）

moment().format('E'); // 3

１〜７（月曜〜日曜）で曜日番号を取得します。

曜日を日本語表記で取得する（例： 水）

moment().format('ddd'); // 水

※「火曜日」のようなフル表記にする場合は「dddd」フォーマットを使ってください。
※ちなみに英語環境では「Sun」など３文字の表記となりますが、日本語環境では「dd」フォーマットと同じです。

曜日を日本語表記で取得する（例： 水曜日）

moment().format('dddd'); // 水曜日

タイムスタンプを取得する（例： 1534876557）

moment().format('X'); // 1534876557

タイムスタンプをミリ秒で取得する（例： 1534876557047）

moment().format('x'); // 1534876557047

タイムゾーンを取得する（例： +09:00）

moment().format('Z'); // +09:00

タイムゾーンを取得する（例： +0900）

moment().format('ZZ'); // +0900

午前／午後を取得する（例： 午前）

moment().format('a'); // 午前

※英語環境では「am/pm」（小文字）が切り替わります。

午前／午後を取得する（例： 午前）

moment().format('A'); // 午前

※英語環境では「AM/PM」（大文字）が切り替わります。

年の何週目かを取得する（例： 8）

moment().format('w'); // 8

※「08」のように２桁で取得したい場合は「ww」フォーマットを使ってください。

年の何週目かを２桁で取得する（例： 08）

moment().format('ww'); // 08

※「8」のように２桁ではない形式で取得したい場合は「w」フォーマットを使ってください。

年の何週目かを序数で取得する（例： 8）

moment().format('wo'); // 8

※英語環境では「8th」など序数表記になりますが、日本語では「w」フォーマットと同じになります。

ISO形式で年の何週目かを取得する（例： 8）

moment().format('W'); // 8

※「08」のように２桁で取得したい場合は「WW」フォーマットを使ってください。

ISO形式で年の何週目かを２桁で取得する（例： 08）

moment().format('WW'); // 08

※「8」のように２桁ではない形式で取得したい場合は「W」フォーマットを使ってください。

ISO形式で年の何週目かを序数で取得する（例： 8）

moment().format('Wo'); // 8

※英語環境では「8th」など序数表記になりますが、日本語では「W」フォーマットと同じになります。

四半期の何番目かを取得する（例： 3）

moment().format('Q'); // 3

つまり、

• 1月1日〜3月31日　・・・　１
• 4月1日〜6月30日　・・・　２
• 7月1日〜9月30日　・・・　３
• 10月1日〜12月31日　・・・　４

となります。

四半期の何番目かを序数で取得する（例： 3）

moment().format('Qo'); // 3

※英語表記では3rdとなりますが、日本語設定をしている場合は「Q」フォーマットと同じになります。

week-year（週年）を４桁で取得する（例： 2018）

moment().format('gggg')); // 2018

week-yearとは、週がいつ始まるかによって年が決まる考え方で、例えば以下のように2020年12月27日の年は、2021年になります。

moment('2020-12-27').format('gggg'); // 2021

week-year（週年）を２桁で取得する（例： 18）

moment().format('gg'); // 18

※week-yearについての説明は、「gggg」フォーマットをご覧ください。

ISO形式のweek-year（週年）を４桁で取得する（例： 2018）

moment().format('GGGG'); // 2018

※week-yearについての説明は、「gggg」フォーマットをご覧ください。

ISO形式のweek-year（週年）を２桁で取得する（例： 18）

moment().format('GG'); // 18

※week-yearについての説明は、「gggg」フォーマットをご覧ください。

ローカライズされたフォーマット

年月日を取得する（例： 2018/08/25）

moment().format('L'); // 2018/08/25

※英語環境では「08/22/2018」となります。

年月日を取得する（例： 2018/08/25）

moment().format('l'); // 2018/08/25

※英語環境では「8/22/2018」となりますが、日本語環境では「L」フォーマットと同じです。
※小文字の「L」です。

年月日を日本語表記で取得する（例： 2018年8月22日）

moment().format('LL'); // 2018年8月22日

※英語環境では「August 22, 2018」となります。

年月日を日本語表記で取得する（例： 2018年8月22日）

moment().format('ll'); // 2018年8月22日

※英語環境では「Aug 22, 2018」となりますが日本語環境では、「LL」フォーマットと同じです。
※小文字の「L」です。

年月日・時分を日本語表記で取得する（例： 2018年8月22日 08:12）

moment().format('LLL'); // 2018年8月22日 08:12

※英語環境では、「August 22, 2018 4:13 AM」となります。

年月日・時分を日本語表記で取得する（例： 2018年8月22日 08:12）

moment().format('lll'); // 2018年8月22日 08:12

※英語環境では、「Aug 22, 2018 4:13 AM」となりますが、日本語環境では「LLL」フォーマットと同じです。
※小文字の「L」です。

年月日・曜日・時分を日本語表記で取得する（例： 2018年8月22日 水曜日 08:15）

moment().format('LLLL'); // 2018年8月22日 水曜日 04:15

※曜日を省略形にしたい場合は「llll」フォーマットを使ってください。

年月日・曜日・時分を日本語表記で取得する（例： 2018年8月22日(水) 04:15）

moment().format('llll'); // 2018年8月22日(水) 04:15

※曜日をフル表記にしたい場合は「LLLL」フォーマットを使ってください。
※小文字の「L」です。

時・分を取得する（例： 08:58）

moment().format('LT'); // 08:58

※英語環境では「8:58 AM」となります。

時・分・秒を取得する（例： 08:58:05）

moment().format('LTS'); // 08:58:05

※英語環境では「8:58:05 AM」となります。

ちなみに

format()を利用して取得した値は全て文字列（String）になります。

おわりに

さすがはJavaScriptで時間管理をするならMoment.jsといってもいいぐらいシンプルかつ痒いところに手が届くパッケージだと再確認しました。

ただ、一点今回の記事を書くにあたって気になったのは、途中でも書きましたが、「Do」は日本語表記にしてくれるのに、「Mo」は数字のみが取得されるといったイレギュラーな結果が発生することです。

おそらくは言語形態の違いからくるのでしょうが、個人的にはあまり「*o」フォーマットは特別な理由が無い場合は使うべきではないのかな、と感じました。（イレギュラーなので毎回調べないといけなくなるため。日本語表記のフォーマットは他にもありますしね）

ということで、今回はMoment.jsの日付フォーマットにフォーカスして記事を書いてみました。

みなさんの役に立ちましたら嬉しいです。

ではでは！

 

 

開発のご依頼お待ちしております 😊✨ どうぞよろしくお願いいたします！
開発効率を上げるための機材・まとめ