Moment.jsの使い方を現役エンジニアが解説【初心者向け】

初心者向けにMoment.jsの使い方について現役エンジニアが解説しています。Moment.jsは、JavaScriptのDateクラスを包んで新しいオブジェクトにしたライブラリです。日付・時刻が扱いやすく日付や時刻のフォーマットも指定することが出来ます。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

Moment.jsの使い方について解説します。

実際のコードをもとに解説していきますので、理解を深めていきましょう。

また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

Moment.jsの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

Moment.jsとは

そのままでは少々扱いが難しいJavaScriptのdateオブジェクトをラップして、使いやすく便利にしてくれるモジュールになります。
 

Moment.jsで日付と時刻を操作する方法

基本的には、Dateオブジェクトの代わりにmoment()を呼び出す形になります。

 

//momentのインスタンスを作成

var mom = moment();

// 現在日時を取得

console.log(mom._d)

// Sun May 19 2019 10:19:28 GMT+0900 (日本標準時)

// 文字列から作成

var mom = moment('2019-05-19');

console.log(mom._d)

// Sun May 19 2019 00:00:00 GMT+0900 (日本標準時)

console.log(mom._i)

// "2019-05-19"

 

作成したmomentインスタンスの値を操作するには、以下の関数が使用できます。

 

mom.year
mom.month
mom.day // 曜日
mom.date
mom.hours
mom.minute
mom.second
mom.millisecond

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

各値を取得する

var mom = moment();

mom.year();  // 2019

mom.month(); // 4 (0始まり)

mom.date(); // 19

mom.day(); // 0 (0:日曜日、6:土曜日)

mom.hours(); // 10

mom.minute(); // 49

mom.second(); // 16

mom.millisecond(); // 733

 

日付の足し引き

//現在日付に6日加算する

mom.add(6, 'day');

console.log(mom._d)

// Sat May 25 2019 10:49:16 GMT+0900 (日本標準時)

 

//現在日付から6日減算する

mom.subtract(6, 'day');

console.log(mom._d)

// Sun May 19 2019 10:49:16 GMT+0900 (日本標準時)

 

2つの日付の差を取得する

var mom1 = moment('2019-05-19');

var mom2 = moment('2019-06-20');

mom1.diff(mom2); // -2764800000ms

mom1.diff(mom2, 'days'); // -32

 

筆者プロフィール

水野大輝(みずのたいき)
2014年より、某物流会社のシステム開発担当として入社。

未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

また、TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。

プログラミングの初心者でも受講可能です。Webサイトの表現の幅を広げたいという方はぜひご覧ください。

また、現役エンジニアから学べる無料のプログラミング体験会も実施しているので、ぜひ参加してみてください。