【JavaScript】Date関数での日付処理まとめ

こんにちは、あっきー(IwswAkht)です。

JavaScriptでよく使うけど忘れがちなDateオブジェクトの処理についてまとめます。

Dateオブジェクトから今日、明日、昨日、月末、月初など任意の日付を取得したいけど、実装方法がわからない、ついつい取得の仕方を忘れてしまうなどのかたに向けて早見表として活用していただけるような記事になれば幸いです。

※JavaScriptは以降jsと略して表記します。

さいしょに
本日の日付を取得
1. 日付を年月日時分秒ごとに取得
2. 本日の曜日を取得
日付の加算減算【指定日の取得】
日付を0埋めする
指定した書式に日付文字列をフォーマットする
日付を比較する
日付の差分を求める
文字列変換
UNIXタイムスタンプ
ライブラリ
さいごに

さいしょに

jsの標準のデータ型にはdate型が存在しないので組み込みのDateオブジェクトを利用することで日付を表現できます。

Dateオブジェクトの生成には、基本的に以下のようにコンストラクターを経由する必要があります。

JavaScript

new Date();
new Date('2021/01/01');

1 2	new Date(); new Date('2021/01/01');

基本的な宣言の方法を確認したところでいろいろな方法での日付の取得の仕方を確認していきましょう。

本日の日付を取得

本日の日付を取得するにはnew Date()で取得できます。

取得したら、getFullYear()、getMonth()、getDate()の関数を用いて、それぞれ年月日を取得できますので取得したいフォーマットで文字列を連結させることで表現可能です。

See the Pen
js-本日の日付 by 岩澤輝人 (@rmtgjoam)
on CodePen.

日付を年月日時分秒ごとに取得

先ほどのサンプルで本日の日付を取得するサンプルで年月日を取得して表示しました。

jsのDateオブジェクトでは年月日以外にも時分秒ミリ秒までの単位で時間を取得するためのメンバメソッドが用意されています。以下対応表になります。

メソッド	概要
getFullYear()	年（4桁）
getMonth()	月（0〜11）
getDate()	日（1〜31）
getHours()	時（0〜23）
getMinutes()	分（0〜59）
getSeconds()	秒（0〜59）
getMilliseconds()	ミリ秒（0〜999）

サンプルは以下になります。

See the Pen
js-日付年月日時分秒ミリ秒 by 岩澤輝人 (@rmtgjoam)
on CodePen.

本日の曜日を取得

曜日を表示するためのメンバメソッドもDateオブジェクトでは用意されています。

getDay()メソッドを利用することで、0から6の数値が返却されます。0が日曜日で6が土曜日に対応しています。

あとは返り値の数値に対応する曜日の配列をで紐づければ実現可能です。

See the Pen
js-曜日を取得 by 岩澤輝人 (@rmtgjoam)
on CodePen.

日付の加算減算【指定日の取得】

指定した日付を取得するためには先ほどの項目で利用したget*系のメソッドと組み合わせてset*メソッドを利用することで実現可能です。

以下対応表になります。

メソッド	概要
setFullYear()	年（4桁）
setMonth()	月（0〜11）
setDate()	日（1〜31）
setHours()	時（0〜23）
setMinutes()	分（0〜59）
setSeconds()	秒（0〜59）
setMilliseconds()	ミリ秒（0〜999）

組み合わせながらいろいろな日付の指定方法をサンプルで確認していきます。

明日を取得

明日を取得するにはgetDate()に1を加えた値をsetDate()の引数に与えてあげれば表現できます。

setDate()を利用することで月末に1日加えた場合に翌月の1日の日付を取得することができます。

See the Pen
oNZvNMx by 岩澤輝人 (@rmtgjoam)
on CodePen.

昨日を取得

昨日を取得する場合は明日の取得でgetDate()に1加えたのに対し、-1してあげればオッケーです。

See the Pen
js-yesterday by 岩澤輝人 (@rmtgjoam)
on CodePen.

月末を取得

月末を取得するには1ヶ月加えて翌月にしてsetDate(0)で取得します。

今月末でなく指定した月の最終日を知りたい場合はsetMonth()で指定した月を取得し、同様にsetDate(0)してあげることで表現可能です。

See the Pen
js-end-of-month by 岩澤輝人 (@rmtgjoam)
on CodePen.

月初を取得

月初の取得はsetDate(1)してあげるだけでオッケーです。

See the Pen
js-begine-of-month by 岩澤輝人 (@rmtgjoam)
on CodePen.

日付を0埋めする

日付を2021/1/1ではなく2021/01/01のように0埋めするためには以下のように先頭に0を加えてslice()メソッドを利用する方法で表現可能です。

ターミナル

 ('0' + {date.month or day}).slice(-2);

1	('0' + {date.month or day}).slice(-2);

slice()は、文字列の中から、指定した開始位置から終了位置までの部分を返却するメソッドです。-2を指定することで右端から数えて2文字をとり出せます。

つまり、10日以上の場合は010の右端から2桁で10日、10日以下の場合は09の右端から2桁で09日にすることができるということです。

以下サンプルになります。

See the Pen
js-date-0padding by 岩澤輝人 (@rmtgjoam)
on CodePen.

指定した書式に日付文字列をフォーマットする

日付のフォーマットをyyyy/MM/ddやyyyy年MM月dd日で表示したり、曜日を表示したいなどサービスによっていろいろな表示形式が求められるかと思います。

そんな時は関数化しておいて自由なフォーマットに変更できるよう拡張性高くしておくと便利ですよね。

以下のサンプルで大体の日付フォーマットでの表現が可能ですので参考になれば幸いです。

See the Pen
js-format by 岩澤輝人 (@rmtgjoam)
on CodePen.

日付を比較する

JavaScriptのDateオブジェクトでは<、<=、>、>= などの比較演算子を利用することができます。

しかし、===のような日付の一致処理を行う場合はできません。
Dateオブジェクトは言葉の通りオブジェクトなので、異なるオブジェクトは値が一致していても同じと判断することはありません。

細かい説明は割愛しますが、プログラミングを続ければ自ずと値が一緒でもオブジェクトが違うという問題は必ずやってきますので知らなかった方は頭の片隅に置いておいてください。

ではどうやって日付の一致を行うのか。結論から言いますとgetTime()メソッドを利用することです。

このメソッドは日付を数字に(UNIXタイムスタンプ)変換するメソッドです。
数字にすれば===で一致を比較できることはできそうですね。

基本的に一致意外でも日付を比較演算で比較する時は、このgetTime()メソッドでの比較をするといいと思います。

それではいくつかサンプルを載せておきます。

See the Pen
js-date-compare by 岩澤輝人 (@rmtgjoam)
on CodePen.

日付の差分を求める

getTime()メソッドを利用することで日付Aと日付Bの差分を求めることができます。

定型的な差分計算ですので決まったコードとして覚えておくといざ必要になった時にサッと使えて便利です。

See the Pen
js-date-diff by 岩澤輝人 (@rmtgjoam)
on CodePen.

文字列変換

毎回getFullYear()とかgetMonth()したりめんどくさい。一発で出来んのかという方向けにstringにキャストするメンバメソッドもDateオブジェクトでは搭載されています。

ただ表示形式は決まってしまいますので標準の表示形式で大丈夫という方のみ利用するメソッドという感じです。

メソッド一覧は以下になります。

メソッド	概要
toUTCString()	協定世界時を文字列で取得
toLocaleString()	ローカル時を文字列で取得
toDateString()	日付部分を文字列で取得
toTimeString()	時刻部分を文字列で取得
toLocaleDateString()	ローカルの日付を文字列で取得
toLocaleTimeString()	ローカルの時刻を文字列で取得
toString()	日時を文字列として取得
toJSON()	日時をJson文字列で取得