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

プリセットの時刻スタイルを使用して、個別に設定せずに表示する時刻コンポーネントを制御する

はじめに

時刻のフォーマットには、表示するコンポーネントを選択する必要があります。会議の時間には時と分を表示したり、正確なタイムスタンプには秒を追加したり、地域間の調整にはタイムゾーン情報を含めたりすることがあります。各コンポーネントには独自のフォーマットオプションがあります。これらのオプションをすべて個別に設定すると、冗長なコードになり、どの組み合わせが適切に機能するかを理解する必要があります。

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

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

timeStyleとは

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

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

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

console.log(formatter.format(new Date("2025-03-15T14:30:00")));
// 出力: "2:30 PM"

この単一のオプションは、複数の個別コンポーネントオプションを設定する必要がある場合に代わるものです。

4つのスタイルレベルを理解する

各スタイルレベルは、簡潔さと詳細さのバランスが異なります。ショートスタイルは必須コンポーネントのみを表示してスペースを最小限に抑えます。フルスタイルはタイムゾーン名などのすべての関連コンポーネントを含めることで明確さを最大化します。

"short"スタイルは時間と分を表示するコンパクトな出力を生成します。秒とタイムゾーン情報は省略され、日常的な時間表示のニーズに適しています。

"medium"スタイルは秒を追加してより高い精度を提供します。タイムゾーン情報は省略されていますが、秒単位の正確なタイミングを提供します。

"long"スタイルは省略されたタイムゾーン情報を追加します。時間、分、秒、およびPSTやGMTなどの短いタイムゾーンコードが含まれます。

"full"スタイルは最も完全な表現を生成します。Pacific Standard Timeのように、タイムゾーンが完全にスペルアウトされた、すべての時間コンポーネントが含まれます。

各スタイルの正確なコンポーネントとフォーマットはロケールによって異なります。アメリカ英語は通常、AM/PMを使用した12時間形式を使用しますが、ドイツ語は24時間形式を使用します。相対的な詳細レベルはロケール間で一貫しています。

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: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

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

これらの違いは、時間表示に関する各文化の慣習を反映しています。APIはロケール識別子に基づいてこれらのバリエーションを自動的に処理します。

ショートスタイルを使用するタイミング

ショートスタイルは、日常的な時間表示のほとんどに最適です。秒やタイムゾーンの詳細でインターフェースを煩雑にすることなく、ユーザーが通常必要とする情報を表示します。

会議の時間、予約スケジュール、または秒レベルの精度が不要なコンテキストでは、ショート時間スタイルを使用してください。ほとんどのユーザーは正確な秒数よりも時間と分で考えます。

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

const meetings = [
  { title: "Team standup", time: new Date("2025-03-15T09:00:00") },
  { title: "Client call", time: new Date("2025-03-15T14:30:00") },
  { title: "Code review", time: new Date("2025-03-15T16:45:00") }
];

meetings.forEach(meeting => {
  console.log(`${meeting.title}: ${formatter.format(meeting.time)}`);
});

// Output:
// Team standup: 9:00 AM
// Client call: 2:30 PM
// Code review: 4:45 PM

カレンダーアプリケーション、スケジューリングインターフェース、タイムピッカーはショートスタイルの恩恵を受けます。コンパクトなフォーマットによりインターフェースがすっきりと保たれながら、イベントの発生時間を理解するためにユーザーが必要とするすべての情報が提供されます。

ショートスタイルは、ユーザーがタイムゾーンのコンテキストを理解していることを前提としています。すべてのユーザーが同じタイムゾーンで操作している場合、またはアプリケーションがタイムゾーン変換を透過的に処理する場合、明示的なタイムゾーン表示は冗長になります。

ミディアムスタイルを使用する場合

ミディアムスタイルは、タイムゾーン情報を暗黙的に保ちながら、秒単位の精度を提供します。これにより、正確なタイミングが重要であるが、タイムゾーンはコンテキストから理解できる場合に適しています。

アプリケーションログ、アクティビティフィード、または監査証跡に正確なタイムスタンプを表示する場合は、ミディアムタイムスタイルを使用してください。これらのコンテキストでは、アクションがいつ正確に発生したかを秒単位で知ることが有益です。

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

const activities = [
  { action: "User logged in", time: new Date("2025-03-15T09:15:23") },
  { action: "File uploaded", time: new Date("2025-03-15T09:18:47") },
  { action: "Settings updated", time: new Date("2025-03-15T09:22:11") }
];

activities.forEach(activity => {
  console.log(`${activity.action}: ${formatter.format(activity.time)}`);
});

// 出力:
// User logged in: 9:15:23 AM
// File uploaded: 9:18:47 AM
// Settings updated: 9:22:11 AM

開発者ツール、デバッグインターフェース、パフォーマンスモニタリングダッシュボードでは、正確なタイミング情報を表示するためにミディアムスタイルを使用します。秒単位の精度は、パターンの識別、期間の測定、イベントの相関関係の把握に役立ちます。

ミディアムスタイルは、ショートスタイルよりも詳細な情報が必要だが、タイムゾーン情報の冗長性は必要ない場合に適しています。ほとんどのユーザーはアプリケーションのコンテキストからタイムゾーンを推測できます。

ロングスタイルを使用する場合

ロングスタイルは、時間表示に省略されたタイムゾーン情報を追加します。これにより、ユーザーは自分のタイムゾーンと比較して、イベントがいつ発生したか、または発生するかを理解するのに役立ちます。

タイムゾーンをまたいで調整する場合や、視聴者の場所によって異なる解釈をされる可能性のある時間を表示する場合は、ロングタイムスタイルを使用してください。省略されたタイムゾーンコードは、過度のスペースを取らずにコンテキストを提供します。

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

const events = [
  { name: "Webinar starts", time: new Date("2025-03-15T14:00:00") },
  { name: "Registration closes", time: new Date("2025-03-15T13:30:00") }
];

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

// 出力:
// Webinar starts: 2:00:00 PM EST
// Registration closes: 1:30:00 PM EST

国際的なアプリケーション、分散チーム向けのスケジューリングツール、イベント調整プラットフォームはロングスタイルの恩恵を受けます。タイムゾーンコードにより、時間がどのタイムゾーンを表しているかについての曖昧さがなくなります。

航空券予約システム、会議スケジューリングアプリケーション、リモートワークツールでは、ユーザーが異なるタイムゾーンでの時間を理解するのを助けるためにロングスタイルを使用します。このフォーマットは明確さとスペース効率のバランスを取っています。

フルスタイルを使用するタイミング

フルスタイルは最も完全な時間表現を生成します。完全なタイムゾーン名を明示することで、時間が表すタイムゾーンについてのあいまいさをすべて排除します。

最大限の明確さが必要な時間を表示する場合は、フルタイムスタイルを使用してください。完全なタイムゾーン名を明示することで、異なる地域のユーザーがイベントの発生時刻を正確に理解するのに役立ちます。

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));
// 出力例: "2025年3月15日土曜日 14時30分45秒 太平洋標準時"

フルスタイルは、重要な単一のイベント、確認メッセージ、または完全な時間的コンテキストを見ることでユーザーが利益を得る場所での表示に適しています。国際的な会議の招待状、イベントの確認、および正式なスケジュール通信は、この詳細レベルの恩恵を受けます。

時間に敏感な法的文書、公式記録、およびコンプライアンス関連のタイムスタンプは、明確な時間情報を確立するためにフルスタイルを使用します。完全なタイムゾーン名により、イベントがいつ発生したかについての混乱を防ぎます。

制限事項について

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

以下は機能しません:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // エラー: 組み合わせることができません
});

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

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

const formatter = new Intl.DateTimeFormat("en-US", {
  hour: "2-digit",
  minute: "2-digit",
  second: "2-digit"
});

console.log(formatter.format(new Date("2025-03-15T14:30:45")));
// 出力例: "02:30:45 PM"

dateStyletimeStyleは異なるフォーマット側面を制御するため、一緒に使用することができます。また、timeZonecalendar、または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")));
// 出力例: "2025年3月15日 14:30:45 EST"

ユーザーのロケールに合わせた時刻のフォーマット

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

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

const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// 出力はユーザーのロケールによって異なる
// en-USの場合: "2:30 PM"
// de-DEの場合: "14:30"
// fr-FRの場合: "14:30"

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

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

パフォーマンス向上のためのフォーマッターの再利用

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

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

const times = [
  new Date("2025-03-15T09:00:00"),
  new Date("2025-03-15T14:30:00"),
  new Date("2025-03-15T16:45:00")
];

times.forEach(time => {
  console.log(formatter.format(time));
});
// 出力:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

このパターンは、時刻の配列をフォーマットしたり、ユーザーインターフェースで多くのタイムスタンプを表示したりする場合にパフォーマンスを向上させます。

覚えておくべきこと

timeStyleオプションは、"short""medium""long""full"というプリセットフォーマットレベルを提供します。各レベルは簡潔さと詳細さのバランスを表しています。shortは時間と分を表示し、mediumは秒を追加し、longは省略されたタイムゾーンを追加し、fullは完全なタイムゾーン名を含みます。

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

timeStyledateStyleと一緒に使用できますが、hourminuteなどの個々のコンポーネントオプションと組み合わせることはできません。シンプルさを重視する場合はプリセットスタイルを、細かい制御が必要な場合は個々のコンポーネントを選択してください。

navigator.languageからユーザーのロケールを使用して時刻をフォーマットし、各ユーザーの期待に沿った時刻表示を行いましょう。複数の時刻をフォーマットする場合は、パフォーマンス向上のためにフォーマッターインスタンスを再利用してください。