期間を短縮形または完全形で表示する方法
styleオプションを使用して、期間を略語、完全な単語、またはコンパクトな記号として表示するかを制御します
はじめに
何かにかかる時間を表示する場合、フォーマットによって占めるスペースが異なります。1時間30分のワークアウト時間は、利用可能なスペースと必要な明確さに応じて、「1時間30分」、「1時間30分」、または「1時間30分」として表示できます。各フォーマットは、可読性と水平スペースのトレードオフとなります。
異なるコンテキストには異なるフォーマット選択が必要です。期間を表示するビデオプレーヤーのコントロールバーは、「1時間30分」のようなコンパクトなテキストが適しています。セッション時間を説明するワークアウト概要画面には、「1時間30分」のような明確なテキストが必要です。複数のタイマー値を表示するモバイルダッシュボードは、画面に情報を収めるために可能な限り最もコンパクトな形式を使用します。
JavaScriptのIntl.DurationFormatは、この選択を制御するためのstyleオプションを提供します。完全に綴られた単語を使用した長い表示、標準的な略語を使用した短い表示、または可能な限り最もコンパクトな表現を使用した狭い表示を選択できます。このオプションにより、ユーザーに期間がどのように表示されるかを正確に制御できます。
styleオプションが制御する内容
Intl.DurationFormatのstyleオプションは、テキストベースのフォーマットに対して3つの値を受け入れます:"long"、"short"、および"narrow"。各値は、期間出力に対して異なるレベルの冗長性を生成します。
long値は「1時間30分」のような完全な単位名を綴ります。short値は「1時間30分」のような標準的な略語を使用します。narrow値は「1時間30分」のような最もコンパクトな表現を生成し、多くの場合スペースを削除し、最小限の記号を使用します。
{/* CODE_PLACEHOLDER_63637d12592f28c35f722a6a17d8c27c */}
styleオプションを省略した場合、デフォルトで"short"になります。つまり、明示的に異なる表示スタイルを要求しない限り、期間のフォーマットには標準的な略語が使用されます。
長いスタイルで期間をフォーマットする
長いスタイルは、完全な単位名を表記します。このフォーマットは、水平方向のスペースを多く使用する代わりに、最大限の明確さを提供します。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2 hours and 30 minutes"
フォーマッターは単数形と複数形を自動的に処理します。1時間の場合は単数形の「hour」を使用し、複数時間の場合は複数形の「hours」を使用します。どちらの形式を使用するかを手動で判断する必要はありません。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 1, minutes: 30 }));
// Output: "1 hour and 30 minutes"
console.log(formatter.format({ hours: 2, minutes: 1 }));
// Output: "2 hours and 1 minute"
期間に表示される単位の数に関係なく、各単位タイプは完全に表記されます。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hours, 30 minutes and 45 seconds"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 minutes and 30 seconds"
console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// Output: "1 hour, 0 minutes and 15 seconds"
フォーマッターは単位間に適切な接続詞を追加します。英語ではカンマと「and」を使用して単位を区切ります。接続詞はリストの最後の単位の前に表示されます。
長いスタイルは、ユーザーが略語を解釈する必要なく、期間を即座に明確にします。時間の略語に不慣れなユーザーにとって、完全に表記された単位の方がアクセスしやすくなります。
短いスタイルで期間をフォーマットする
短いスタイルは、ほとんどの人が認識できる標準的な略語を使用します。このフォーマットは、可読性とスペース効率のバランスを取ります。
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2 hr and 30 min"
フォーマッターは一般的に認識される略語を使用します。時間は「hr」、分は「min」、秒は「sec」になります。これらの略語は、文字数を減らしながら可読性を維持します。
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1 hr, 46 min and 40 sec"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5 min and 30 sec"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3 hr and 15 min"
短いスタイルはデフォルトの動作です。styleオプションを省略すると、フォーマッターは自動的に短いスタイルを使用します。
const formatter = new Intl.DurationFormat("en-US");
console.log(formatter.format({ hours: 2, minutes: 30 }));
// Output: "2 hr and 30 min"
このデフォルト設定により、スタイルオプションを明示的に指定せずに標準的な略語形式の期間が必要な場合、短いスタイルが便利になります。
短縮スタイルでさまざまな期間タイプをフォーマットして、標準的な略語を確認できます。
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2 days and 5 hr"
console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1 wk and 3 days"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1 hr, 30 min, 45 sec and 500 ms"
各単位タイプは標準的な略語を使用します。日は「days」のまま、週は「wk」、ミリ秒は「ms」を使用します。これらの略語は広く認識されており、ほとんどのコンテキストで適切に機能します。
最小スタイルで期間をフォーマットする
最小スタイルは、可能な限り最もコンパクトな表現を生成します。このフォーマットはスペースを削除し、最小限の記号を使用してすべての文字を節約します。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// Output: "2h 30m"
フォーマッターは1文字の略語と最小限のスペースを使用します。時間は「h」、分は「m」、秒は「s」になります。出力は短縮スタイルや完全スタイルよりも大幅にコンパクトです。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// Output: "1h 46m 40s"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// Output: "5m 30s"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// Output: "3h 15m"
標準的な規則に基づいて、異なる単位は異なる最小表現を生成します。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// Output: "2d 5h"
console.log(formatter.format({ weeks: 1, days: 3 }));
// Output: "1w 3d"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// Output: "1h 30m 45s 500ms"
最小スタイルは、スペースが極めて限られており、ユーザーが時間測定のコンテキストに精通している場合に最適です。凝縮されたフォーマットは、ユーザーが明示的な区切りや説明なしに単位を解釈できることを前提としています。
完全、短縮、最小スタイルを比較する
3つのスタイルオプションの違いは、各オプションで同じ期間をフォーマットすると明確になります。
const longFormatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const shortFormatter = new Intl.DurationFormat("en-US", {
style: "short"
});
const narrowFormatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
const duration = { hours: 1, minutes: 30, seconds: 45 };
console.log("Long: " + longFormatter.format(duration));
console.log("Short: " + shortFormatter.format(duration));
console.log("Narrow: " + narrowFormatter.format(duration));
// Output:
// Long: 1 hour, 30 minutes and 45 seconds
// Short: 1 hr, 30 min and 45 sec
// Long: 1h 30m 45s
完全スタイルは完全な単語と明示的な接続詞を使用します。短縮スタイルは接続詞付きの標準的な略語を使用します。最小スタイルは最小限のスペースで1文字を使用します。この進行は、明確さとスペース効率のトレードオフを示しています。
さまざまな期間を比較して、各スタイルがさまざまな時間範囲をどのように処理するかを確認できます。
const durations = [
{ hours: 2, minutes: 15 },
{ minutes: 5, seconds: 30 },
{ hours: 1, minutes: 0, seconds: 10 },
{ days: 1, hours: 3, minutes: 45 }
];
durations.forEach(duration => {
const long = new Intl.DurationFormat("en-US", {
style: "long"
}).format(duration);
const short = new Intl.DurationFormat("en-US", {
style: "short"
}).format(duration);
const narrow = new Intl.DurationFormat("en-US", {
style: "narrow"
}).format(duration);
console.log("Duration:");
console.log(" Long: " + long);
console.log(" Short: " + short);
console.log(" Narrow: " + narrow);
console.log("");
});
// Output:
// Duration:
// Long: 2 hours and 15 minutes
// Short: 2 hr and 15 min
// Narrow: 2h 15m
//
// Duration:
// Long: 5 minutes and 30 seconds
// Short: 5 min and 30 sec
// Narrow: 5m 30s
//
// Duration:
// Long: 1 hour, 0 minutes and 10 seconds
// Short: 1 hr, 0 min and 10 sec
// Narrow: 1h 0m 10s
//
// Duration:
// Long: 1 day, 3 hours and 45 minutes
// Short: 1 day, 3 hr and 45 min
// Narrow: 1d 3h 45m
文字数の差は、複数の期間にわたって大きくなります。多くの期間を表示するテーブルやリストでは、最小スタイルは完全スタイルと比較して大幅に水平スペースを節約します。
言語による期間スタイルの違い
3つのスタイルオプションはすべて、指定したロケールに適応します。言語によって、略語、単位名、接続詞、スペースの使用規則が異なります。
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
const duration = { hours: 2, minutes: 30 };
locales.forEach(locale => {
const longFormatter = new Intl.DurationFormat(locale, {
style: "long"
});
const shortFormatter = new Intl.DurationFormat(locale, {
style: "short"
});
console.log(locale + ":");
console.log(" Long: " + longFormatter.format(duration));
console.log(" Short: " + shortFormatter.format(duration));
});
// Output:
// en-US:
// Long: 2 hours and 30 minutes
// Short: 2 hr and 30 min
// de-DE:
// Long: 2 Stunden und 30 Minuten
// Short: 2 Std. und 30 Min.
// fr-FR:
// Long: 2 heures et 30 minutes
// Short: 2 h et 30 min
// ja-JP:
// Long: 2時間30分
// Short: 2 時間 30 分
長いスタイルは、各言語が時間単位に独自の単語を持つため、ロケール間で大きく異なります。ドイツ語では時間に「Stunden」を使用し、フランス語では「heures」を使用し、日本語では「時間」を使用します。フォーマッターは文法的なバリエーションを自動的に処理します。
短いスタイルもロケールの規則に適応します。ドイツ語では時間に「Std.」を使用し、フランス語では「h」を使用し、日本語では数字と単位文字の間にスペースを追加します。これらのロケール固有の略語は、各文化が略語形式で期間を記述する方法を反映しています。
フォーマッターは言語ルールに従って接続詞を処理します。英語では「and」を使用し、ドイツ語では「und」を使用し、フランス語では「et」を使用し、日本語では接続詞を完全に省略します。各ロケールは、その言語に自然な出力を生成します。
const locales = ["en-US", "es-ES", "pt-BR"];
const duration = { hours: 1, minutes: 30, seconds: 45 };
locales.forEach(locale => {
const narrowFormatter = new Intl.DurationFormat(locale, {
style: "narrow"
});
console.log(locale + ": " + narrowFormatter.format(duration));
});
// Output:
// en-US: 1h 30m 45s
// es-ES: 1h 30min 45s
// pt-BR: 1h 30min 45s
狭いスタイルは、ロケール間でいくつかのバリエーションを示します。英語では「h」、「m」、「s」のような単一文字を使用します。スペイン語とポルトガル語では、分に「m」だけでなく「min」を使用します。これらの違いは、コンパクトな時間表記のロケール固有の規則を反映しています。
長いスタイルを使用するタイミング
長いスタイルは、スペース効率よりも明確性とアクセシビリティが重要な場合に最適です。この選択により、解釈を必要とせずに期間をすぐに理解できるようになります。
アクセシビリティ重視のインターフェースは、スクリーンリーダーが完全に綴られた単語をより自然に発音するため、長いスタイルの恩恵を受けます。スクリーンリーダーが「2時間30分」と読み上げる方が、「2 hr and 30 min」よりも自然に聞こえます。後者は不自然に読まれたり、特別な発音ルールが必要になる場合があります。
教育コンテンツは、学習者が時間の略語に慣れていない可能性があるため、長いスタイルの恩恵を受けます。期間を説明する教材は、混乱を避けるために単位を完全に綴るべきです。
ワークアウトの概要とセッションレポートでは、明確でプロフェッショナルなトーンを維持するためにロングスタイルを使用します。完了したワークアウトの時間を表示するフィットネスアプリでは、「1h 15m」よりも「1時間15分」の方が読みやすくなります。
正式なレポートや文書では、一貫した記述基準を維持するためにロングスタイルを使用します。ビジネスレポート、医療記録、公式文書では、通常、時間の長さを省略せずに完全に表記します。
国際的なユーザーは、言語を学習中の場合、ロングスタイルの恩恵を受けます。「時間」や「分」のように単位名を完全に表記することで、非ネイティブスピーカーにとって省略形よりも理解しやすくなります。
function formatWorkoutSummary(duration, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "long"
});
return formatter.format(duration);
}
const workout = { hours: 1, minutes: 15 };
console.log("Workout duration: " + formatWorkoutSummary(workout, "en-US"));
// Output: "Workout duration: 1 hour and 15 minutes"
ロングスタイルは、簡潔さよりも理解を優先します。ユーザーが曖昧さや解釈の努力なしに時間の長さを把握する必要がある場合は常に使用してください。
ショートスタイルを使用する場合
ショートスタイルは、スペースが重要であるが省略形が広く理解されているコンテキストで最も効果的です。これは、汎用アプリケーションで最も一般的な選択肢です。
モバイルインターフェースでは、画面幅が限られているため、ショートスタイルが有効です。複数のタイマーを表示するダッシュボードカードでは、情報を画面に収めるためにコンパクトな時間表記が必要です。「2時間30分」の代わりに「2時間30分」を使用すると、1つの時間表記あたり11文字節約でき、複数の値全体で積み重なります。
ビデオプレーヤーのコントロールでは、インターフェースを乱雑にせずに時間を表示するためにショートスタイルを使用します。コントロールバーに「1時間46分」と表示することで、「1時間46分」よりもコンパクトでありながら明確です。
列に時間を表示するデータテーブルでは、一貫した幅が必要です。「時間」、「分」、「秒」のような短い省略形により、列幅を管理しやすく保ちます。「時間」、「分」、「秒」のような長い単位は、不必要に列を広げてしまいます。
タイマーアプリケーションは、ユーザーが時間の略語に慣れているため、短縮スタイルを使用します。「5分30秒」と表示するカウントダウンタイマーは、明確性と表示スペースの効率的な使用のバランスを取ります。
フライト予約インターフェースは、移動時間を表示するために短縮スタイルを使用します。フライト検索結果に「8時間15分」と表示することは、「8h 15m」よりも明確で、「8 hours and 15 minutes」よりもコンパクトです。
function formatFlightDuration(duration, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "short"
});
return formatter.format(duration);
}
const flight = { hours: 8, minutes: 15 };
console.log(formatFlightDuration(flight, "en-US"));
// Output: "8 hr and 15 min"
短縮スタイルは、明確性と効率性のバランスを取ります。ほとんどのユーザーは、hr、min、secなどの標準的な略語を混乱なく認識します。
極短スタイルを使用する場合
極短スタイルは、すべての文字が重要で、ユーザーが時間表記に非常に慣れている、極端にスペースが制限されたコンテキストで最も効果的です。
単一のメトリクスを表示するコンパクトなウィジェットは、表示サイズが最小限の場合、極短スタイルを使用できます。大きなテキストで「5分30秒」と表示するタイマーウィジェットは、「5 minutes and 30 seconds」よりも適合します。
密度の高い情報を含むデータビジュアライゼーションは、極短スタイルの恩恵を受けます。チャートラベル、グラフ注釈、データオーバーレイは、基礎となる視覚的コンテンツを隠さないように最小限のテキストが必要です。「2時間30分」の代わりに「2h 30m」を使用すると、コンテキストを理解しているユーザーにとって読みやすさを保ちながら文字数を節約できます。
限られたスペースを持つモバイルホーム画面ウィジェットは、情報密度を最大化するために極短スタイルを使用します。小さなタイル内に複数の最近のセッションを表示するワークアウト追跡ウィジェットは、コンパクトな時間表記の恩恵を受けます。
スマートウォッチインターフェースは、画面スペースが極端に制限されているため、極短スタイルを使用します。小さな円形画面に「1時間15分」と表示することは、より長い形式よりも効果的です。
時間を含む多くのアイテムを表示するリストビューは、各行をコンパクトに保つために極短スタイルを使用できます。トラックの長さを表示する音楽プレイリスト、再生時間を表示するビデオリスト、または各エクササイズの時間を表示するエクササイズリストは、すべて最小限のフォーマットの恩恵を受けます。
function formatVideoPlaylist(videos, locale) {
const formatter = new Intl.DurationFormat(locale, {
style: "narrow"
});
return videos.map(video => ({
title: video.title,
duration: formatter.format(video.duration)
}));
}
const playlist = [
{ title: "Introduction", duration: { minutes: 2, seconds: 30 } },
{ title: "Getting Started", duration: { minutes: 5, seconds: 15 } },
{ title: "Advanced Topics", duration: { hours: 1, minutes: 10 } }
];
console.log(formatVideoPlaylist(playlist, "en-US"));
// Output:
// [
// { title: "Introduction", duration: "2m 30s" },
// { title: "Getting Started", duration: "5m 15s" },
// { title: "Advanced Topics", duration: "1h 10m" }
// ]
narrow スタイルは、ユーザーが時間表記に精通しており、補助なしで単位を解釈できることを前提としています。このオプションは、明確性を犠牲にして最大限の省スペース化を実現します。
スタイルと他のフォーマットオプションの組み合わせ
style オプションは、他のすべての期間フォーマットオプションと連携します。表示スタイルを選択しながら、表示する単位を制御できます。
const formatter = new Intl.DurationFormat("en-US", {
style: "long",
hours: "numeric",
minutes: "2-digit",
seconds: "2-digit"
});
console.log(formatter.format({ hours: 1, minutes: 5, seconds: 3 }));
// Output: "1:05:03"
この組み合わせでは、時間を long スタイルで表示しますが、分と秒にはゼロ埋めを使用した数値フォーマットを使用します。結果として、テキストと数値を混在させたハイブリッド形式になります。
一貫したスタイルを使用しながら、特定の単位のみをフォーマットできます。
const formatter = new Intl.DurationFormat("en-US", {
style: "short",
hours: "numeric",
minutes: "numeric"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// Output: "2 hr and 30 min"
フォーマッターは、期間オブジェクトに秒が含まれていても、時間と分のみを表示します。これにより、出力に表示する単位を制御できます。
異なる単位スタイルを組み合わせて、カスタムフォーマットを作成できます。
const formatter = new Intl.DurationFormat("en-US", {
hours: "long",
minutes: "short",
seconds: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45 }));
// Output: "1 hour, 30 min, 45s"
これにより、各単位が異なる詳細レベルを使用する混合フォーマットが生成されます。一般的ではありませんが、この柔軟性により、必要に応じて特殊なフォーマットを作成できます。
覚えておくべきこと
style オプションは、Intl.DurationFormat でフォーマットする際に期間がどのように表示されるかを制御します。「2時間30分」のように単位を完全に表記する場合は "long" に、「2時間30分」のような標準的な略語の場合は "short" に、「2h 30m」のようなコンパクトな形式の場合は "narrow" に設定します。省略した場合、オプションはデフォルトで "short" になります。
明確性とアクセシビリティがスペースよりも重要な場合、またはユーザーが時間の略語に不慣れな可能性がある場合は、long スタイルを使用してください。スペースが重要で、ユーザーが標準的な略語を理解している汎用アプリケーションには、short スタイルを使用してください。narrow スタイルは、ユーザーが時間表記に非常に精通している、極端にスペースが制約された状況でのみ使用してください。
フォーマッターは、異なる単位名、略語、接続詞、スペース規則、複数形など、ロケール固有のバリエーションを自動的に処理します。styleを他のフォーマットオプションと組み合わせて、表示する単位とその表示方法を制御できます。