AM/PMまたはロケール固有の時間帯を表示する方法

はじめに

4:00のような時刻を表示する場合、ユーザーはそれが午前か午後かを知るためのコンテキストが必要です。英語では、AMまたはPMを追加して明確にします。午前4時（4:00 AM）は日の出前に発生し、午後4時（4:00 PM）は昼過ぎに発生します。

他の言語ではAMとPMを単純に翻訳するわけではありません。多くの文化では、一日を2つ以上の期間に分け、早朝、午前、午後、夕方、夜などに特定の用語を使用します。スペイン語では、真夜中から夜明け前までの時間を「madrugada」と呼びます。ドイツ語では、一日を2つではなく6つの異なる期間に分けています。一部の言語では、午前1時を「朝の1時」ではなく「夜の1時」と呼びます。

JavaScriptのIntl.DateTimeFormatは、これらの文化固有の時間区分を自動的に表示するためのdayPeriodオプションを提供しています。このレッスンでは、文化によって異なる日の区分の仕組み、国際的なアプリケーションにおけるその重要性、および適切な日の区分ラベルを使用して時間をフォーマットする方法について説明します。

文化によって日の区分が異なる理由

異なる文化では、24時間の一日を名前付きの期間に分ける方法が異なります。これらの区分は、各文化の人々が時間についてどのように考え、話すかを反映しています。

英語話者は一日を4つの期間に分けます。朝（morning）は真夜中から正午まで、午後（afternoon）は正午から夕方まで、夕方（evening）は午後遅くから暗くなるまで、夜（night）は暗くなってから真夜中までです。AMとPMという用語は、12時間制の時計のためのよりシンプルな2期間システムを提供します。

スペイン語話者は、真夜中から人々が通常起きる前までの時間をカバーする「madrugada」を別個の期間として認識しています。これにより、深夜の時間と早朝の時間を区別する5期間システムが作られます。

ロシア語話者は、人々が通常眠っている時間帯を指すのに「ночь」（夜）を使用します。午前1時は、人々がその時間に通常眠っているため、「朝の1時」ではなく「夜の1時」となります。

ドイツ語では一日を6つの期間に分けています。「Morgen」（朝）、「Vormittag」（午前）、「Mittag」（正午）、「Nachmittag」（午後）、「Abend」（夕方）、「Nacht」（夜）はそれぞれ特定の時間帯をカバーしています。

インドネシア語では、「pagi」（夜明けから午前10時まで）、「siang」（午前10時から午後2時まで）、「sore」（午後2時から日没まで）、「malam」（夜）を使用して、太陽の位置に基づいて一日を4つの期間に分けています。

ベンガル語では一日を6つの期間に分けています。「ভোর」（夜明け）、「সকাল」（朝）、「দুপুর」（午前）、「বিকাল」（午後）、「সন্ধ্যা」（夕方）、「রাত」（夜）はそれぞれ特定の時間帯を持っています。

国際的なアプリケーションで時間を表示する場合、各文化のユーザーが自然に時間について話す方法に合った用語を使用する必要があります。すべてのユーザーに「4 AM」を表示することは、他の言語がその時間をどのように表現するかを無視することになります。

dayPeriodオプションの理解

Intl.DateTimeFormatのdayPeriodオプションは、時刻をフォーマットする際にロケール固有の時間帯を含めるようフォーマッタに指示します。時間と分だけを表示する代わりに、フォーマッタはターゲット言語でその時間帯に適切な用語を追加します。

このオプションは12時間形式でのみ機能します。24時間形式では、時間の数字自体が十分なコンテキストを提供します。04:00は明らかに朝であり、16:00は追加のラベルなしでも明らかに午後です。時間帯は12時間形式で繰り返される時間を区別するために存在します。

dayPeriodオプションは3つの値を受け付けます。narrowは最も短い形式を生成し、多くの場合、1文字または略語になります。shortは省略形を生成します。longは完全な単語またはフレーズを生成します。

多くのロケールでは、これら3つの値は同一の出力を生成します。Unicodeロケールデータは、ロケールとフォーマット長のすべての組み合わせに対して異なる形式を定義していません。異なる形式が存在しない場合、フォーマッタは指定した値に関係なく同じ出力を使用します。

時間帯を含む時刻のフォーマット

時間帯を表示するには、dayPeriodオプションをnarrow、short、またはlongに設定したIntl.DateTimeFormatインスタンスを作成します。また、hourのような時間コンポーネントオプションを含め、hourCycleを使用して12時間形式を指定する必要があります。

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

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});

console.log(formatter.format(date));
// 出力: "4:30 in the morning"

これにより、時間、分、および時間帯を表示するフォーマッタが作成されます。hourCycle: 'h12'オプションは12時間形式を指定し、これは時間帯を表示するために必要です。dayPeriod: 'long'オプションは完全な時間帯フレーズを要求します。

dayPeriodオプションがなければ、フォーマッタは代わりに「4:30 AM」と表示します。時間帯オプションは、単純なAM/PM表示をより説明的なフレーズに置き換えます。

異なる時間帯での日中の時間区分の表示

日中の時間区分はフォーマットされる時間に基づいて変化します。フォーマッターはロケールの慣習に従って、各時間に適切な時間区分を自動的に選択します。

const options = {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
};

const formatter = new Intl.DateTimeFormat('en-US', options);

const morning = new Date('2025-01-15T04:30:00');
console.log(formatter.format(morning));
// 出力: "4:30 in the morning"

const afternoon = new Date('2025-01-15T14:30:00');
console.log(formatter.format(afternoon));
// 出力: "2:30 in the afternoon"

const evening = new Date('2025-01-15T20:30:00');
console.log(formatter.format(evening));
// 出力: "8:30 in the evening"

const night = new Date('2025-01-15T23:30:00');
console.log(formatter.format(night));
// 出力: "11:30 at night"

英語では朝（morning）、午後（afternoon）、夕方（evening）、夜（night）を区別します。各時間は時刻に基づいて適切なフレーズが適用されます。どの時間区分が適用されるかを判断する必要はありません。フォーマッターはUnicodeロケールデータに基づいてこれを自動的に処理します。

narrow、short、longフォーマットの比較

3つのフォーマット長は、一部のロケールで異なる出力を生成します。その違いは言語によって異なり、微妙であったり存在しなかったりする場合があります。

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

const narrow = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'narrow'
});
console.log(narrow.format(date));
// 出力: "4 in the morning"

const short = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'short'
});
console.log(short.format(date));
// 出力: "4 in the morning"

const long = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(long.format(date));
// 出力: "4 in the morning"

米国英語では、3つの長さすべてが同一の出力を生成します。ロケールデータはこの言語と時間の組み合わせに対して異なる形式を定義していません。

一部のロケールでは長さによる区別があります。フランス語ではnarrowとlongフォーマットで異なる出力が生成されます。

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

const frNarrow = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'narrow'
});
console.log(frNarrow.format(date));
// 出力: "4 mat."

const frLong = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(frLong.format(date));
// 出力: "4 du matin"

フランス語では「mat.」を省略形として、「du matin」を長い形式として使用します。どちらも朝を意味しますが、長い形式はより明示的です。

可能な限り短い出力を必要とする特定のスペース制約がない限り、明確さのためにlongを使用してください。長い形式はユーザーにとって理解しやすく、多くのロケールでは短い代替形式を提供していません。

ロケール間での時間帯の仕組み

異なるロケールでは、異なる時間帯の用語を使用し、一日の区切りも異なります。フォーマッターは各ロケールの慣習を自動的に適用します。

const date = new Date('2025-01-15T04:30:00');
const options = {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
};

const enUS = new Intl.DateTimeFormat('en-US', options);
console.log(enUS.format(date));
// 出力: "4 in the morning"

const enGB = new Intl.DateTimeFormat('en-GB', options);
console.log(enGB.format(date));
// 出力: "4 at night"

const deDK = new Intl.DateTimeFormat('de-DE', options);
console.log(deDK.format(date));
// 出力: "4 morgens"

const fr = new Intl.DateTimeFormat('fr-FR', options);
console.log(fr.format(date));
// 出力: "4 du matin"

イギリス英語では午前4時30分を「朝」ではなく「夜」と見なし、時間帯の文化的境界の違いを反映しています。ドイツ語では朝の時間帯に「morgens」を使用します。フランス語では同じ時間帯に「du matin」を使用します。

これらの違いは間違いや不整合ではありません。人々が時間をどのように概念化し、話すかについての本物の文化的違いを反映しています。フォーマッターはロケールに基づいてこれらの違いを自動的に尊重します。

時間帯には12時間形式が必要

dayPeriodオプションは、hourCycle: 'h12'またはhourCycle: 'h11'を使用して12時間形式を指定した場合にのみ機能します。12時間形式がなければ、時間帯は表示されません。

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

const with12Hour = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(with12Hour.format(date));
// 出力: "4 in the morning"

const with24Hour = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  hourCycle: 'h23',
  dayPeriod: 'long'
});
console.log(with24Hour.format(date));
// 出力: "04"

24時間形式では、オプションが指定されていても時間帯は表示されません。24時間形式では、追加のラベルなしでも時間数が十分なコンテキストを提供します。

h12とh11の違いは、深夜と正午の番号付け方法に関連しています。時間が1から12までの標準的な12時間時計にはh12を使用します。0から11までの時間システムにはh11を使用します。どちらも時間帯と連動します。

時間帯表現と分・秒の組み合わせ

時間帯表現と一緒に分や秒を含めることができます。フォーマッターはロケールの慣習に従って時間帯表現を適切に配置します。

const date = new Date('2025-01-15T04:30:45');

const withMinutes = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(withMinutes.format(date));
// 出力: "4:30 in the morning"

const withSeconds = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});
console.log(withSeconds.format(date));
// 出力: "4:30:45 in the morning"

時間帯表現は時間コンポーネントの後に表示されます。時間帯表現を手動で配置したりフォーマットしたりする必要はありません。フォーマッターがロケールの慣習に従ってレイアウトを処理します。

ユーザーのロケールに合わせた時間帯表現の時間フォーマット

特定のロケールをハードコーディングする代わりに、ブラウザからユーザーの優先言語を使用します。navigator.languageプロパティはユーザーの最優先言語設定を返します。

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: 'numeric',
  hourCycle: 'h12',
  dayPeriod: 'long'
});

console.log(formatter.format(date));
// 出力はユーザーのロケールによって異なります
// en-USの場合: "4:30 in the morning"
// en-GBの場合: "4:30 at night"
// de-DEの場合: "4:30 morgens"
// fr-FRの場合: "4:30 du matin"

このアプローチでは、各ユーザーが自然に時間について話す方法に合った時間帯表現で時間を表示します。ブラウザが言語設定を提供し、Intl APIが適切な時間帯表現の用語と境界を適用します。

時間帯表現を使用するタイミング

時間帯表現は、単純なAM/PM表示よりも多くのコンテキストを提供したい場合に効果的です。時間をより会話的にし、一目で理解しやすくします。

説明テキストと一緒に時間が表示されるユーザーインターフェースで時間帯表現を使用してください。「午前4時30分」と表示するカレンダーは「4:30 AM」よりも明確です。なぜなら、その表現は文章の中でより自然に聞こえるからです。

会話的な言葉遣いが読みやすさを向上させる通知やメッセージで時間帯表現を使用してください。「会議は夜8時30分に始まります」は「会議は8:30 PMに始まります」よりも読みやすくなります。

スペースが限られているコンパクトな表示では時間帯表現を避けてください。表、チャート、密度の高いレイアウトは標準的なAM/PM表示や24時間形式の方が適しています。

24時間形式で時間を表示する場合は時間帯表現を避けてください。時間の数字自体が既に一日の時間を示しているため、時間帯表現は有用な情報を追加しません。

概要

Intl.DateTimeFormatのdayPeriodオプションは、文化固有の時間帯を表示します。異なる文化では一日の区分方法が異なり、スペイン語の「madrugada」やドイツ語の6つの異なる時間帯など、単なるAMとPM以外の表現が使われています。

このオプションは3つの値を受け付けます。narrowは最も短い形式、shortは省略形、longは完全な表現を生成します。多くのロケールでは、これら3つの値に対して同じ出力が生成されます。

時間帯の表示は、hourCycle: 'h12'またはhourCycle: 'h11'で指定された12時間形式を使用する場合にのみ表示されます。24時間形式では時間数自体が十分な文脈を提供するため、時間帯は表示されません。

異なるロケールでは、異なる時間帯の用語が使用され、異なる時間に境界が引かれます。フォーマッターはロケール識別子に基づいてこれらの規則を自動的に適用します。イギリス英語では午前4時30分を「at night（夜）」として扱いますが、アメリカ英語では「in the morning（朝）」として扱います。