Intl.DurationFormatジェネレーターとは
Intl.DurationFormatは、ロケールの慣習に従って時間の長さをフォーマットする組み込みのブラウザAPIです。時間、分、秒などのフィールドを持つデュレーションオブジェクトを指定すると、「1 hour, 30 minutes」（英語のlong形式）、「1 Std 30 Min.」（ドイツ語のshort形式）、「1:30:00」（digital形式）などの人間が読める文字列を生成します。long、short、narrow、digitalの4つのスタイルをサポートしています。Chrome 104+で利用可能で、Baseline 2025の一部です。
クイックアンサー
Intl.DurationFormatを使用して、ロケール対応形式で時間の長さを表示します。long、short、narrow、digitalのスタイルから選択できます。英語、ドイツ語、フランス語、スペイン語、日本語、オランダ語をサポートしています。moment-duration-formatを捨てて、代わりにネイティブAPIを使用してください。
Last updated: 2026-06-02
制限事項
- Intl.DurationFormatは2026年半ば現在Safariでは利用できません。Safariユーザー向けにポリフィルまたはフォールバックライブラリを使用するか、基本的なケースではシンプルな手動フォーマッタを実装してください。
- このAPIは単位を自動的に集約しません。{ hours: 1, minutes: 90 }は「2 hours, 30 minutes」ではなく「1 hour, 90 minutes」とフォーマットされます。自動単位変換が必要な場合は、フォーマット前にデュレーションを正規化してください。
- 各ロケールが独自のフォーマットルールと語彙を決定します。digitalスタイルは一貫した数値出力を生成しますが、long/short/narrowスタイルはレイアウト幅に影響する方法で異なる場合があります。テキストオーバーフローを避けるため、対象ロケール全体でテストしてください。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- フォーマットしたい時間コンポーネントを持つデュレーションオブジェクトを作成します：{ hours: 1, minutes: 30, seconds: 0 }。
- 選択したロケールとオプションのスタイル設定で新しいIntl.DurationFormatインスタンスを構築します。
- インスタンスでformat(duration)を呼び出してローカライズされた文字列を取得するか、formatToParts(duration)を呼び出してフォーマットされたコンポーネントの配列を取得します。
- ツールでさまざまなロケールとスタイルを試して、言語間で時間文字列がどのように変化するかを確認します。
主な用途
- ローカライズされたメディアプレーヤーインターフェースで動画の長さやポッドキャストの再生時間を表示します。
- ユーザーの希望言語形式で推定読了時間や処理時間を表示します。
- 国際化された管理ダッシュボード向けにサーバーサイドの時間（API応答時間、ジョブ実行時間）をフォーマットします。