期間表示に小数秒を含める方法

はじめに

サブ秒精度で期間を表示する場合、小数秒を表示する必要があります。ストップウォッチは1.234秒を表示し、パフォーマンスプロファイラーは0.853秒のロード時間を表示し、レースタイマーは45.678秒のフィニッシュタイムを表示します。適切なフォーマットがないと、次のようなコードを書くことになるかもしれません。

const seconds = 1.234;
const duration = `${seconds}s`;

これは、ハードコードされた小数点記号で「1.234s」を生成します。フランス語のユーザーは、小数点記号としてカンマを使用した「1,234 s」を期待しているのに「1.234s」が表示されます。ロケールによって、小数点記号とスペースの規則が異なります。

JavaScriptは、Intl.DurationFormatにfractionalDigitsオプションを提供し、フォーマットされた期間で小数秒がどのように表示されるかを制御します。このレッスンでは、期間表示に小数秒を追加し、その精度を制御する方法について説明します。

小数秒とは

小数秒は、1秒未満の時間間隔を表します。1.5秒という値は1秒半を意味します。0.250秒という値は4分の1秒を意味します。

小数秒は3つの形式で表示されます。

ミリ秒:1秒の1000分の1(0.001秒)
マイクロ秒:1秒の100万分の1(0.000001秒)
ナノ秒:1秒の10億分の1(0.000000001秒)

fractionalDigitsオプションは、秒の値の後に表示される小数点以下の桁数を制御します。fractionalDigits: 3を設定すると、ミリ秒精度が表示されます。fractionalDigits: 6を設定すると、マイクロ秒精度が表示されます。

小数秒なしで期間をフォーマットする

デフォルトでは、期間のフォーマットは小数部分なしで整数秒を表示します。

const duration = { hours: 0, minutes: 0, seconds: 1 };

new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second"

new Intl.DurationFormat('en', { style: 'digital' }).format(duration);
// "0:00:01"

ミリ秒を別の単位として含めても、小数秒としてではなく、別個の単位として表示されます。

const duration = { seconds: 1, milliseconds: 234 };

new Intl.DurationFormat('en', { style: 'long' }).format(duration);
// "1 second and 234 milliseconds"

これは2つの別々の単位を表示します。代わりに「1.234秒」と表示するには、fractionalDigitsオプションが必要です。

期間に小数秒を追加する

fractionalDigitsオプションは、秒の値に表示される小数点以下の桁数を制御します。このオプションを設定して、出力に小数秒を含めます。

const duration = { seconds: 1.234 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1.234 seconds"

APIは、整数部分と小数部分を、ロケールに適した小数点区切り文字を使用して単一のフォーマット済み値に結合します。

小数秒の精度を制御する

fractionalDigitsオプションは0から9までの値を受け入れます。これにより、小数点以下に表示される桁数が決まります。

const duration = { seconds: 1.23456789 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 0
}).format(duration);
// "1 second"

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 2
}).format(duration);
// "1.23 seconds"

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 4
}).format(duration);
// "1.2346 seconds"

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 6
}).format(duration);
// "1.234568 seconds"

指定された精度が利用可能な桁数を超える場合、フォーマッターはゼロでパディングします。

const duration = { seconds: 1.5 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 4
}).format(duration);
// "1.5000 seconds"

丸めが必要な場合、フォーマッターはゼロに向かって丸めます。

const duration = { seconds: 1.9999 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 2
}).format(duration);
// "1.99 seconds"

デジタル形式で小数秒を使用する

デジタル形式は、タイマーのようにコロンで期間を表示します。小数秒は秒の値の後に表示されます。

const duration = { hours: 2, minutes: 30, seconds: 12.345 };

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
}).format(duration);
// "2:30:12.345"

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 2
}).format(duration);
// "2:30:12.34"

これは、デジタル形式の時間単位の任意の組み合わせで機能します。

const duration = { minutes: 5, seconds: 30.678 };

new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
}).format(duration);
// "5:30.678"

異なるロケールで小数秒をフォーマットする

ロケールによって使用される小数点区切り文字が異なります。英語ではピリオドを使用し、多くのヨーロッパ言語ではカンマを使用します。

const duration = { seconds: 1.234 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1.234 seconds"

new Intl.DurationFormat('fr', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1,234 seconde"

new Intl.DurationFormat('de', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1,234 Sekunden"

new Intl.DurationFormat('ar', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "١٫٢٣٤ ثانية"

APIは、各ロケールに適した小数点区切り文字、数字文字、スペーシングを使用します。

ストップウォッチ時間をフォーマットする

ストップウォッチアプリケーションでは、サブ秒精度で経過時間を表示する必要があります。小数秒を含むデジタル形式を使用します。

{/* CODE_PLACEHOLDER_6492cf84ba35f636340fcd168bf40112 */

これは「1:05.47」のような時間を、100分の1秒の精度で小数点以下2桁で表示します。

レース完走タイムのフォーマット

スポーツ計時システムは、高精度で完走タイムを表示します。レース結果にはミリ秒精度を使用してください。

function formatRaceTime(totalSeconds, locale) {
  const minutes = Math.floor(totalSeconds / 60);
  const seconds = totalSeconds % 60;

  const duration = { minutes, seconds };

  return new Intl.DurationFormat(locale, {
    style: 'digital',
    fractionalDigits: 3
  }).format(duration);
}

formatRaceTime(125.678, 'en');
// "2:05.678"

formatRaceTime(125.678, 'fr');
// "2:05,678"

小数点以下3桁は、正確なレース計時のためのミリ秒精度を示します。

パフォーマンス指標のフォーマット

パフォーマンスプロファイラーは、読み込み時間と実行時間を秒未満の精度で表示します。小数秒を含む短縮形式を使用してください。

function formatLoadTime(seconds, locale) {
  const duration = { seconds };

  return new Intl.DurationFormat(locale, {
    style: 'short',
    fractionalDigits: 3
  }).format(duration);
}

formatLoadTime(0.853, 'en');
// "0.853 sec"

formatLoadTime(2.145, 'en');
// "2.145 sec"

これは、ミリ秒精度でパフォーマンス指標をコンパクトな形式で表示します。

動画フレームタイムスタンプのフォーマット

動画編集アプリケーションは、フレーム単位で正確なタイムスタンプを表示します。フレームレートに基づいて小数秒を使用してください。

function formatVideoTimestamp(totalSeconds, locale) {
  const hours = Math.floor(totalSeconds / 3600);
  const minutes = Math.floor((totalSeconds % 3600) / 60);
  const seconds = totalSeconds % 60;

  const duration = hours > 0
    ? { hours, minutes, seconds }
    : { minutes, seconds };

  return new Intl.DurationFormat(locale, {
    style: 'digital',
    fractionalDigits: 2
  }).format(duration);
}

formatVideoTimestamp(125.67, 'en');
// "2:05.67"

formatVideoTimestamp(3665.42, 'en');
// "1:01:05.42"

これは、100fpsの動画に対してフレームレベルの精度でタイムスタンプを表示します。

ミリ秒を小数秒に変換

時間計算では、しばしばミリ秒が生成されます。ミリ秒を1000で割ることで小数秒に変換してください。

const milliseconds = 1234;
const totalSeconds = milliseconds / 1000;

const duration = { seconds: totalSeconds };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 3
}).format(duration);
// "1.234 seconds"

これは、整数のミリ秒を小数秒の値に変換します。

非常に短い期間の処理

1秒未満の期間については、小数桁を含む秒単位のみを含めてください。

const duration = { seconds: 0.045 };

new Intl.DurationFormat('en', {
  style: 'short',
  fractionalDigits: 3
}).format(duration);
// "0.045 sec"

小数点の前のゼロは、秒未満の期間を示します。

ユースケースに応じた精度の選択

アプリケーションによって、必要な精度レベルは異なります。

ストップウォッチ:小数点以下2桁(100分の1秒)
スポーツ計時:小数点以下3桁(ミリ秒)
パフォーマンスプロファイリング:小数点以下3桁(ミリ秒)
科学的測定:小数点以下6〜9桁(マイクロ秒からナノ秒)

fractionalDigitsの値を、必要な精度に合わせてください。

const duration = { seconds: 1.23456789 };
const locale = navigator.language;

// For general timing
new Intl.DurationFormat(locale, {
  style: 'digital',
  fractionalDigits: 2
}).format(duration);
// "0:00:01.23"

// For precise measurements
new Intl.DurationFormat(locale, {
  style: 'short',
  fractionalDigits: 6
}).format(duration);
// "1.234568 sec"

測定システムが提供する精度以上の精度を表示しないでください。

不要な場合は小数秒を省略する

fractionalDigits: 0を設定して、小数部分なしで整数秒を表示します。

const duration = { seconds: 1.7 };

new Intl.DurationFormat('en', {
  style: 'long',
  fractionalDigits: 0
}).format(duration);
// "1 second"

これにより値が丸められ、整数部分のみが表示されます。

小数秒を使用してフォーマッターを再利用する

特定の精度設定でフォーマッターを作成することは、他のフォーマッターと同じパフォーマンス最適化に従います。

const formatter = new Intl.DurationFormat('en', {
  style: 'digital',
  fractionalDigits: 3
});

const times = [
  { minutes: 1, seconds: 5.234 },
  { minutes: 2, seconds: 15.678 },
  { minutes: 0, seconds: 45.901 }
];

times.map(t => formatter.format(t));
// ["1:05.234", "2:15.678", "0:45.901"]

これにより、複数の期間をフォーマットする際のパフォーマンスが向上するため、フォーマッターインスタンスが再利用されます。

ブラウザサポート

fractionalDigitsオプションはIntl.DurationFormat APIの一部であり、2025年3月にベースラインになりました。Chrome、Edge、Firefox、Safariの最新バージョンで動作します。

小数秒を使用する前にサポートを確認してください。

if (typeof Intl.DurationFormat !== 'undefined') {
  const formatter = new Intl.DurationFormat('en', {
    style: 'digital',
    fractionalDigits: 3
  });
  return formatter.format(duration);
} else {
  return `${duration.minutes}:${duration.seconds.toFixed(3)}`;
}

これにより、古いブラウザ向けのフォールバックを提供しながら、利用可能な場合はネイティブAPIを使用します。