JavaScriptの日付処理は面倒

これはいろいろなところで言われている。

JSのDateオブジェクトは使いにくい。

例えば１分後を計算するには

const date = new Date()
date.setMinutes(date.getMinutes() + 1)

長過ぎる。

このパターンならまだ良い。例えば１分１秒を加算なら・・・面倒だ。

Day.jsの登場

そこで最近人気が高いDay.jsの登場だ。

日付処理は大変なのでmoment.jsを使っているユーザーが多そうだがDay.jsに着目した。

とにかく軽いという点で急上昇しているライブラリらしい。

Vue.jsなどフロントエンドに実装する場合はデータ量はアクセス速度に影響するので軽いほうが良い。

2018年4月からなので比較的新しいライブラリだ。

npmtrendsで人気度を調べる

まだまだ有名ライブラリと比べると弱いが上昇速度は早い。

比べ物にならないぐらい軽い。

基本

まずはインストール

npm install dayjs

読み込み

var dayjs = require('dayjs')
import dayjs from 'dayjs' //es6

余談：ES6のプラグイン拡張方法

Dayjsは基本的にプラグインで拡張していくタイプのライブラリのようで基本機能で十分な性能を持っているが複雑な事をしようと思うとプラグインが必須になってくる。

ES6でプラグインを利用しようとするとMDULE NOT FOUNDにより設定できない。

どうやら拡張子.jsを指定しないとロード出来ないことが分かった。

import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc.js' //公式はここの拡張子なしになっている
dayjs.extend(utc)

import文を使った例も公式に挙げられているが総じて.jsが明記されていなかった。エラーの場合は試してもらいたい。

なお、今回は基本機能のみでプラグインを利用する機能に関しては省略している。

現在日時

現在時刻が入っているオブジェクトを取得する場合は

const date = dayjs()

これで良いが、これだとオブジェクトのままなのでconsole.logなどで確認できる形に変換する場合はformatを利用する。

dayjs().format()
// 2020-05-11T07:08:37+09:00

自動で自国の日付に変換される

上の例を見てもらえれば分かるが自動で日本標準時に変換される。

もしUTC等別のタイムゾーンを利用する場合はプラグインが必要。

format()の引数で表示形式を変更

dayjs('2019-01-25').format('[YYYYescape] YYYY-MM-DDTHH:mm:ssZ[Z]') 
// 'YYYYescape 2019-01-25T00:00:00-02:00Z'

このようにできる。指定できる文字列が複雑なのでここは公式の表をみると分かりやすい。

特定の日時

自分で日時を指定して渡す場合は次のようにする。これはnew Date()とそのまま合致する。

dayjs('2018-04-04T16:00:00.000Z')

※ISO 8601フォーマットというらしい。

これ以外のフォーマットはプラグインによって設定できる。

UNIXタイムスタンプ

UNIXタイムスタンプを取得するには少しだけ注意が必要。

unix()のメソッドを使う。

dayjs().unix()

基本的にはこれでUNIXタイムスタンプが取れるのだがこれは**「秒」**で出力される。

例えばDateオブジェクトと比較すると

console.log(new Date().getTime())
console.log(dayjs().unix())

//結果
//1589151487332
//1589151487

このようになるので注意。

ミリセカンドで取得したい場合はvalueOf()を使う。

dayjs().valueOf()

にする必要がある。次が例

const dt = new Date()
console.log(dt.getTime())
console.log(dayjs(dt).valueOf())

//結果が一致する
//1589151820824
//1589151820824

2つの時間の差を取る

diff()メソッドを使うが注意が必要。

まず大前提diff()は「ミリ秒が帰る」ということは覚えておく。

例えばAの時間＋1分がBの時間。つまりA＜Bの状態でdiff()してみる。

const A = dayjs('2020-05-10T00:00:00Z')
const B = dayjs('2020-05-10T00:01:00Z') //Bのほうが1分進んでいる。
console.log(
    A.diff(B)
)

//結果
//-60000

マイナスの結果が出た。

つまりA.diff(B)は A - B なのだ。

逆にすれば正の値になる。

時間をプラスする

先程は差を計算したが、Aに1分を足す計算はどうするのだろうか

次のようにadd()する。

const A = dayjs('2020-05-10T09:00:00+09:00')
console.log(A.format()) //プラスする前を表示
console.log(
    A.add(1, 'minute').format() //プラス後
)

//結果
//2020-05-10T09:00:00+09:00
//2020-05-10T09:01:00+09:00 //正しく1分プラスされている

次のようなコードは想定外の動作(プラスされていない)になる可能性があるため覚えておく。

const A = dayjs('2020-05-10T09:00:00+09:00')
console.log(A.format())
A.add(1, 'minute') //ここでプラスになった気でいると
console.log(
    A.format()
)

//結果
//2020-05-10T09:00:00+09:00
//2020-05-10T09:00:00+09:00 //プラスされていない

A.addはA自体の内容は変更せず、変更後の値を戻しているだけという点に注意。

またマイナスは同じ構文でsubtract()

時間を切り捨てる

例えばAに次の時間が入っているとする。

const A = dayjs(`2020-05-11T08:20:38+09:00`)

これが「何年何月何日の何時台？」を知りたい。

つまり分や秒は無視してしまいたい場合どうする。

これがStart of Timeという機能でメソッドはstartOf()を使う。

console.log(
	A.startOf('h').format()
)
//結果
//2020-05-11T08:00:00+09:00 //分と秒が00になった

startOfの引数を変えれば月や週など様々な設定で使用できる。

月末を知る

endOf()メソッドが用意されており、月末を知ることができる。

上のAにその使ってみると

console.log(A.endOf('month').format())
//2020-05-31T23:59:59+09:00

これもmonth以外でも使用できる。

特定の日時より前かどうかを判断する

isBefore()メソッドを使って指定した日時より前かどうかをtrue/falseで判断できる。

const A = dayjs(`2020-05-11T08:20:38+09:00`)
console.log(
    A.isBefore(dayjs('2011-01-01')) 
)
//結果
//false

Aから見ればこれはもう9年も前になるので当然beforeではない。falseとなる。

比較する日時を絞る

startOfのように第2引数で比較する日時を絞る事ができる。

const A = dayjs(`2020-05-11T08:20:38+09:00`) 
console.log(
    A.isBefore(dayjs('2020-05-11T08:20:38+09:00'), 'year') 
)
//結果
//false

このコードはよくわからないかもしれないが、まずAとisBeforeに入っている日時は全く同じである。

だがyearで絞っているのでこの比較対象は2020に対してAがisBeforeか聞いているコードになっている。

Aは2020年代ではあるが、2020年は超えているのでbeforeではないためfalseだ。

isBeforeを2021年にしてやればtrueとなる。

同じようなメソッドが複数あるので列挙しておく。それぞれ単語通りの動作だ。

• isSame
• isAfter

またこれ以外にもあるがプラグインが必要なので省略。

dayjsオブジェクトかどうかを調べる

すこし動作が変わるがisDayjs()メソッドは、それがdayjsのオブジェクトかどうかを判断できる。

月や日だけ取得する

DateオブジェクトのgetMonth()と同じで**「月」**だけ取得するには次のようにmonth()メソッドを利用する。

const A = dayjs(`2020-05-11`)
console.log(
    A.month()
)
//結果
//4

注意：実際の月 - 1

これはDateオブジェクトでも同様。実際の月-1の数字があらわれる点に注意。

1月の場合は「0」が帰る。

上では5月なので結果が「4」となっている。

同様に次も取得できる。

• second
• minute
• hour

月や日だけ変更する

2020-05-11を6月に変えて2020-06-11にするためには上のコードに引数を入れて次のようにすることもできる。

const A = dayjs(`2020-05-11T08:20:38+09:00`)
console.log(
    A.month(5).format()
)
//結果
//2020-06-11T08:20:38+09:00 //月だけ6月に変わった

これも同様に引数は**「月-1」である点に注意。またこれは足し算ではなく絶対値**を設定するコードなので間違えないように。

その他

プラグインで拡張することによってここで紹介しきれないかなりの機能追加が出来る模様。

とはいえ基本機能だけでも十分な性能と軽さであるためぜひとも使って欲しいライブラリだ。