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",
});
よくある落とし穴
- **new Date("2024-03-15")**はUTCとしてパースされるが、**new Date("2024-03-15T00:00:00")**はローカル時間としてパースされる
getTimezoneOffset()は符号が反転した分単位のオフセットを返す(UTC-5は+300を返す)Dateには別のタイムゾーンに「変換」するメソッドがない — 代わりにIntl.DateTimeFormatを使用
ユースケース
Webアプリケーションに取り組むすべてのJavaScript開発者はタイムゾーンを正しく処理する必要があります。一般的なシナリオには、ユーザーのローカルタイムゾーンでのイベント時間表示、スケジューリングインターフェースの構築、予約システムでのタイムゾーン間変換、国際的な聴衆向けの日付フォーマット、バックエンドサービスのUTCでのタイムスタンプログ記録が含まれます。