Moment.jsで日付操作(比較, 差分, フォーマット)

2022/11/13

JavaScriptの日付操作用ライブラリである「Moment.js」の利用方法を確認します。「Moment.js」は、Dateオブジェクトをラップして、日付操作に関する様々な機能を提供します。豊富な機能が提供されていますが、利用頻度の高い機能について取り上げます。

注意

momentjsは、メンテナンスモードに入っており、代替ライブラリへの移行が推奨されています。
https://momentjs.com/docs/#/-project-status/

代替ライブラリの1つである、Day.jsについて以下ページで取り上げています。

momentをインストール

momentをインストールします。

// yarnの場合
yarn add moment

// npmの場合
npm install moment --save

インストールできました。

$ yarn list --depth=0 | grep moment
├─ moment@2.24.0

オブジェクト生成

読み込み

インストールしたモジュールを読み込みます。

const moment = require('moment')

または、以下のように読み込みます。

import moment from 'moment'

生成

コンストラクタ引数を指定しない場合、現在日時のMomentオブジェクトが生成されます。日時を表す文字列 や Dateオブジェクト からも生成できます。

now = moment()
now.format()  // '2019-02-12T00:58:09+09:00'

day = moment('2019-01-10 07:30:20')
day.format()  // '2019-01-10T07:30:20+09:00'

day2 = moment(new Date())
day2.format()  // '2019-02-12T01:02:06+09:00'

日時の加算減算
( add subtract )

日時の加算には addメソッド を利用します。

// 年 → 「years or y」 
moment('2019-01-10 07:30:20').add(2, 'y').format()  // '2021-01-10T07:30:20+09:00'

// 月 → 「months or M」 
moment('2019-01-10 07:30:20').add(3, 'M').format()  // '2019-04-10T07:30:20+09:00'

// 週 → 「weeks or w」 
moment('2019-01-10 07:30:20').add(4, 'w').format()  // '2019-02-07T07:30:20+09:00'

// 日 → 「days or d」 
moment('2019-01-10 07:30:20').add(4, 'd').format()  // '2019-01-14T07:30:20+09:00'

// 時間 → 「hours or h」 
moment('2019-01-10 07:30:20').add(4, 'h').format()  // '2019-01-10T11:30:20+09:00'

// 分 → 「minutes or m」 
moment('2019-01-10 07:30:20').add(4, 'm').format()  // '2019-01-10T07:34:20+09:00'

// 秒 → 「seconds or s」 
moment('2019-01-10 07:30:20').add(4, 's').format()  // '2019-01-10T07:30:24+09:00'

日時の減算には subtractメソッド を利用します。

moment('2019-01-10 07:30:20').subtract(4, 'years').format()  // '2015-01-10T07:30:20+09:00'

始まり、終わり
( startOf endOf )

startOfメソッド endOfメソッド を利用すると、時間単位ごとの 始まり と 終わり を取得できます。

moment('2019-01-10 07:30:20').startOf('year').format()  // '2019-01-01T00:00:00+09:00'
moment('2019-01-10 07:30:20').endOf('year').format()    // '2019-12-31T23:59:59+09:00'

moment('2019-01-10 07:30:20').startOf('months').format()    // '2019-01-01T00:00:00+09:00'
moment('2019-01-10 07:30:20').endOf('months').format()      // '2019-01-31T23:59:59+09:00'

moment('2019-01-10 07:30:20').startOf('weeks').format() // '2019-01-06T00:00:00+09:00'
moment('2019-01-10 07:30:20').endOf('weeks').format()   // '2019-01-12T23:59:59+09:00'

moment('2019-01-10 07:30:20').startOf('days').format()  // '2019-01-10T00:00:00+09:00'
moment('2019-01-10 07:30:20').endOf('days').format()    // '2019-01-10T23:59:59+09:00'

moment('2019-01-10 07:30:20').startOf('hours').format() // '2019-01-10T07:00:00+09:00'
moment('2019-01-10 07:30:20').endOf('hours').format()   // '2019-01-10T07:59:59+09:00'

コピー
( clone )

日付の加算など行うと、最初に設定した日時が不明になります。

a = moment('2019-01-10 07:30:20')
a.format()  // '2019-01-10T07:30:20+09:00'
a.add(3, 'd')
a.format()  // '2019-01-13T07:30:20+09:00'

元の日時を保持しておきたい場合、cloneメソッド でコピーを作成します。

b = moment('2019-01-10 07:30:20')
b.format()  // '2019-01-10T07:30:20+09:00'
b_clone = b.clone()
b_clone.add(3, 'd')
b.format()          // '2019-01-10T07:30:20+09:00'
b_clone.format()    // '2019-01-13T07:30:20+09:00'

他の日時との差分
( diff )

dateTo = moment('2018-09-01 06:00:00')
dateFrom = moment('2018-12-01 12:00:00')

// ミリ秒を返します
dateFrom.diff(dateTo)  // 7884000000
dateFrom.diff(dateTo) / (24 * 60 * 60 * 1000)  // 91.25

// 第2引数で単位を指定できます。
dateFrom.diff(dateTo, 'months')   // 3
dateFrom.diff(dateTo, 'days')     // 91
dateFrom.diff(dateTo, 'hours')    // 2190

// 第3引数で小数の調整ができます。
dateFrom.diff(dateTo, 'days', true)  // 91.25
dateFrom.diff(dateTo, 'days', false) // 91

他の日時との比較
( isAfter isBefore isBetween )

a = moment('2018-09-01 06:00:00')
b = moment('2018-10-01 06:00:00')
c = moment('2018-11-01 06:00:00')

b.isAfter(a)  // true
b.isAfter(b)  // false
b.isAfter(c)  // false

b.isSame(a)  // false
b.isSame(b)  // true
b.isSame(c)  // false

b.isBefore(a)  // false
b.isBefore(b)  // false
b.isBefore(c)  // true

b.isSameOrAfter(a)  // true
b.isSameOrAfter(b)  // true
b.isSameOrAfter(c)  // false

b.isSameOrBefore(a)  // false
b.isSameOrBefore(b)  // true
b.isSameOrBefore(c)  // true

b.isBetween(a, c)  // true
c.isBetween(a, b)  // false

フォーマット
( format )

a = moment('2019-01-10 17:30:20')
a.format('YYYY-MM-DD HH:mm:ss')  // '2019-01-10 17:30:20'

// Unixタイムスタンプ
a.format('X')  // '1547109020'

// 月
a.format('M')       // '1'
a.format('MM')      // '01'
a.format('MMM')     // 'Jan'
a.format('MMMM')    // 'January'

// 曜日
a.format('d')       // '4'
a.format('dd')      // 'Th'
a.format('ddd')     // 'Thu'
a.format('dddd')    // 'Thursday'

詳しい指定方法は、https://momentjs.com/docs/#/displaying/format/ にて確認できます。

言語設定
( locale )

曜日などの表示を日本語表記するには localeメソッド を利用します。

moment.locale('ja')
a = moment('2019-01-10 17:30:20')

// 月
a.format('M')       // '1'
a.format('MM')      // '01'
a.format('MMM')     // '1月'
a.format('MMMM')    // '一月'

// 曜日
a.format('d')       // '4'
a.format('dd')      // '木'
a.format('ddd')     // '木'
a.format('dddd')    // '木曜日'

タイムゾーンの設定

moment-timezoneをインストール

タイムゾーンの設定を行うには、 moment-timezone というプラグインが別途必要です。インストールします。

// yarnの場合
yarn add moment-timezone

// npmの場合
npm install moment-timezone --save

インストールできました。

$ yarn list --depth=0 | grep moment-timezone
├─ moment-timezone@0.5.23

デフォルトのタイムゾーンを設定

デフォルトのタイムゾーンを設定するには、tz.setDefaultメソッド を利用します

const moment = require('moment')
require('moment-timezone')

moment.tz.setDefault('Asia/Tokyo')
moment('2019-01-10 07:30:20').format()  // '2019-01-10T07:30:20+09:00'

moment.tz.setDefault('America/Los_Angeles')
moment('2019-01-10 07:30:20').format()  // '2019-01-10T07:30:20-08:00'

moment.tz.setDefault('Europe/London')
moment('2019-01-10 07:30:20').format()  // '2019-01-10T07:30:20Z'

タイムゾーン変更

タイムゾーンを変更するには、tzメソッド を利用します

const moment = require('moment')
require('moment-timezone')

tokyo = moment.tz('2019-01-10 07:30:20', 'Asia/Tokyo')
losAngeles = tokyo.clone().tz('America/Los_Angeles')
london = tokyo.clone().tz('Europe/London')

tokyo.format()       // '2019-01-10T07:30:20+09:00'
losAngeles.format()  // '2019-01-09T14:30:20-08:00'
london.format()      // '2019-01-09T22:30:20Z'