こんにちは、”はふぃ”です。

JavaScriptで日付に関する処理と言えばDateです。

month0から始まるなど若干クセはありますが、現在の日付を取得したり、単純な比較ならこれで十分でしょう。

しかし、ある日付が対象の期間内かどうかを判定したり、日付のフォーマット妥当性の判定などは処理が少し複雑になってしまいます。

そんな時に便利なのがMoment.jsです!

今回はMoment.jsで実現できる処理をいくつか例文付きで説明していきます。

Moment.jsとは?

Moment.js

  • ブラウザとNode.js(サーバーサイド)で利用できるようにデザインされている
  • npmを使ってインストールできる($ npm install moment
  • JavaScriptのDateオブジェクトをラップするオブジェクトを生成して、そのオブジェクトに日付処理を任せることが出来る

公式サイトは以下↓

https://momentjs.com/

動作確認環境

Moment.jsの処理を説明していく前に、気軽にMoment.jsの動作確認ができる環境を紹介します!

エンジニアならご存知の方も多いと思いますが、JSFiddleです。

JSFiddleは事前登録など一切不要でコードの動作確認ができるため、「この処理ってどういう挙動するんだろう?」というように軽く確認したい時に便利です。

また、これだけならJavaScriptの場合だとブラウザのコンソールを使っても動作確認ができるのでそっちの方が楽なのですが、JSFiddleは特定のライブラリ(Moment.jsのような)がボタン一つで気軽に使えるため今回のような場合には適切です。

動作確認の方法

1. JSFiddleにアクセス

2. 左サイドメニューのFiddle metaResoucesを開き、「moment」と入力します。するとサジェストが出てくるので、その中からmoment.jsを選択して+ボタンを押します。

3. 左下のJavaScriptを入力する枠に試したいmomentの処理を入力し、左上のRunボタンを押すことで実行できます。

momentでできること

任意の文字列をmomentデータとして認識

第二引数に任意のformatを入れることで、本来日付として認識できない文字列もmomentデータとして変換できます。

moment('2019|04|01') // invalid Date
moment('2019|04|01', 'YYYY|MM|DD') // Mon Apr 01 2019 00:00:00 GMT+0900

日付が正当かチェック

isValid()を使って入力された日付が正当かどうかバリデーション。

moment('2019-04-01').isValid() // true
moment('2019-04-32').isValid() // false

特定の値(月や日など)を取得

moment().millisecond() // ミリ秒
moment().second() // 秒
moment().minute() // 分
moment().hour() // 時
moment().date() // 日(1 ~ 31)
moment().dayOfYear() // 日(1 ~ 365)
moment().day() // 曜日(0:日, 1:月, 2:火, 3:水, 4:木, 5:金, 6:土)
moment().week() // 週
moment().month() // 月(0 ~ 11)
moment().year() // 年

最も未来(過去)の値を抽出

max()で最も未来、min()で最も過去の値を抽出します。

const arr = [
  moment('2019-01-01'),
  moment('2019-01-02'),
  moment('2019-12-01'),
  moment('2018-01-01')
]
moment.max(arr) // Sun Dec 01 2019 00:00:00 GMT+0900
moment.min(arr) // Mon Jan 01 2018 00:00:00 GMT+0900

日付の加減算

add()で加算、subtract()で減算を行います。なお、繋げて利用することも可能です。

const date = moment('2019-01-01')
date.add(1, 'years').add(2, 'months').add(3, 'days') // Wed Mar 04 2020 00:00:00 GMT+0900
date.subtract(1, 'years').subtract(2, 'months').subtract(3, 'days') // Sun Oct 29 2017 00:00:00 GMT+0900

フォーマット

const date = moment('2019-01-01')
date.format('YYYY/MM/DD') // 2019/01/01
date.format('YY/M/D') // 19/1/1

日付の差分

const a = moment('2019-01-01')
const b = moment('2019-01-30')
b.diff(a, 'days') // 29

const c = moment('2019-01-01')
const d = moment('2019-02-01')
d.diff(c, 'days') // 31

const e = moment('2018-01-01')
const f = moment('2019-10-01')
f.diff(e, 'years') // 1
f.diff(e, 'years', true) // 1.75
f.diff(e, 'months') // 21

日付の比較

a < bisBefore()a > bisAfter()a = bisSame()を使います。

さらにa <= bisSameOrBefore()a >= bisSameOrAfter()などもあります。

※ 第二引数はその項目の値で比較するのではなくその項目まで見て比較するの意味なので注意!

moment('2019-01-01').isBefore('2019-02-01') // true
moment('2019-01-01').isBefore('2019-02-01', 'years') // false
moment('2019-01-01').isBefore('2019-02-01', 'months') // true
moment('2019-02-01').isBefore('2019-01-10', 'days') // false
moment('2019-02-02').isAfter('2019-02-01') // true
moment('2019-01-01').isSame('2019-01-01') // true
moment('2019-01-02').isSameOrBefore('2019-01-03') // true
moment('2019-01-02').isSameOrBefore('2019-01-02') // true
moment('2019-01-02').isSameOrBefore('2019-01-01') // false
moment('2019-01-02').isSameOrAfter('2019-01-01') // true

期間内

第四引数には(, [), ]のいずれかを入力することで=のありなしを設定できます。

moment('2019-01-10').isBetween('2019-01-01', '2019-01-20') // true
moment('2019-01-10').isBetween('2019-01-01', undefined) // true
moment('2019-01-10').isBetween('2019-01-01', null) // false

moment('2019-10-30').isBetween('2019-10-30', '2019-12-30', null, '()') // false
moment('2019-10-30').isBetween('2019-10-30', '2019-12-30', null, '[)') // true
moment('2019-10-30').isBetween('2019-01-01', '2019-10-30', null, '()') // false
moment('2019-10-30').isBetween('2019-01-01', '2019-10-30', null, '(]') // true
moment('2019-10-30').isBetween('2019-10-30', '2019-10-30', null, '[]') // true

まとめ

厄介だったDateの比較処理なども簡単に実装できるので是非使ってみてください!

投稿者: はふぃ

若手のWEBフロントエンジニア。最近はバレーボールにハマってます!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA