JavaScriptを利用した時間の取り扱いを紹介!西暦和暦の変換からDateオブジェクトについて解説
はじめに
このページでは、JavaScriptを使って時間を取り扱う方法について紹介をします。
JavaScriptのDateオブジェクト
Date
オブジェクトは、JavaScriptのビルドインオブジェクトの一つです。インスタンス化することにより、特定の時刻を表すオブジェクトを作成することができます。
JavaScript MDNにはDateオブジェクトについて以下のように記載があります。
JavaScript の
Date
オブジェクトは、単一の瞬間の時刻をプラットフォームに依存しない形式で表します。Date
オブジェクトは協定世界時 (UTC) の 1970 年 1 月 1 日からの経過ミリ秒数を表すNumber
の値を含んでいます。
より詳細に知りたい方は、以下のページをご確認ください。
Dateオブジェクトを作成する
Date
オブジェクトを作成するためには、プログラム内で new Date()
を呼び出します。
new Date() // Sun Nov 19 2023 14:33:52 GMT+0900 (日本標準時)
引数に何も指定をしないと、現在の位置情報をもとにした時刻が出力されます。
また、newをつけない Date()
でも現在の時刻を取得できます。その場合は、返り値はString型となることに注意が必要です。
console.log(typeof(new Date()));
// object
console.log(typeof(Date()));
// string
Date()
を呼び出した際の返り値は、 new Date()
に対して文字列変換を施したものとなります。
console.log(Date() === new Date().toString());
// true
JavaScriptでDateオブジェクトを利用して日付・時間・曜日を取得する方法
今紹介した new Date()
を利用して、現在もしくは特定の日の日付、時間、曜日を取得する方法を紹介していきます。
日付を取得する
日付を取得するためには、 getDate()
メソッドを使用します。
console.log(new Date().getDate());
// 19(現在の日付を出力)
この日付は、位置情報を元に取得をするため、UTCで2023年1月1日0:00のときに世界各地で実施をすると、出力は以下のとおりです。
- 日本(UTC+9):1
- イギリス(UTC+0):1
- アメリカ(東部標準時を採用、UTC-5):31
このように、出力にブレが生じることに注意が必要です。
また、月を取得するためには、 getMonth()
メソッドを使用します。
console.log(new Date().getMonth());
// 10(2023年11月19日)
出力される結果は、1月を0として0~11で返されることに注意が必要です。
時間を取得する
次に、時間を取得する方法を紹介します。時間を取得するには、 getHours()
メソッドを使用します。
console.log(new Date().getHours());
// 14
こちらも先の getDate()
と同様で位置情報を元に出力結果が決まります。
なお、分を出力するには getMinites()
メソッドを使用します。
曜日を取得する
次に、曜日を取得する方法を紹介します。曜日を取得するためには、 getDay()
メソッドを使用します。
console.log(new Date().getDay());
// 0
出力結果は、日曜日を0として0~6の数値で出力されることに注意が必要です。
JavaScriptで日付の締切を設定する方法
Webサイトやアプリを開発していく中で、ある日付を基準として機能を切り替えたいことがあるかもしれません。キャンペーンの申込や電話受付の時間などがありますね。
そんなときに、以下のようなコードを作成することで一応は機能の切り替えができます。
const deadlineDate = new Date(2023, 9, 1);
// 2023年10月1日を締め切りとする(2023年9月30日まではOKとする)
const now = new Date();
if (deadlineDate > now) {
console.log("OK");
} else {
console.log("NO");
}
// NO
deadlineDate
により、2023年10月1日0:00を設定して現在時刻との大小関係を比較して許可するかどうかを判定しています。
しかし、このコードには、致命的な欠陥があります。それは、時差を考慮していないということです。
日本に住んでいる人は、だめなのにイギリスの人はOKのような自体が生じてしまうため、以下のような処理を施すべきです。
// UTCで締切日時を設定
const deadlineDateUTC = new Date(Date.UTC(2023, 9, 1, -9));
// 現在のUTC日時を取得
const nowUTC = new Date(Date.now());
if (deadlineDateUTC > nowUTC) {
console.log("OK");
} else {
console.log("NO");
}
deadlineDateUTC
によりUTC基準で時刻を設定をします。(今回の場合だと、Sun Oct 01 2023 09:00:00 GMT+0900 (日本標準時)
が返される)
同様にして、 nowUTC
でUTC基準の現在時刻を取得してきて比較を行っています。
JavaScriptで和暦表記で日付を取得する
最後に、和暦で日付を取得する方法を紹介します。和暦で日付を取得するためには、 toLocaleDateString()
メソッドを使用します。
const getWareki = (today) => {
return today.toLocaleDateString("ja-JP-u-ca-Japanese", { era: "long" });
};
console.log(getWareki(new Date()));
// 令和5/11/19
国ごとの時刻書式に合わせて出力してくれる toLocalxxxString()
メソッドです。
詳細を知りたい方は以下のサイトを参考にしてください。
最後に
いかがでしたでしょうか。Webサイトなどは全世界に向けて公開をしているため日付・時刻についてシビアにならないと不具合が出てしまうので気をつけていきたいですね!