📔

JS 日付操作のライブラリ momentの使用

2022/06/18に公開

はじめに

Reactを触る案件があり、色々行っているのですが、わからないことが多く一つずつ調べながら作業をしております。
どこかまとまった時間で、基礎を学習する予定ではおりますが、
一旦Reactとは別で、Javascript系で学んだライブラリについて、アウトプットしていきます。

moment

JavaScriptの日付操作用のライブラリ。
Momentオブジェクトを生成できる。
※Dateオブジェクトを色々操作しやすくする。

作成方法

Dateオブジェクトから or 文字列から

const now = new Date
const isToday = moment(now)
// 直接momentの引数にDateクラスを入れても良い

or

day = moment('2022-05-01 09:00')

//引数を記載しないと、現在自国のオブジェクトが生成される
now = moment()

使用したメソッドなど

メソッドは調べれば色々出るかと思うのですが、今回私が使用したメソッドを記載します。

format

引数に指定する形に成形する

const date = moment()

moment(date).format('YYYY年MM月DD日')

// 出力すると
// 2022年05月01日 と表示される

加算 add

const date = moment()

deadlineDay = date.add(5, 'days')
// デッドラインを5日後に設定
// 'day'を'second'、'minutes'、'years'などに変えることも可能

比較 isSame/isAfter/isBefore

const date = moment()

    if(date.isSame('2022-05-01', 'day')){
      console.log('同じ日付')
    }
    
// date変数の今の日付(day)と、'2022-05-01'が同じかどうかを比較
// 'day'を'second'、'minutes'、'years'などに変えることも可能
// isSameをisAfterに変えれば、引数の日付が、変数dateより後か?を判別
// isBeforeはisAfterの逆

さいごに

LaravelでいうところのCarbonクラスのようなもの。
ReactとJSが、まだ整理できていないので、これってどっちのライブラリ?と思うことがまだ多いです。日々学習しながら整理していきます。

Discussion