時、分、秒のみを表示する方法

はじめに

時刻表示では、特定のコンポーネントのみを表示する必要があることがよくあります。時計ウィジェットでは秒を除いて時と分のみを表示する場合があります。カウントダウンタイマーでは秒のみを表示する場合があります。スケジュール管理インターフェースでは予定の時刻のみを表示する場合があります。

timeStyle: "short"のようなプリセットスタイルを使用して時刻をフォーマットすると、ロケールによって選択されたコンポーネントのバンドルが取得されます。個別のパーツを削除したり、特定のパーツを追加したりすることはできません。shortスタイルに秒が含まれているが、時と分のみが必要な場合、プリセットはニーズに合いません。

JavaScriptのIntl.DateTimeFormatは、各時刻コンポーネントに対して個別のオプションを提供します。含めるパーツと各パーツのフォーマット方法を正確に指定できます。このレッスンでは、時、分、秒を個別に、または特定の組み合わせで表示する方法について説明します。

時刻コンポーネントの理解

時刻には、独立してフォーマットできる3つの主要なコンポーネントが含まれています。

hourは1日のうちの何時かを示します。minuteは1時間のうちの何分かを示します。secondは1分のうちの何秒かを示します。

各コンポーネントは、表示方法を制御するフォーマット値を受け入れます。オプションオブジェクトには必要なコンポーネントのみを含めます。

時のみをフォーマット

hourオプションは時コンポーネントを表示します。2つの値を受け入れます。

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});
console.log(numeric.format(time)); // "2 PM"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  hour: '2-digit'
});
console.log(twoDigit.format(time)); // "02 PM"

numeric値は先頭のゼロなしで時を表示します。2-digit値は必要に応じて先頭のゼロを付けて時を表示します。

アメリカ英語の場合、フォーマッターはAM/PM表示付きの12時間形式を使用します。他のロケールでは異なる規則を使用しますが、これについては後のレッスンで説明します。

分のみをフォーマットする

minuteオプションは分の要素を表示します。2つの値を受け付けます。

const time = new Date('2025-03-15T14:05:00');

const numeric = new Intl.DateTimeFormat('en-US', {
  minute: 'numeric'
});
console.log(numeric.format(time)); // "5"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  minute: '2-digit'
});
console.log(twoDigit.format(time)); // "05"

numeric値は先頭のゼロなしで分を表示します。2-digit値は先頭のゼロ付きで分を表示します。

分のみを表示することは、時間や秒のみを表示するよりも一般的ではありません。ほとんどの時刻表示では、分と時間を組み合わせます。

秒のみをフォーマットする

secondオプションは秒の要素を表示します。2つの値を受け付けます。

const time = new Date('2025-03-15T14:05:08');

const numeric = new Intl.DateTimeFormat('en-US', {
  second: 'numeric'
});
console.log(numeric.format(time)); // "8"

const twoDigit = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});
console.log(twoDigit.format(time)); // "08"

numeric値は先頭のゼロなしで秒を表示します。2-digit値は先頭のゼロ付きで秒を表示します。

これは、カウンターで経過秒数を表示したり、タイムスタンプの秒部分を表示したりする場合に適しています。

時間と分を組み合わせる

ほとんどの時刻表示では、時間と分の両方を表示します。これらのオプションを1つのフォーマッターで組み合わせることができます。

const time = new Date('2025-03-15T14:05:00');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(formatter.format(time)); // "2:05 PM"

フォーマッターは、ロケールに基づいて適切な区切り文字と書式を自動的に追加します。アメリカ英語の場合、これによりAM/PM表示付きのコロン区切りが生成されます。

区切り文字や順序を指定する必要はありません。ロケールがこれらの詳細を決定します。

時間、分、秒を組み合わせる

完全な時刻精度が必要な場合は、3つの時刻要素すべてを含めることができます。

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:05:08 PM"

これにより、時間、分、秒を含む完全な時刻が生成されます。フォーマッターはすべての区切り文字と書式規則を処理します。

分を除いて時間と秒を組み合わせる

分を含めずに時間と秒を組み合わせることもできますが、これは一般的ではありません。

const time = new Date('2025-03-15T14:05:08');

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  second: '2-digit'
});
console.log(formatter.format(time)); // "2:08 PM"

フォーマッターは、通常とは異なるコンポーネントの組み合わせでも、適切な出力を生成します。

numericと2-digitの書式設定を選択する

numericと2-digitの違いは、1桁の値で最も重要になります。

const earlyTime = new Date('2025-03-15T08:05:03');
const lateTime = new Date('2025-03-15T14:35:48');

const numericFormatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: 'numeric',
  second: 'numeric'
});

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

console.log('Numeric:');
console.log(numericFormatter.format(earlyTime)); // "8:5:3 AM"
console.log(numericFormatter.format(lateTime)); // "2:35:48 PM"

console.log('2-digit:');
console.log(digitFormatter.format(earlyTime)); // "08:05:03 AM"
console.log(digitFormatter.format(lateTime)); // "02:35:48 PM"

numeric形式は先頭のゼロを省略し、「8:5:3 AM」のような値を生成します。2-digit形式は先頭のゼロを含み、「08:05:03 AM」を生成します。

ほとんどの場合、分と秒には2-digitを使用してください。これにより、表、リスト、またはデジタル時計表示で一貫した幅と配置が保証されます。先頭のゼロがないと、「8:5 AM」のような時刻は不規則に見えます。

時間については、デザインによって選択が異なります。デジタル時計は一貫性のために2-digitを使用することがよくあります。テキスト表示は、より自然な外観のためにnumericを使用することがよくあります。

ロケールによる時間の書式設定の違い

ロケールによって、時間の表示規則は異なります。アメリカ英語はAM/PM表示付きの12時間形式を使用します。他の多くのロケールは24時間形式を使用します。

const time = new Date('2025-03-15T14:05:00');

const en = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(en.format(time)); // "2:05 PM"

const de = new Intl.DateTimeFormat('de-DE', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(de.format(time)); // "14:05"

const fr = new Intl.DateTimeFormat('fr-FR', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(fr.format(time)); // "14:05"

const ja = new Intl.DateTimeFormat('ja-JP', {
  hour: 'numeric',
  minute: '2-digit'
});
console.log(ja.format(time)); // "14:05"

アメリカ英語は24時間形式の値を12時間形式に変換し、「PM」を追加します。ドイツ語、フランス語、日本語はすべて、AM/PM表示なしの24時間形式を使用します。

すべてのロケールに対して同じオプションを指定します。フォーマッターは、ロケールの規則に基づいて適切な時間形式を自動的に適用します。

ロケールによる区切り文字の違い

時間コンポーネント間の区切り文字もロケールによって異なります。

const time = new Date('2025-03-15T14:05:08');
const options = {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
};

const en = new Intl.DateTimeFormat('en-US', options);
console.log(en.format(time)); // "2:05:08 PM"

const fi = new Intl.DateTimeFormat('fi-FI', options);
console.log(fi.format(time)); // "14.05.08"

アメリカ英語はコンポーネント間にコロンを使用します。フィンランド語はピリオドを使用します。区切り文字を指定する必要はありません。フォーマッターが各ロケールに適した区切り文字を選択します。

個別の時刻コンポーネントを使用する場合

プリセットの時刻スタイルがニーズに合わない場合は、個別の時刻コンポーネントを使用します。

時と分は必要だが秒は不要で、ターゲットロケールのtimeStyle: "short"プリセットに秒が含まれている場合は、hourとminuteを個別に指定します。

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

簡略化された時計やスケジュールで時のみを表示する必要がある場合は、hourオプションのみを使用します。

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

タイマーやカウンターで経過秒数を表示する必要がある場合は、secondオプションのみを使用します。

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

時刻スタイルを使用する場合

完全な時刻表示が必要で、プリセットスタイルがロケールに適している場合は、代わりにtimeStyleを使用します。プリセットスタイルはよりシンプルで、ロケール間で一貫したフォーマットを保証します。

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

これにより、個別のオプションを指定することなく、適切なコンポーネントとフォーマットが自動的に選択されます。

どの部分を表示するかを正確に制御する必要がある場合は、個別の時刻コンポーネントを使用します。カスタマイズなしで標準的なロケール適応フォーマットが必要な場合は、時刻スタイルを使用します。

特定の時刻パーツの一般的な使用例

正確な分が重要でない、または別途処理される予約スケジュールインターフェースでは、時のみを表示します。

const time = new Date('2025-03-15T14:00:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric'
});

console.log(`Meeting at ${formatter.format(time)}`);
// "Meeting at 2 PM"

秒の精度が不要なほとんどの時計ウィジェットや時刻表示では、時と分を表示します。

const time = new Date('2025-03-15T14:05:00');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit'
});

console.log(formatter.format(time));
// "2:05 PM"

経過秒数を表示するカウントダウンタイマーでは、秒のみを表示します。

const time = new Date('2025-03-15T00:00:45');
const formatter = new Intl.DateTimeFormat('en-US', {
  second: '2-digit'
});

console.log(`${formatter.format(time)} seconds remaining`);
// "45 seconds remaining"

ログや監査証跡の正確なタイムスタンプには、時、分、秒を表示します。

const time = new Date('2025-03-15T14:05:08');
const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  second: '2-digit'
});

console.log(`Event logged at ${formatter.format(time)}`);
// "Event logged at 2:05:08 PM"

個別コンポーネント使用時の制限

hour、minute、secondなどの個別の時刻コンポーネントオプションをtimeStyleオプションと組み合わせることはできません。timeStyleプリセットは、表示するコンポーネントとそのフォーマット方法をすでに決定しています。

これは機能しません:

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

時刻スタイルを使用するか、個別コンポーネントを設定するかのいずれかを選択してください。両方を同時に使用することはできません。

時刻コンポーネントオプションと日付コンポーネントオプションを組み合わせることができます。これにより、特定の日付部分と特定の時刻部分を一緒に表示できます。

const formatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  hour: 'numeric',
  minute: '2-digit'
});

const datetime = new Date('2025-03-15T14:05:00');
console.log(formatter.format(datetime));
// "Mar 15, 2:05 PM"

また、時刻コンポーネントをtimeZone、calendar、numberingSystemなどのオプションと組み合わせることもできます。

const formatter = new Intl.DateTimeFormat('en-US', {
  hour: 'numeric',
  minute: '2-digit',
  timeZone: 'America/New_York'
});

const time = new Date('2025-03-15T14:05:00Z');
console.log(formatter.format(time));
// Displays time converted to New York timezone

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

ブラウザの言語設定を使用して、各ユーザーの期待に応じて時刻をフォーマットします。

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

const time = new Date('2025-03-15T14:05:00');
console.log(formatter.format(time));
// Output varies by user's locale
// For en-US: "2:05 PM"
// For de-DE: "14:05"
// For ja-JP: "14:05"

これにより、各ユーザーのロケールに基づいて、適切な時刻形式、区切り文字、AM/PM表示が自動的に適用されます。

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

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

const formatter = new Intl.DateTimeFormat(navigator.language, {
  hour: 'numeric',
  minute: '2-digit'
});

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

times.forEach(time => {
  console.log(formatter.format(time));
});
// Output for en-US:
// "9:00 AM"
// "2:30 PM"
// "6:45 PM"

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

覚えておくべきこと

hour、minute、secondオプションを使用すると、完全な時刻ではなく特定の時刻コンポーネントを表示できます。各オプションはnumericまたは2-digitの値を受け入れます。numeric値は先頭のゼロを省略します。2-digit値は先頭のゼロを含みます。

複数のオプションを組み合わせて、必要なコンポーネントのみを表示できます。フォーマッターは、ロケールに基づいて区切り文字、順序、書式を自動的に処理します。

時刻の書式はロケールによって異なります。一部のロケールでは、AM/PM表示付きの12時間形式を使用します。その他のロケールでは、表示なしの24時間形式を使用します。すべてのロケールに対して同じオプションを指定すると、フォーマッターが適切な規則を適用します。

表示する部分を正確に制御する必要がある場合は、個別の時刻コンポーネントを使用します。標準的な書式が必要な場合は、時刻スタイルを使用します。個別のコンポーネントオプションと時刻スタイルオプションを組み合わせることはできません。

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