JavaScriptでのタイムゾーン処理 — Intl APIとベストプラクティス

Intl.DateTimeFormat API、Dateオブジェクトメソッド、および今後のTemporal APIを使用したJavaScriptでのタイムゾーン処理方法を学びます。実践的なコード例を含みます。

Development

詳細な説明

JavaScriptでのタイムゾーン処理

JavaScriptのネイティブDateオブジェクトはタイムゾーンサポートが限られていますが、Intl APIと今後のTemporal APIは強力なタイムゾーン処理機能を提供します。

DateオブジェクトとUTC

JavaScript DateはUnixエポック(1970年1月1日UTC)からのミリ秒として時間を保存します。内部的にはタイムゾーンの概念がなく、すべての値はUTCです。

const date = new Date("2024-03-15T14:30:00Z");
date.getTime();        // 1710513000000(常にUTC)
date.toISOString();    // "2024-03-15T14:30:00.000Z"(常にUTC)

Intl.DateTimeFormat — 標準的なアプローチ

Intl.DateTimeFormatは、特定のタイムゾーンで日付を表示するための組み込みの方法です:

const date = new Date("2024-03-15T14:30:00Z");

// 東京で表示
new Intl.DateTimeFormat("en-US", {
  timeZone: "Asia/Tokyo",
  dateStyle: "full",
  timeStyle: "long",
}).format(date);
// "Friday, March 15, 2024 at 11:30:00 PM JST"

サポートされている全タイムゾーンの取得

// モダンブラウザで利用可能(Chrome 99+、Firefox 93+、Safari 15.4+)
const allTimezones = Intl.supportedValuesOf("timeZone");
console.log(allTimezones.length);  // 400以上のIANAタイムゾーンID

Temporal API(Stage 3提案)

今後のTemporal APIはファーストクラスのタイムゾーンサポートを提供します:

// 将来のAPI(まだすべてのブラウザで利用可能ではない)
const zdt = Temporal.ZonedDateTime.from({
  year: 2024, month: 3, day: 15,
  hour: 14, minute: 30,
  timeZone: "America/New_York",
});

よくある落とし穴

  1. **new Date("2024-03-15")**はUTCとしてパースされるが、**new Date("2024-03-15T00:00:00")**はローカル時間としてパースされる
  2. getTimezoneOffset()は符号が反転した分単位のオフセットを返す(UTC-5は+300を返す)
  3. Dateには別のタイムゾーンに「変換」するメソッドがない — 代わりにIntl.DateTimeFormatを使用

ユースケース

Webアプリケーションに取り組むすべてのJavaScript開発者はタイムゾーンを正しく処理する必要があります。一般的なシナリオには、ユーザーのローカルタイムゾーンでのイベント時間表示、スケジューリングインターフェースの構築、予約システムでのタイムゾーン間変換、国際的な聴衆向けの日付フォーマット、バックエンドサービスのUTCでのタイムスタンプログ記録が含まれます。

Try It — Timezone Reference

フルツールを開く