時間、分、秒のみを表示するにはどうすればよいですか？

はじめに

時間表示では、特定の要素のみを表示する必要がある場合がよくあります。時計ウィジェットでは、秒を省略して時間と分のみを表示することがあります。カウントダウンタイマーでは秒のみを表示することもあります。予約インターフェースでは、予約の時間だけを表示することもあります。

timeStyle: "short"のようなプリセットスタイルを使用して時間をフォーマットすると、ロケールによって選択された要素のセットが得られます。個々の部分を削除したり、特定の部分を追加したりすることはできません。短いスタイルに秒が含まれているが、時間と分だけが必要な場合、プリセットはあなたのニーズに合いません。

JavaScriptのIntl.DateTimeFormatは、各時間要素に対して個別のオプションを提供します。表示する部分を正確に指定し、それぞれをどのようにフォーマットするかを設定できます。このレッスンでは、時間、分、秒を個別に、または特定の組み合わせで表示する方法を説明します。

時間要素を理解する

時間には、独立してフォーマットできる3つの主要な要素があります。

hourは一日のうちの時間を示します。minuteは時間内の分を示します。secondは分内の秒を示します。

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

時間のみをフォーマットする

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の違いは、一桁の値で最も顕著になります。

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

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

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

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));
// ニューヨークタイムゾーンに変換された時間を表示

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

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

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));
// 出力はユーザーのロケールによって異なります
// en-USの場合："2:05 PM"
// de-DEの場合："14:05"
// ja-JPの場合："14:05"

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

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

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));
});
// 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からユーザーのロケールを使用して時間をフォーマットすると、各ユーザーの期待に応じた時間表示が可能になります。複数の時間をフォーマットする場合は、パフォーマンス向上のためにフォーマッターインスタンスを再利用してください。