【JavaScript】Dateオブジェクトとタイムゾーンと規格について
はじめに
この記事の概要
こんにちは、株式会社TOKOSのスギタです！
今回はJavaScriptで時間(Date)を扱う際の基礎について紹介します。
Dateを扱う際、何かしらのライブラリを使用すると思います。
ライブラリを使用する前にDateの概要を知ることにより、ライブラリの恩恵を理解できると思います！
またDateの概要を知ることにより、受けとったDateを適切に扱えるようになります。
対象読者
- フロントエンドエンジニアの方
- 初学者向け
この記事で扱う内容、扱わない内容
この記事で扱う内容
- Dateオブジェクトについて
- Dateの国際規格や表示について
この記事で扱わない内容
- Dateを扱うライブラリについて
Dateオブジェクトの基礎
値の取得と設定
まずは基礎であるDateオブジェクトのおさらいを行いましょう。
// 現在の日時でDateオブジェクトを作成
const now = new Date()
// Sun Sep 08 2024 20:14:46 GMT+0900 (日本標準時)Dateオブジェクトから新しいインスタンスを生成することにより現在の日時が取得できます。
Dateオブジェクトには様々なメソッドが存在しております。
主要メソッドを紹介します。
下記はgetメソッドです。
// 現在の日時でDateオブジェクトを作成
const date = new Date()
// Sun Sep 08 2024 20:14:46 GMT+0900 (日本標準時)
console.log(date.getFullYear()) // 2024
console.log(date.getMonth()) // 8 (9月)月を取得（0-11の値）
console.log(date.getDate()) // 8
console.log(date.getDay()) // 0 (日曜日)（0-6の値）
console.log(date.getHours()) // 12
console.log(date.getMinutes()) // 34
console.log(date.getSeconds()) // 56
console.log(date.getTime()) // 1725822896000 (Unix時間の開始時点からのミリ秒数).get〇〇とすることにより指定した値を取得できます。
.getTime()で取得できるUnix時間については後程説明します。
下記は取得したDateをフォーマットした例です。
const date = new Date()
const year = date.getFullYear()
const month = String(date.getMonth() + 1)
const day = String(date.getDate())
console.log(`${year}/${month}/${day}`)
// 2024/9/8このようにフォーマットする際などに使用します。
またよく行う例として文字列メソッドの.padStart()を使用して月と日を2桁表記にします。
.padStart(桁数, 先頭につける文字列)
例 : "5".padStart(2, "0")
// 05月の「9」を「09」に、日の「8」を「08」にフォーマットします。
const date = new Date()
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, "0")
const day = String(date.getDate()).padStart(2, "0")
console.log(`${year}/${month}/${day}`)
// 2024/09/08値を設定したい場合はsetメソッドを使用します。
set〇〇で値の設定が可能になります。
const date = new Date()
date.setFullYear(2025)
date.setMonth(0) // 1月に設定
date.setDate(15)
date.setHours(15)
date.setMinutes(30)
date.setSeconds(45)
console.log(date)
// Wed Jan 15 2025 15:30:45 GMT+0900 (日本標準時)Dateの加算・減算・差分・比較
取得したDateオブジェクトに対してgetメソッド、setメソッドを使用することで計算できます。
まずは加算の例です。
const date = new Date()
// Sun Sep 8 2024 20:59:07 GMT+0900 (日本標準時)
// 7日後
date.setDate(date.getDate() + 7)
console.log(date)
// Sun Sep 15 2024 20:59:07 GMT+0900 (日本標準時)このようにgetメソッドで取得した値に加算し、setメソッドで設定しています。
減算も同様です。
const date = new Date()
// Sun Sep 8 2024 20:59:07 GMT+0900 (日本標準時)
// 7日前
date.setDate(date.getDate() - 7)
console.log(date)
// Sun Sep 01 2024 20:59:07 GMT+0900 (日本標準時)次は日数の差分を出す計算です。
このようにDate同士で計算させることも可能です。
const date1 = new Date("2024-09-01")
// Sun Sep 01 2024 09:00:00 GMT+0900 (日本標準時)
const date2 = new Date("2024-09-15")
//Sun Sep 15 2024 09:00:00 GMT+0900 (日本標準時)
const diffTime = Math.abs(date2 - date1)
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
console.log(diffDays)
// 14このようにミリ秒で扱って計算させることで差分を出すことが可能です。
また比較して真偽値を返すことも可能です。
const date1 = new Date("2024-09-01")
// Sun Sep 01 2024 09:00:00 GMT+0900 (日本標準時)
const date2 = new Date("2024-09-15")
//Sun Sep 15 2024 09:00:00 GMT+0900 (日本標準時)
console.log(date1 < date2) // true
console.log(date1 > date2) // false
console.log(date1.getTime() === date2.getTime()) // falseタイムゾーンについて
ここからはDateを扱う際に皆さん悩むであろうタイムゾーンと規格の概要の紹介です。
タイムゾーンとは同じ標準時を用いる地域全体を指します。
タイムゾーンは世界で主要な24のタイムゾーンが存在しています。
日本は日本標準時のタイムゾーンのためあまり意識することはないと思います。
標準時はそれぞれUTC(協定世界時)からの偏差で表されています。
少しマニアックな話になりますがUTCはCoordinated Universal Timeの略称になっています。
UTCはグリニッジ子午線（経度0度の本初子午線）上の時刻を基準としています。
下記はUTC表記の例です。
const dateUTC = new Date()
console.log(dateUTC)
// Sun Sep 01 2024 00:00:00 GMTまた日本標準時をJSTといいます。
JSTはJapan Standard Timeの略称です。
JSTはUTC偏差+9:00になっています。
下記はJST表記の例です。
const dateJST = new Date()
console.log(dateJST)
// Sun Sep 01 2024 09:00:00 GMT+0900 (日本標準時)GMT+0900に注目してください。
GMTはGreenwich Mean Timeの略称です。
和訳するとグリニッジ標準時になります。
グリニッジ標準時はグリニッジ子午線の標準時を指します。
つまりGMT=UTCとなっており偏差+9時間ということでJSTを表現しています。
先ほどDateオブジェクトのインスタンスを生成(new Date())した際に取得できるDateの標準時は日本標準時に変換されています。
正確にはデバイスの設定で設定してあるタイムゾーンに自動で変換されます。
主要都市とJSTの偏差は下記です。
- ニューヨーク（EST）: JST-14時間
- ロンドン（GMT/BST）: JST-9時間（冬）/ JST-8時間（夏）
- シドニー（AEST）: JST-1時間
規格について
ここからはDateの規格について紹介します。
Dateを表示するにあたり様々な規格があります。
主要な規格を紹介します。
ISO 8601
ISO 8601は、日付と時刻の表記に関する国際規格です。
特徴
- 年月日の順序: YYYY-MM-DD
- 時刻表記: HH:mm:ss
- 日付と時刻の結合: YYYY-MM-DDTHH:mm:ss
- タイムゾーン表記: Z（UTC）または±hh:mm（オフセット）
下記はUTCとJSTの表示例です。
表記の最後にZとついていた場合UTC時間を表しています。
- 2024-09-08T12:34:56Z（UTC時間）
- 2024-09-08T21:34:56+09:00（JST時間）
UNIX時間（エポック秒）
UNIX時間は、1970年1月1日00:00:00 UTCからの経過秒数で時刻を表現します。
特徴
- 単一の数値で日時を表現
- タイムゾーン情報を含まない（常にUTC基準）
- 2038年問題（32ビット符号付き整数の上限）に注意
例
- 1725753600（2024-09-08T00:00:00Z）
先ほど紹介したDateオブジェクトの.getTime()メソッドはUNIX時間を取得できます。
RFC 2822
電子メールのタイムスタンプ形式として広く使用されています。
特徴
- 人間が読みやすい形式
- 曜日、日、月、年、時刻、タイムゾーンの順
例
- Sun, 08 Sep 2024 12:34:56 +0000
new Date()でインスタンスを生成した際の規格とは違うので注意してください。
JavaScriptの規格について
JavaScriptのDateオブジェクトは上記で紹介した規格ではなくECMAScriptが定めた形式になっており注意が必要です。
例
- Wed Sep 08 2024 21:34:56 GMT+0900 (日本標準時)
構成要素
- 曜日: 3文字の省略形（Wed）
- 月: 3文字の省略形（Sep）
- 日: 1-2桁の数字（08）
- 年: 4桁の数字（2024）
- 時間: 24時間形式（21:34:56）
- タイムゾーンオフセット: GMTからの差（GMT+0900）
- タイムゾーン名: 括弧内に表示（日本標準時）
タイムゾーンの変換と規格の変換
ここからはDateオブジェクトのよく使用する規格やタイムゾーンの変換の例を紹介します。
const date = new Date()
// Sun Sep 08 2024 22:21:45 GMT+0900 (日本標準時)
// UTC時間に変換
console.log(date.toUTCString())
// Sun, 08 Sep 2024 13:21:45 GMT
// ISO 8601に変換
console.log(date.toISOString())
// 2024-09-08T13:21:45.012Z
// ローカル時間に変換
console.log(date.toLocaleString())
// 2024/9/8 22:21:45
// ローカル時間の日付部分のみを取得
console.log(date.toLocaleDateString())
// 2024/9/8
// ローカル時間の時間部分のみを取得
console.log(date.toLocaleTimeString())
// 22:21:45
// 特定のタイムゾーンに変換
console.log(date.toLocaleString("ja-JP", { timeZone: "Asia/Tokyo" }))
// 2024/9/8 22:21:45このように様々な規格やタイムゾーンに変換することが可能です。
UNIX時間を扱う際の例です。
const date = new Date()
// DateからUNIX時間に変換
const dateTimeToUnixTime = Math.floor(date.getTime() / 1000)
console.log(dateTimeToUnixTime)
// 1725802329
// UNIX時間からDateに変換
const unixTimeToDate = new Date(dateTimeToUnixTime * 1000)
console.log(unixTimeToDate)
// Sun Sep 08 2024 22:32:09 GMT+0900 (日本標準時)さいごに
今回はDateオブジェクトとタイムゾーンや規格について紹介しました。
やはりDateを扱う場合はライブラリに任せたほうが考慮事項が少なく安全だと思いました！
今現在TemporalというDateを扱う標準化ライブラリの話も進んでいる(2024年9月現在)みたいなのでいつかはライブラリを使用しなくてもDateを扱えるようになるかもしれません。
興味ある方は下記を参照してみてください！
Temporal documentation
tc39.esこの記事を書いた人
