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

はじめに

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

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")));
// 出力: "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));
// 出力: "3/15/25"

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

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

console.log(fullFormatter.format(date));
// 出力: "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));
// 出力: "2:30 PM"

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

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

console.log(fullFormatter.format(date));
// 出力: "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));
// 出力: "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));
});

// 出力:
// "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)}`);
});

// 出力:
// 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日土曜日

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

ロケールによって異なる時刻スタイル

時刻のフォーマットもロケールの慣習に適応します。一部のロケールでは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)}`);
});

// 出力:
// 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時間形式を使用します。長いスタイルでは、各ロケールに適したフォーマットでタイムゾーン情報が追加されます。

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

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

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

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)}`);
// 出力: "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)}`);
// 出力: "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)}`);
// 出力: "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));
// 出力: "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"  // エラー: 組み合わせることができません
});

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")));
// 出力: "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")));
// 出力: "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));
// 出力はユーザーのロケールによって異なります
// en-USの場合: "March 15, 2025 at 2:30 PM"
// de-DEの場合: "15. März 2025 um 14:30"
// 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));
});
// 出力:
// "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からユーザーのロケールを使用して日付をフォーマットすることで、各ユーザーの期待に沿った日付表示が可能になります。複数の日付をフォーマットする場合は、パフォーマンス向上のためにフォーマッターインスタンスを再利用してください。