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

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

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

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

 

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

 

 

 

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 (日本標準時)

 

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

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サイトの表現の幅を広げたいという方はぜひご覧ください。

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