PSTや太平洋標準時などのタイムゾーン名を表示する方法

はじめに

ユーザーに時刻を表示する際、タイムゾーンを表示することで、その時刻が自分のローカルタイムゾーンなのか、別のタイムゾーンなのかを理解しやすくなります。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));
// Output: "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));
// Output: "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)}`);
});
// Output:
// 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));
// Output: "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));
// Output: "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));
// Output: "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));
// Output: "7:30 AM GMT-08:00"

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

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

{/* CODE_PLACEHOLDER_b03d84edbe14a2d4f1d8596cf0f3aa7c */

インド標準時は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));
// Output: "7:30 AM PT"

console.log(summerFormatter.format(summerDate));
// Output: "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));
// Output: "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));
// Output: "7:30 AM PST"

console.log(formatter.format(summerDate));
// Output: "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));
// Output: "7:30 AM GMT-8"

console.log(formatter.format(summerDate));
// Output: "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));
// Output: "7:30 AM Pacific Standard Time"

console.log(formatter.format(summerDate));
// Output: "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));
// Output: "7:30 AM Pacific Standard Time"

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

console.log(frFormatter.format(date));
// Output: "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));
// Output: "7:30 AM PST"

console.log(esFormatter.format(date));
// Output: "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));
// Output: "7:30 AM GMT-08:00"

console.log(jaFormatter.format(date));
// Output: "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));
// Output: "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));
});
// Output:
// Pacific Standard Time (or Pacific Daylight Time depending on date)
// Central Standard Time (or Central Daylight Time depending on date)
// Eastern Standard Time (or Eastern Daylight Time depending on date)
// Greenwich Mean Time (or British Summer Time depending on date)
// 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));
// Output: "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));
// Output: "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));
// Output: "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)}`);
});
// Output:
// 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)}`);
});
// Output:
// Global Team Meeting:
// Pacific: 9:00 AM PST
// Central: 11:00 AM CST
// Eastern: 12:00 PM EST
// London: 5:00 PM GMT

これは、単一のミーティング時刻を複数のタイムゾーンに変換して表示します。異なる地域のチームメンバーは、自分のローカル時刻をすばやく見つけることができます。