【JavaScript】Moment.jsライブラリを使って日付データを扱う

以前、「【React】「react-big-calendar」ライブラリのカレンダーを日本語で表示する手順」という記事を投稿しましたが、その中で利用した Moment.js についてあまり触れていなかったので、簡単にまとめ。
こちらのライブラリを使えば、日付データをフォーマットしたり、○日後のような日付の計算を簡単に行うことができます。

公式サイトはこちらから。

Moment.js|Home
https://momentjs.com/

 

ライブラリのインストールは、npm で行いました。
下記のコマンドを実行します。

npm install moment --save

上記のコマンドを実行したら、あとは追加したいプロジェクトで、ライブラリをインポートするだけです。

私は React のプロジェクトで実行しましたので、下記のように書いて、プロジェクトにインポートしました。

import moment from 'moment';

で、私は日付データを 2020−07−22 のような形式で取得したかったので、下記のように記述しました。

const result = moment().format('YYYY-MM-DD');

日付データを取得するのに必要な処理はこれだけ!
求めたい日付のフォーマット形式も、一目でわかりやすいです。

私が素の JavaScript で全く同じ処理を書くと下記のように長くなってしまいますので、これはかなり便利です!

const date = new Date();

const year_str = date.getFullYear();
const month_str = date.getMonth() + 1;
const day_str = date.getDate();

const result = year_str + "-" + month_str + "-" + data_str;

…もしかしたら他に良い書き方があるかもしれませんが…。

Moment.js を使えば、コードもすっきりしますし、あと、おそらくいつかやらかすであろう、date.getMonth() に 1 を足し忘れる間違いも無くなります。
JavaScript で日付データを扱うなら是非導入をお勧めします!

 

以上、JavaScript で日付データを扱うときに便利なライブラリ Moment.js のご紹介でした。
ご参考になれば幸いです。

>株式会社シーポイントラボ

株式会社シーポイントラボ

TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:〒432-8003
   静岡県浜松市中央区和地山3-1-7
   浜松イノベーションキューブ 315
※ご来社の際はインターホンで「316」をお呼びください

CTR IMG