【JavaScript】Dateオブジェクトとタイムゾーンと規格について

はじめに
Dateオブジェクトの基礎
- 値の取得と設定
- 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 now = 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時間については後程説明します。

.getMonth()と.getDay()について

getMonth()で取得する値は0~11の値になっています。
0が1月になっており、11が12月になることに気を付けてください。
getDay()で取得する値は0~6の値になっています。

0が日曜日になっており、6が土曜日になることに気を付けてください。

下記は取得した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 (日本標準時)

このようにsetメソッドを使用してからgetメソッドで取得した値に対して加算しています。

減算も同様です。

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の略称になっています。
和訳するとグリニッジ子午線(経度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時間

タイムゾーンのポイント

国際的なアプリケーションだとDBなどはUTCで扱うことが多くなるため注意が必要です。

規格について

ここからはDateの規格について紹介します。

Dateを表示するにあたり様々な規格があります。
主要な規格を紹介します。

ISO 8061

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ビット符号付き整数の上限）に注意

例

1662566400（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

公式ドキュメント