日付を短い、中程度、長い、または完全な形式でフォーマットする方法

はじめに

日付のフォーマットには、表示するコンポーネントとその表示方法を選択する必要があります。曜日、月名、日付、年、時、分、タイムゾーンを表示することができます。各コンポーネントには独自のフォーマットオプションがあります。これらのオプションをすべて個別に設定すると、冗長なコードになり、どの組み合わせがうまく機能するかを理解する必要があります。

JavaScriptのIntl.DateTimeFormatは、一般的なフォーマット選択を簡単なオプションにまとめたプリセットスタイルを提供します。数値の月、数値の日、数値の年を指定する代わりに、dateStyle: "short"をリクエストできます。時、分、秒の表示を設定する代わりに、timeStyle: "medium"をリクエストできます。

これらのプリセットはすべてのロケールで機能します。同じスタイルは、米国英語、ドイツ語、日本語、アラビア語のいずれでフォーマットしても適切な出力を生成します。このレッスンでは、各スタイルレベルが提供するものと、それぞれをいつ使用するかについて説明します。

dateStyleとtimeStyleとは

dateStyleオプションは、日付の表示方法を制御します。表示される日付コンポーネントとその詳細度に影響します。このオプションは4つの値を受け入れます:"short"、"medium"、"long"、"full"。

timeStyleオプションは、時刻の表示方法を制御します。表示される時刻コンポーネントとその詳細度に影響します。このオプションは同じ4つの値を受け入れます:"short"、"medium"、"long"、"full"。

両方のオプションは、複数のフォーマットオプションを一度に設定するためのショートカットを提供します。スタイルを指定すると、フォーマッタは、ロケールに基づいて、曜日、月、日、年、時、分、秒、タイムゾーン名などのコンポーネントに適切な値を自動的に選択します。

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

console.log(formatter.format(new Date("2025-03-15")));
// Output: "3/15/25"

この単一のオプションは、複数の個別コンポーネントオプションを設定する必要がある場合の代替となります。

4つのスタイルレベルの理解

各スタイルレベルは、簡潔さと詳細さの異なるバランスを表します。短いスタイルは、コンポーネントを省略し、数値形式を使用することでスペースを最小限に抑えます。完全なスタイルは、関連するすべてのコンポーネントを含め、単語を完全に表記することで明確さを最大化します。

"short"スタイルは、限られたスペースに適したコンパクトな出力を生成します。通常、数値形式を使用し、曜日名などの補足情報を省略します。

"medium"スタイルは、適度な詳細を提供します。多くの場合、月名の省略形を含み、バランスの取れた時刻の精度を持ちます。

"long"スタイルは、より多くのコンテキストを追加します。通常、月名を完全に表記し、タイムゾーン情報などの追加コンポーネントを含みます。

"full"スタイルは、最も完全な表現を生成します。曜日名、完全な月名、完全なタイムゾーン名などの関連するすべてのコンポーネントを含みます。

各スタイルの正確なコンポーネントと書式設定は、ロケールによって異なります。アメリカ英語では、ドイツ語や日本語とは異なる方法で月を表示する場合がありますが、相対的な詳細レベルはロケール間で一貫しています。

dateStyleで日付を書式設定する

dateStyleオプションは、日付の書式設定を制御します。各スタイルレベルは、同じ日付に対して異なる出力を生成します。

const date = new Date("2025-03-15T14:30:00");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "3/15/25"

console.log(mediumFormatter.format(date));
// Output: "Mar 15, 2025"

console.log(longFormatter.format(date));
// Output: "March 15, 2025"

console.log(fullFormatter.format(date));
// Output: "Saturday, March 15, 2025"

短いスタイルはすべて数値を使用し、最もコンパクトになります。中程度のスタイルは月名を省略します。長いスタイルは月を完全に表記します。完全なスタイルは、完全なコンテキストのために曜日名を追加します。

timeStyleで時刻を書式設定する

timeStyleオプションは、時刻の書式設定を制御します。各スタイルレベルは、異なる時刻コンポーネントを表示します。

const date = new Date("2025-03-15T14:30:45");

const shortFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "short"
});

const mediumFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium"
});

const longFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "long"
});

const fullFormatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "full"
});

console.log(shortFormatter.format(date));
// Output: "2:30 PM"

console.log(mediumFormatter.format(date));
// Output: "2:30:45 PM"

console.log(longFormatter.format(date));
// Output: "2:30:45 PM PST"

console.log(fullFormatter.format(date));
// Output: "2:30:45 PM Pacific Standard Time"

short スタイルは時と分のみを表示します。medium スタイルは秒を追加します。long スタイルは省略形のタイムゾーンを含みます。full スタイルは完全なタイムゾーン名を表示します。

dateStyle と timeStyle の組み合わせ

両方のオプションを同時に使用して、完全なタイムスタンプをフォーマットできます。フォーマッターは両方のスタイルを独立して適用します。

const date = new Date("2025-03-15T14:30:45");

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "long",
  timeStyle: "short"
});

console.log(formatter.format(date));
// Output: "March 15, 2025 at 2:30 PM"

日付は long フォーマットで表示され、時刻は short フォーマットを使用します。この組み合わせにより、詳細な日付コンテキストを提供しながら、時刻を簡潔に保ちます。

ニーズに応じて、任意の日付スタイルと任意の時刻スタイルを組み合わせることができます。

const date = new Date("2025-03-15T14:30:45");

const combinations = [
  { dateStyle: "short", timeStyle: "short" },
  { dateStyle: "medium", timeStyle: "medium" },
  { dateStyle: "long", timeStyle: "long" },
  { dateStyle: "full", timeStyle: "full" }
];

combinations.forEach(options => {
  const formatter = new Intl.DateTimeFormat("en-US", options);
  console.log(formatter.format(date));
});

// Output:
// "3/15/25, 2:30 PM"
// "Mar 15, 2025, 2:30:45 PM"
// "March 15, 2025 at 2:30:45 PM PST"
// "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

同じスタイルレベルを使用すると、日付と時刻の両方で一貫した詳細度が得られます。スタイルを混在させることで、一方の側面を他方よりも強調できます。

ロケールによる日付スタイルの違い

各ロケールは独自の規則に従って日付をフォーマットします。同じスタイルでも異なるロケールでは異なる出力が生成されますが、相対的な詳細レベルは一貫しています。

const date = new Date("2025-03-15T14:30:00");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "short"
  });

  const fullFormatter = new Intl.DateTimeFormat(locale, {
    dateStyle: "full"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Full:  ${fullFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 3/15/25
//   Full:  Saturday, March 15, 2025
// de-DE:
//   Short: 15.03.25
//   Full:  Samstag, 15. März 2025
// fr-FR:
//   Short: 15/03/2025
//   Full:  samedi 15 mars 2025
// ja-JP:
//   Short: 2025/03/15
//   Full:  2025年3月15日土曜日

アメリカ英語は月/日/年の順序を使用します。ドイツ語は日.月.年の順序でピリオドを区切り文字として使用します。フランス語は日/月/年を使用します。日本語は年/月/日の順序で漢字を使用します。full スタイルは各言語で適切なフォーマットで曜日名を追加します。

ロケールによる時刻スタイルの違い

時刻のフォーマットもロケールの規則に適応します。一部のロケールは AM/PM 表示付きの12時間制を使用し、他のロケールは24時間制を使用します。

const date = new Date("2025-03-15T14:30:45");

const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];

locales.forEach(locale => {
  const shortFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "short"
  });

  const longFormatter = new Intl.DateTimeFormat(locale, {
    timeStyle: "long"
  });

  console.log(`${locale}:`);
  console.log(`  Short: ${shortFormatter.format(date)}`);
  console.log(`  Long:  ${longFormatter.format(date)}`);
});

// Output:
// en-US:
//   Short: 2:30 PM
//   Long:  2:30:45 PM PST
// de-DE:
//   Short: 14:30
//   Long:  14:30:45 PST
// fr-FR:
//   Short: 14:30
//   Long:  14:30:45 UTC−8
// ja-JP:
//   Short: 14:30
//   Long:  14:30:45 PST

アメリカ英語は AM/PM 付きの12時間形式を使用します。ドイツ語、フランス語、日本語は24時間形式を使用します。long スタイルは各ロケールに適したフォーマットでタイムゾーン情報を追加します。

short スタイルを使用する場合

短いスタイルは、スペースが限られている場合や、コンパクトなレイアウトに日付を収める必要がある場合に最適です。モバイルインターフェース、データテーブル、コンパクトなディスプレイでは、最小限の日付フォーマットが有効です。

テーブルの列、リスト項目、または水平方向のスペースが制約されている場所で日付を表示する場合は、短い日付スタイルを使用してください。数値形式は、月名や曜日名を完全に表記するよりも少ない文字数で済みます。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "short"
});

const events = [
  { name: "Team meeting", date: new Date("2025-03-15") },
  { name: "Project deadline", date: new Date("2025-03-28") },
  { name: "Conference", date: new Date("2025-04-05") }
];

events.forEach(event => {
  console.log(`${event.name}: ${formatter.format(event.date)}`);
});

スケジュール、カレンダー、または秒単位の精度が不要な場所で時刻を表示する場合は、短い時刻スタイルを使用してください。ほとんどの場合、時と分のみで十分です。

中程度のスタイルを使用する場合

中程度のスタイルは、詳細さとスペースのバランスを取ります。短いスタイルよりも多くのコンテキストを提供しながら、長いスタイルや完全なスタイルの冗長性を避けます。これにより、ほとんどの汎用的な日付と時刻の表示に適しています。

適度なスペースがあり、純粋な数値形式よりも読みやすい日付を表示したい場合は、中程度の日付スタイルを使用してください。省略された月名は、数字よりも素早く月を識別するのに役立ちます。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium"
});

const milestone = new Date("2025-03-15");
console.log(`Project completion: ${formatter.format(milestone)}`);
// Output: "Project completion: Mar 15, 2025"

秒単位の精度が必要だが、タイムゾーンを暗黙的にしたい場合は、中程度の時刻スタイルを使用してください。これは、ユーザーがタイムゾーンのコンテキストを理解しているアプリケーションログやアクティビティフィードで正確なタイムスタンプを表示する場合に有効です。

長いスタイルを使用する場合

長いスタイルは、完全なスタイルほど冗長にならずに追加の詳細を提供します。曜日名などの補足的な要素を省略しながら、情報を完全に表記します。

強調する価値のある重要な日付や、より自然に読める日付を表示したい場合は、長い日付スタイルを使用してください。完全に表記された月名は、省略形よりもスキャンしやすくなります。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long"
});

const releaseDate = new Date("2025-03-15");
console.log(`Release date: ${formatter.format(releaseDate)}`);
// Output: "Release date: March 15, 2025"

タイムゾーン情報が重要な場合は、長い時刻スタイルを使用してください。これにより、ユーザーは自分のタイムゾーンを基準として、イベントがいつ発生したか、または発生するかを理解できます。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  timeStyle: "long",
  timeZone: "America/New_York"
});

const callTime = new Date("2025-03-15T14:30:00");
console.log(`Conference call: ${formatter.format(callTime)}`);
// Output: "Conference call: 2:30:45 PM EST"

完全スタイルを使用する場合

完全スタイルは、最も完全な日付と時刻の表現を生成します。関連するすべてのコンポーネントが含まれるため、スペース効率よりも明確性と完全性が重要なコンテキストに適しています。

最大限のコンテキストが必要な日付を表示する場合は、完全な日付スタイルを使用してください。曜日を追加することで、ユーザーは週間カレンダー内で日付を配置できるため、スケジュール設定、計画、時間的関係の理解に役立ちます。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full"
});

const appointmentDate = new Date("2025-03-15");
console.log(`Appointment: ${formatter.format(appointmentDate)}`);
// Output: "Appointment: Saturday, March 15, 2025"

完全なタイムゾーンコンテキストが必要な時刻を表示する場合は、完全な時刻スタイルを使用してください。タイムゾーン名を完全に表記することで、異なる地域のユーザーにとっての曖昧さが解消されます。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "full",
  timeStyle: "full"
});

const eventTime = new Date("2025-03-15T14:30:00");
console.log(formatter.format(eventTime));
// Output: "Saturday, March 15, 2025 at 2:30:45 PM Pacific Standard Time"

完全スタイルは、単一の重要なイベント、確認メッセージ、またはユーザーが完全な時間的コンテキストを確認することで利益を得る場所の表示に適しています。

制限事項について

dateStyleおよびtimeStyleオプションは、個別のコンポーネントオプションと併用できません。スタイルプリセットを使用するか、コンポーネントを個別に設定するかを選択する必要があります。

これは機能しません:

const formatter = new Intl.DateTimeFormat("en-US", {
  dateStyle: "medium",
  weekday: "long"  // Error: cannot combine
});

dateStyleオプションは、すでに曜日のフォーマットを決定しています。明示的なweekdayオプションを追加すると、競合が発生します。同じ制限は、timeStyleとhour、minute、またはsecondなどのコンポーネントオプションにも適用されます。

特定のコンポーネントをより細かく制御する必要がある場合は、スタイルオプションを省略し、コンポーネントを個別に設定してください。

const formatter = new Intl.DateTimeFormat("en-US", {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric"
});

console.log(formatter.format(new Date("2025-03-15")));
// Output: "Saturday, March 15, 2025"

dateStyleとtimeStyleは、フォーマットの異なる側面を制御するため、併用できます。また、timeZone、calendar、またはnumberingSystemなど、競合しないオプションと組み合わせることもできます。

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

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// Output: "March 15, 2025 at 2:30:45 PM EST"

ユーザーのロケールに合わせて日付をフォーマットする

ブラウザの言語設定を使用して、各ユーザーの期待に応じた日付フォーマットを行います。navigator.languageプロパティは、ユーザーの優先ロケールを提供します。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "long",
  timeStyle: "short"
});

const date = new Date("2025-03-15T14:30:00");
console.log(formatter.format(date));
// Output varies by user's locale
// For en-US: "March 15, 2025 at 2:30 PM"
// For de-DE: "15. März 2025 um 14:30"
// For fr-FR: "15 mars 2025 à 14:30"

navigator.languages配列全体を渡すことで、フォールバック動作を有効にすることもできます。フォーマッターは、配列からサポートする最初のロケールを使用します。

const formatter = new Intl.DateTimeFormat(navigator.languages, {
  dateStyle: "medium"
});

パフォーマンスのためにフォーマッターを再利用する

Intl.DateTimeFormatインスタンスの作成には、ロケールデータとオプションの処理が含まれます。同じ設定で複数の日付をフォーマットする場合は、フォーマッターを一度作成して再利用します。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  dateStyle: "medium",
  timeStyle: "short"
});

const events = [
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-16T10:00:00"),
  new Date("2025-03-17T16:45:00")
];

events.forEach(date => {
  console.log(formatter.format(date));
});
// Output:
// "Mar 15, 2025, 2:30 PM"
// "Mar 16, 2025, 10:00 AM"
// "Mar 17, 2025, 4:45 PM"

このパターンは、日付の配列をフォーマットする場合や、ユーザーインターフェースに多数のタイムスタンプを表示する場合のパフォーマンスを向上させます。

覚えておくべきこと

dateStyleおよびtimeStyleオプションは、プリセットのフォーマットレベルを提供します:"short"、"medium"、"long"、"full"。各レベルは、簡潔さと詳細さの異なるバランスを表し、shortが最もコンパクトで、fullが最も完全です。

個別の日付と時刻のコンポーネントを手動で設定する代わりに、これらのプリセットを使用してください。プリセットは、ロケール固有のフォーマットルールを理解する必要なく、すべてのロケールに適した出力を生成します。

dateStyleとtimeStyleを一緒に使用できますが、weekdayやhourなどの個別のコンポーネントオプションと組み合わせることはできません。シンプルさを求める場合はプリセットスタイルを、きめ細かい制御を求める場合は個別のコンポーネントを選択してください。

navigator.languageからユーザーのロケールを使用して日付をフォーマットし、各ユーザーの期待に応じた日付を表示します。パフォーマンスを向上させるため、複数の日付をフォーマットする際はフォーマッターインスタンスを再利用してください。