ってことたまにありませんか?
製作中の不動産等シミュレーターでも表を月毎に表示したかったので、便利なライブラリを探していました。
今回紹介するのは Moment.js です。
通常、JavaScriptで時間を計算する場合、 Date クラスを使用します
// new Date で時間を管理する Date オブジェクトを作る
var date = new Date()
// new Date( 年 , 月 , 日 , 時 , 分 , 秒 , ミリ秒 ) でもOK
var today_date = new Date(2019, 6, 9, 10, 10, 30, 0)
そして、時間を表示するには、それぞれget~~()というメソッドを使用して年月日などを取得していきます。
今回は 「2019/06/09 10時10分30秒」という文字列を作ってみます。
// Dateオブジェクトを作る
var today = new Date(2019, 6, 9, 10, 10, 30, 0)
// 各種パラメータを取ってくる
var today_year = today.getFullYear();
var today_month = today.getMonth();
var today_date = today.getDate();
var today_hours = today.getHours();
var today_minutes = today.getMinutes();
var today_seconds = today.getSeconds();
// フォーマットを整える
var output = today_year+"/"+today_month+"/"+today_date+" "+today_hours+"時"+today_minutes+"分"+today_seconds+"秒";
console.log(output) // → 2019/06/09 10時10分30秒
年月日などをそれぞれひとつずつ集めなければならないのがとても面倒です。
では、Moment.jsで同じ表示を作ってみます
// moment関数を使ってオブジェクトを作る
var today = moment("20190609101030", "YYYYMMDDhms");
// フォーマットを整える
var output = today.format('YYYY/MM/DD h時m分s秒');
console.log(output) // → 2019/06/09 10時10分30秒
凄くスッキリしてます。
これだけ短く掛けると不具合やコードリーディングの時間が減りますね。
短く書けるだけではありません。
不動産シミュレーターでは以下のような使い方をしています。
for (let i = 0; i < 20; i++) { let month = moment().add(i, 'months').format('YYYY-MM'); console.log(month); }




moment().add(i, 'months')
で特定の数だけ時間を操作できます。
今回は月毎の表の表示にこちらのコードを使っています。
「12ヶ月ごとに年を1年ずつ増やす」…なんてことも必要ありません。
その他にも、
moment().subtract(1, 'days').calendar(); // 1日戻す
moment().startOf('hour').fromNow(); // 今は前の時間から何分経ったか
など、細かい時間操作が出来ます。
まとめ
・JavaScriptで時間を扱うのは大変
・Moment.jsは便利
以上です。
では!
参考
JavaScriptプログラミング講座 日付/時間について
https://hakuhin.jp/js/date.html
コメント