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

JavaScriptを使ってタイムゾーン名を省略形・正式名・オフセット形式で表示しよう

はじめに

ユーザーに時刻を表示する際、タイムゾーンを示すことで、その時刻が現地時間なのか他の地域の時間なのかが分かります。たとえば、3:00 PM PST のように予定を表示すると、パシフィック時間で変換が必要なことが伝わります。もし PST のラベルがなければ、ユーザーはどのタイムゾーンが使われているか推測しなければなりません。

タイムゾーンはさまざまなフォーマットで表記できます。たとえば、PST のような略称、Pacific Standard Time のような正式名称、あるいは GMT-8 のようなオフセット表記などです。用途によって使い分けます。略称は省スペースですが曖昧になることもあります。正式名称は明確ですがスペースを取ります。オフセット形式は、ゾーン名より時差が重要な場合に適しています。

JavaScriptには、タイムゾーン名を自動で表示できるIntl.DateTimeFormat APIがあります。このレッスンでは、タイムゾーン名の種類、標準時と夏時間での切り替わり、そして様々な形式での表示方法を解説します。

タイムゾーン名フォーマットの理解

タイムゾーン名にはいくつか異なるフォーマットがあり、それぞれ特長があります。

省略形のタイムゾーン名は、PST や EST、JST などが使われます。これらは省スペースですが、曖昧になることもあります。たとえば、CST は北米のCentral Standard Time、中国標準時、キューバ標準時など、複数の意味を持ちます。

正式名称で表されるタイムゾーン名は、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

各タイムゾーンは、その標準的な省略形を持ちます。Pacificは PST、Centralは CST、Easternは EST、Londonは GMT、Tokyoは 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"

長い形式では、Pacific Standard Time が使われ、PST ではありません。これにより曖昧さは解消されますが、かなり多くのスペースを取ります。

長い名称は、明確さが重要でスペースに余裕がある場合に適しています。

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分オフセットのあるタイムゾーンは、長い形式ですべてのオフセットを表示します。

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));
// Output: "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));
// 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 Time を表示し、Pacific Standard 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月には、フォーマッタは Pacific Standard Time を表す PST を表示します。7月には、Pacific Daylight Time を表す 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"

冬の間、Pacific Time のオフセットは 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

各イベントはそのローカルタイムゾーンとともに表示されます。たとえば、Kickoff Meetingは午前9時（東部）、Design Reviewは午前9時（太平洋）、Sprint Planningは午前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

これは、1つのミーティング時間が複数のタイムゾーンに変換されて表示されます。異なる地域のTeamメンバーも自分の現地時間がすぐにわかります。