PST や Pacific Standard Time のようなタイムゾーン名を表示する方法

はじめに

ユーザーに時刻を表示する際、タイムゾーンを表示することで、その時刻がローカルタイムゾーンなのか別のタイムゾーンなのかを理解する助けになります。3:00 PM PSTと予定されている会議は、ユーザーが太平洋時間から変換する必要があることを示しています。PSTというラベルがなければ、ユーザーはどのタイムゾーンが適用されるのか推測するしかありません。

タイムゾーンは複数の形式で表示できます。PSTのような省略名、Pacific Standard Timeのような完全名、またはGMT-8のようなオフセットベースの形式を表示できます。異なる形式は異なる目的に役立ちます。省略形はスペースを節約しますが、曖昧になる可能性があります。完全名は明確ですが、より多くのスペースを取ります。オフセットは、特定のゾーン名よりも時間差の方が重要な場合に役立ちます。

JavaScriptはIntl.DateTimeFormat APIを提供し、タイムゾーン名を自動的に表示します。このレッスンでは、タイムゾーン名とは何か、標準時と夏時間の間でどのように変化するか、そして異なる形式でどのように表示するかを説明します。

タイムゾーン名の形式を理解する

タイムゾーン名はいくつかの異なる形式で表示され、それぞれ異なる特性を持っています。

短い名前はPST、EST、またはJSTのような略語を使用します。これらはスペースを節約しますが、曖昧になる可能性があります。CSTは北米の中部標準時、中国標準時、またはキューバ標準時を意味する可能性があります。

長い名前はPacific Standard Time、Eastern Standard Time、またはJapan Standard Timeのようにタイムゾーン名をフルスペルで表記します。これらは曖昧さを避けますが、より多くのスペースを取ります。

一般的な名前は、現在標準時間または夏時間のどちらを採用しているかを指定せずにタイムゾーンを参照します。PTは太平洋時間を意味し、日付によってPSTまたはPDTのいずれかになります。

オフセット形式はUTCからの時間差を示します。GMT-8はグリニッジ標準時より8時間遅れていることを意味します。GMT-05:00は5時間遅れで、時間と分をコロンで区切っています。

選択する形式はユースケースによって異なります。スペースが限られていて曖昧さが許容される場合は短い名前を使用してください。スペースよりも明確さが重要な場合は長い名前を使用してください。UTCとの数値的関係を示す必要がある場合はオフセットを使用してください。

Intl.DateTimeFormat を使用してタイムゾーン名を表示する

Intl.DateTimeFormat コンストラクタは、フォーマットされた日付と時刻にタイムゾーン名がどのように表示されるかを制御する timeZoneName オプションを受け付けます。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "1/15/2025, 7:30 AM PST"

これは、America/Los_Angeles タイムゾーンで時間を表示する米国英語用のフォーマッタを作成します。timeZoneName: 'short' オプションは、出力に省略されたタイムゾーン名を追加します。結果には末尾に PST が含まれます。

timeZone オプションはフォーマット時に使用するタイムゾーンを設定します。timeZoneName オプションはタイムゾーン名を表示するかどうか、およびその表示方法を制御します。これら2つのオプションは連携して動作します。timeZone は変換を決定し、timeZoneName はラベルを決定します。

短いタイムゾーン名の表示

timeZoneName: 'short' オプションは省略されたタイムゾーン名を表示します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "1/15/2025, 10:30 AM EST"

短い形式では、東部標準時間に EST が生成されます。この形式はコンパクトで、表、リスト、またはその他のスペースが限られたレイアウトでうまく機能します。

異なるタイムゾーンでは異なる略語が生成されます。

const date = new Date('2025-01-15T15:30:00Z');

const formatters = [
  { timeZone: 'America/Los_Angeles', name: 'Pacific' },
  { timeZone: 'America/Chicago', name: 'Central' },
  { timeZone: 'America/New_York', name: 'Eastern' },
  { timeZone: 'Europe/London', name: 'London' },
  { timeZone: 'Asia/Tokyo', name: 'Tokyo' }
];

formatters.forEach(({ timeZone, name }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${name}: ${formatter.format(date)}`);
});
// 出力:
// Pacific: 7:30 AM PST
// Central: 9:30 AM CST
// Eastern: 10:30 AM EST
// London: 3:30 PM GMT
// Tokyo: 12:30 AM JST

各タイムゾーンはそれぞれの標準的な略語を生成します。太平洋は PST、中部は CST、東部は EST、ロンドンは GMT、東京は JST を使用します。

タイムゾーン名の長い形式での表示

timeZoneName: 'long' オプションは、タイムゾーン名を完全な形式で表示します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  year: 'numeric',
  month: 'numeric',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "1/15/2025, 7:30 AM Pacific Standard Time"

長い形式では PST ではなく Pacific Standard Time が生成されます。これにより曖昧さがなくなりますが、かなり多くのスペースを必要とします。

長い名前は、明確さが不可欠でスペースが十分にある場合に適しています。

const date = new Date('2025-01-15T15:30:00Z');

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(formatter.format(date));
// 出力: "10:30 AM Eastern Standard Time"

完全な名前を使用することで、ユーザーが略語を解読する必要なく、どのタイムゾーンが適用されているかが明確になります。

タイムゾーンオフセットの表示

timeZoneName: 'shortOffset' オプションは、UTCオフセットをコンパクトな形式で表示します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "7:30 AM GMT-8"

これは GMT-8 を表示し、タイムゾーンがUTCより8時間遅れていることを示します。オフセット形式は、特定のタイムゾーン名よりもUTCとの数値的な関係が重要な場合に適しています。

timeZoneName: 'longOffset' オプションは、時間と分を含むオフセットを表示します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "7:30 AM GMT-08:00"

これは時間と分の間にコロンを入れて GMT-08:00 と表示します。この形式はより正確で、ISO 8601の規則に従っています。

30分または45分のオフセットを持つタイムゾーンは、長い形式で完全なオフセットを表示します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'Asia/Kolkata',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "9:00 PM GMT+05:30"

インド標準時はUTCから5時間30分のオフセットがあります。長いオフセット形式ではこれを GMT+05:30 と表示します。

汎用的なタイムゾーン名の表示

timeZoneName: 'shortGeneric' オプションは、夏時間が有効かどうかに関係なく適用される汎用的な略称を表示します。

const winterFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const summerFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(winterFormatter.format(winterDate));
// 出力: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// 出力: "8:30 AM PT"

冬と夏の日付の両方で太平洋時間を表す PT が表示されます。汎用フォーマットは太平洋標準時と太平洋夏時間を区別しません。季節に関係なく一貫したラベルが必要な場合に有効です。

timeZoneName: 'longGeneric' オプションは完全な汎用名を提供します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longGeneric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "7:30 AM Pacific Time"

これは Pacific Standard Time の代わりに Pacific Time を表示します。汎用の長いフォーマットは、標準時間または夏時間を指定せずに明確さを提供します。

夏時間がタイムゾーン名に与える影響

タイムゾーン名は標準時間と夏時間の間で変化します。timeZoneName オプションはこの変化を自動的に反映します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// 出力: "7:30 AM PST"

console.log(formatter.format(summerDate));
// 出力: "8:30 AM PDT"

1月には、フォーマッタは太平洋標準時を表す PST を表示します。7月には、太平洋夏時間を表す PDT を表示します。フォーマッタは日付に基づいて自動的に正しい名前を選択します。

オフセットも標準時間と夏時間の間で変化します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'shortOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// 出力: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// 出力: "8:30 AM GMT-7"

冬季には、太平洋時間は GMT-8 です。夏季には GMT-7 です。夏時間が始まると、オフセットは1時間変化します。

長い名前もこの変化を反映します。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const winterDate = new Date('2025-01-15T15:30:00Z');
const summerDate = new Date('2025-07-15T15:30:00Z');

console.log(formatter.format(winterDate));
// 出力: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// 出力: "8:30 AM Pacific Daylight Time"

長いフォーマットは Pacific Standard Time から Pacific Daylight Time に変わります。フォーマッタは日付とタイムゾーンに基づいてこれらの移行を自動的に処理します。

異なる言語でのタイムゾーン名の表示

タイムゾーン名は言語によって異なる表示になります。ロケール識別子によって、フォーマッターがタイムゾーン名に使用する言語が決まります。

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

const frFormatter = new Intl.DateTimeFormat('fr-FR', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// 出力: "7:30 AM Pacific Standard Time"

console.log(esFormatter.format(date));
// 出力: "7:30 hora estándar del Pacífico"

console.log(frFormatter.format(date));
// 出力: "07:30 heure normale du Pacifique"

英語ではPacific Standard Timeと表示されます。スペイン語ではhora estándar del Pacíficoと表示されます。フランス語ではheure normale du Pacifiqueと表示されます。各言語はタイムゾーン名に独自の翻訳を使用します。

短い名前は略語であるため、多くの場合、言語間で同じままです。

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

const esFormatter = new Intl.DateTimeFormat('es-ES', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'short',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// 出力: "7:30 AM PST"

console.log(esFormatter.format(date));
// 出力: "7:30 PST"

英語とスペイン語の両方で短い略語としてPSTが使用されます。ただし、スペイン語のフォーマット規則は英語とは異なるため、この例ではスペイン語ではAMの表示が省略されています。

オフセットはすべての言語で数値のままです。

const date = new Date('2025-01-15T15:30:00Z');

const enFormatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

const jaFormatter = new Intl.DateTimeFormat('ja-JP', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'longOffset',
  hour: 'numeric',
  minute: 'numeric'
});

console.log(enFormatter.format(date));
// 出力: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// 出力: "7:30 GMT-08:00"

英語と日本語の両方でオフセットとしてGMT-08:00が表示されます。数値オフセットは翻訳を必要としません。

タイムゾーン名のみを表示する

他の日付と時刻のコンポーネントを省略することで、タイムゾーン名のみを表示できます。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "Pacific Standard Time"

timeZoneNameのみを他のオプションなしで指定すると、フォーマッターはタイムゾーン名のみを出力します。これは日付と時刻とは別にタイムゾーンを表示する必要がある場合に有効です。

これを使用してラベルや凡例を作成できます。

const timeZones = [
  'America/Los_Angeles',
  'America/Chicago',
  'America/New_York',
  'Europe/London',
  'Asia/Tokyo'
];

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'long'
});

const date = new Date();

timeZones.forEach(timeZone => {
  formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: timeZone,
    timeZoneName: 'long'
  });
  console.log(formatter.format(date));
});
// 出力:
// Pacific Standard Time (または日付によってはPacific Daylight Time)
// Central Standard Time (または日付によってはCentral Daylight Time)
// Eastern Standard Time (または日付によってはEastern Daylight Time)
// Greenwich Mean Time (または日付によってはBritish Summer Time)
// Japan Standard Time

これにより、ドロップダウンメニューや選択インターフェースに表示するのに適したタイムゾーン名のリストが作成されます。

タイムゾーン名と特定の日付フォーマットの組み合わせ

タイムゾーン名と特定の日付および時刻のフォーマットオプションを組み合わせることができます。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/New_York',
  timeZoneName: 'short',
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "Wednesday, January 15, 2025, 10:30 AM EST"

これは完全な日付フォーマットと短いタイムゾーン名を組み合わせています。出力には曜日、月の完全名、日、年、時間、およびタイムゾーンの略称が含まれます。

これを使用して完全な日時表示を作成できます。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  timeZoneName: 'long',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "Wednesday, January 15, 2025 at 7:30:00 AM Pacific Standard Time"

timeZoneNameオプションはdateStyleまたはtimeStyleと一緒に使用することはできないことに注意してください。スタイルのショートカットを使用する必要がある場合、タイムゾーン名は既にlongおよびfullの時間スタイルに含まれています。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZone: 'America/Los_Angeles',
  dateStyle: 'full',
  timeStyle: 'long'
});

const date = new Date('2025-01-15T15:30:00Z');
console.log(formatter.format(date));
// 出力: "Wednesday, January 15, 2025 at 7:30:00 AM PST"

long時間スタイルには自動的に短いタイムゾーン名が含まれます。timeZoneNameを別途指定する必要はありません。

イベントスケジュールのタイムゾーン名の表示

タイムゾーン名は、ユーザーが異なる地域でのイベント発生時間を理解するのに役立ちます。

const formatter = new Intl.DateTimeFormat('en-US', {
  timeZoneName: 'short',
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: 'numeric'
});

const events = [
  { name: 'Kickoff Meeting', time: '2025-03-15T14:00:00Z', timeZone: 'America/New_York' },
  { name: 'Design Review', time: '2025-03-15T17:00:00Z', timeZone: 'America/Los_Angeles' },
  { name: 'Sprint Planning', time: '2025-03-16T01:00:00Z', timeZone: 'Asia/Tokyo' }
];

events.forEach(event => {
  const localFormatter = new Intl.DateTimeFormat('en-US', {
    timeZone: event.timeZone,
    timeZoneName: 'short',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric'
  });

  const date = new Date(event.time);
  console.log(`${event.name}: ${localFormatter.format(date)}`);
});
// 出力:
// Kickoff Meeting: Mar 15, 9:00 AM EST
// Design Review: Mar 15, 9:00 AM PST
// Sprint Planning: Mar 16, 10:00 AM JST

各イベントはそのローカルタイムゾーンで表示されます。ユーザーはキックオフミーティングが東部時間の午前9時、デザインレビューが太平洋時間の午前9時、スプリントプランニングが日本時間の午前10時であることを確認できます。

同じイベントを複数のタイムゾーンで表示することもできます。

const meetingTime = new Date('2025-03-15T17:00:00Z');

const timeZones = [
  { zone: 'America/Los_Angeles', label: 'Pacific' },
  { zone: 'America/Chicago', label: 'Central' },
  { zone: 'America/New_York', label: 'Eastern' },
  { zone: 'Europe/London', label: 'London' }
];

console.log('Global Team Meeting:');
timeZones.forEach(({ zone, label }) => {
  const formatter = new Intl.DateTimeFormat('en-US', {
    timeZone: zone,
    timeZoneName: 'short',
    hour: 'numeric',
    minute: 'numeric'
  });
  console.log(`${label}: ${formatter.format(meetingTime)}`);
});
// 出力:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

これは単一の会議時間を複数のタイムゾーンに変換して表示しています。異なる地域のチームメンバーは自分のローカル時間をすぐに確認できます。