時刻を短縮形、標準形、長形、完全形でフォーマットする方法

はじめに

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

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

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

timeStyleとは

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

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

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

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

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

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

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

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

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

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

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

各スタイルの正確なコンポーネントとフォーマットは、ロケールによって異なります。アメリカ英語では通常、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));
// 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"

日付は長い形式で表示され、時刻は短い形式で表示されます。この組み合わせにより、詳細な日付情報を提供しながら、時刻を簡潔に保つことができます。

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

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: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時間形式を使用します。ドイツ語、フランス語、日本語では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

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

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

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

mediumスタイルは、タイムゾーン情報を暗黙的に保ちながら、秒単位の精度を提供します。これにより、正確なタイミングが重要であるものの、タイムゾーンが文脈から理解できる状況に適しています。

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

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)}`);
});

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

開発者ツール、デバッグインターフェース、パフォーマンス監視ダッシュボードでは、mediumスタイルを使用して正確なタイミング情報を表示します。秒単位の精度により、パターンの特定、期間の測定、イベントの関連付けが可能になります。

mediumスタイルは、shortスタイルよりも詳細な情報が必要であるものの、タイムゾーン情報の冗長性が不要な場合に適しています。ほとんどのユーザーは、アプリケーションの文脈からタイムゾーンを推測できます。

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

longスタイルは、時刻表示に省略されたタイムゾーン情報を追加します。これにより、ユーザーは自分のタイムゾーンに対してイベントがいつ発生したか、または発生するかを理解できます。

タイムゾーンをまたいで調整する場合、または閲覧者の場所によって異なる解釈がされる可能性のある時刻を表示する場合は、longタイムスタイルを使用してください。省略されたタイムゾーンコードは、過度なスペースを取ることなく文脈を提供します。

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)}`);
});

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

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

フライト予約システム、会議スケジューリングアプリケーション、リモートワークツールでは、longスタイルを使用して、ユーザーが異なるタイムゾーンの時刻を理解できるようにします。この形式は、明確性とスペース効率のバランスを取ります。

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

fullスタイルは、最も完全な時刻表現を生成します。完全なタイムゾーン名を記述することで、時刻がどのタイムゾーンを表しているかについての曖昧さをすべて排除します。

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

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"

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

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

制限事項の理解

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

これは機能しません:

const formatter = new Intl.DateTimeFormat("en-US", {
  timeStyle: "medium",
  hour: "2-digit"  // Error: cannot combine
});

timeStyleオプションは、すでに時刻の書式を決定しています。明示的なhourオプションを追加すると、競合が発生します。同じ制限は、minute、second、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")));
// Output: "02:30:45 PM"

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, {
  timeStyle: "short"
});

const time = new Date("2025-03-15T14:30:00");
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:30 PM"
// For de-DE: "14:30"
// For 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));
});
// Output:
// "9:00 AM"
// "2:30 PM"
// "4:45 PM"

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

覚えておくべきこと

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

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

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

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