Intl.DateTimeFormatでタイムゾーン指定表示の基本と実践
Intl.DateTimeFormatは「表示するロケール」と「表示するタイムゾーン」を明示できるので、どこで実行しても同じ地域時刻で整形できます。日時の保存はUTC、表示はユーザーや仕様に合わせてTZ指定、が定石です。
構文と基本ポイント
const d = new Date(); // どこで作っても内部はUTC基準の瞬間
const s = new Intl.DateTimeFormat("en-US", { timeZone: "UTC" }).format(d);
console.log(s); // 例: "12/5/2025"
- timeZone: “UTC”, “Asia/Tokyo”, “America/New_York” のようなIANAタイムゾーン名を指定。
- ロケール: 言語・地域の並びや数字、AM/PM表記などを制御。
- 出力: 指定TZでの「人間向け表示」。Dateの実体は変わらない。
すぐ使えるテンプレート集
東京時間（JST）で日付・時刻を表示
const d = new Date();
const fmt = new Intl.DateTimeFormat("ja-JP", {
timeZone: "Asia/Tokyo",
year: "numeric", month: "2-digit", day: "2-digit",
hour: "2-digit", minute: "2-digit", second: "2-digit",
hourCycle: "h23", // 24時間制
});
console.log(fmt.format(d)); // 例: "2025/12/05 09:52:00"
UTCでの日時を表示（サーバーログ向き）
const d = new Date();
console.log(new Intl.DateTimeFormat("en-GB", {
timeZone: "UTC",
year: "numeric", month: "2-digit", day: "2-digit",
hour: "2-digit", minute: "2-digit", second: "2-digit",
hourCycle: "h23",
}).format(d)); // 例: "05/12/2025, 00:52:00"
米国ロケール＋ニューヨーク時間（夏時間の自動対応）
const d = new Date("2025-06-15T12:00:00Z"); // UTC正午
console.log(new Intl.DateTimeFormat("en-US", {
timeZone: "America/New_York",
dateStyle: "medium", timeStyle: "short",
}).format(d)); // 例: "Jun 15, 2025, 8:00 AM"
dateStyle/timeStyleで手早く（プリセット）
const d = new Date();
console.log(new Intl.DateTimeFormat("ja-JP", {
timeZone: "Asia/Tokyo",
dateStyle: "full", timeStyle: "long",
}).format(d)); // 例: "2025年12月5日金曜日 9:52:00 JST"
formatToPartsで柔軟に組み立て
const d = new Date();
const parts = new Intl.DateTimeFormat("ja-JP", {
timeZone: "Asia/Tokyo",
year: "numeric", month: "2-digit", day: "2-digit",
hour: "2-digit", minute: "2-digit", second: "2-digit",
hourCycle: "h23",
}).formatToParts(d);
// パーツから "YYYY-MM-DD HH:mm:ss (TZ略称)" を自作
const get = t => parts.find(p => p.type === t)?.value;
const tz = parts.find(p => p.type === "timeZoneName")?.value ?? "";
console.log(`${get("year")}-${get("month")}-${get("day")} ${get("hour")}:${get("minute")}:${get("second")} ${tz}`);
- ポイント: 区切りや強調表示を自由に設計できる。timeZoneNameを含めれば「JST」「GMT」などが取れる環境もある。
実務での使い分けパターン
- 保存用: ISO（UTC）を保存（
new Date().toISOString()）。タイムゾーンによるぶれを避ける。 - 表示用: Intl.DateTimeFormatでロケール・timeZoneを明示。ユーザー地域や仕様に合わせて固定。
- 24時間制/AMPMの統一:
hourCycle: "h23"で24時間制、"h12"でAM/PM。ロケールに左右されたくないときに指定。 - 大量表示: フォーマッタを使い回す（インスタンス作成はコストがあるため共通化）。
const makeFmt = (locale, opts) => new Intl.DateTimeFormat(locale, { timeZone: "Asia/Tokyo", ...opts });
const fmtShort = makeFmt("ja-JP", { dateStyle: "short", timeStyle: "short", hourCycle: "h23" });
console.log(fmtShort.format(new Date()));
よくある落とし穴と対策
- 「Dateを別TZへ変換する」誤解: Dateは瞬間（UTC基準）を保持。Intlは「表示時に」指定TZへ換算するだけ。
- 対策: 保存はUTC、表示でTZ変換。計算（差分・加算）はUTCベースで行い、最後に整形。
- ブラウザ依存の略称表示: timeZoneNameの表記（JST/GMTなど）は環境差がある。
- 対策: 文字列に依存しない設計にするか、必要なら自前の表示文言を持つ。
- ロケール未指定で表示がブレる: 実行環境のロケール・TZに依存。
- 対策: 必ず
localeとtimeZoneを明示。
- 対策: 必ず
- 大量レンダリングでの性能: 毎回Intlインスタンスを作ると遅い。
- 対策: フォーマッタをキャッシュ・共有。
練習問題（手を動かして覚える）
- 1. UTCと東京時間で同じDateを比較表示
const d = new Date();
const show = (tz) => new Intl.DateTimeFormat("ja-JP", {
timeZone: tz, dateStyle: "medium", timeStyle: "medium", hourCycle: "h23",
}).format(d);
console.log("UTC :", show("UTC"));
console.log("Tokyo:", show("Asia/Tokyo"));
- 2. ニューヨーク時間のAM/PM表記で整形
const d = new Date();
console.log(new Intl.DateTimeFormat("en-US", {
timeZone: "America/New_York",
year: "numeric", month: "short", day: "2-digit",
hour: "2-digit", minute: "2-digit", second: "2-digit",
hourCycle: "h12",
}).format(d));
- 3. formatToPartsでYYYY-MM-DD HH:mm（JST固定）を自作
const parts = new Intl.DateTimeFormat("ja-JP", {
timeZone: "Asia/Tokyo",
year: "numeric", month: "2-digit", day: "2-digit",
hour: "2-digit", minute: "2-digit", hourCycle: "h23",
}).formatToParts(new Date());
const val = t => parts.find(p => p.type === t)?.value;
console.log(`${val("year")}-${val("month")}-${val("day")} ${val("hour")}:${val("minute")}`);
直感的な指針
- 保存はUTC、表示はIntlでTZ指定。
- ロケールとhourCycleで見た目を固定。
- 独自レイアウトはformatToPartsでパーツ組み。
- フォーマッタは使い回して性能と一貫性を確保。