所要時間を短縮形または完全形で表示する方法
スタイルオプションを使用して、所要時間を略語、完全な単語、またはコンパクトな記号で表示するかを制御します
はじめに
何かの所要時間を表示する際、フォーマットによって占める空間が異なります。1時間30分のワークアウト時間は、利用可能なスペースと必要な明確さに応じて、「1時間30分」、「1時間 30分」、または「1h 30m」と表示できます。各フォーマットは読みやすさと水平方向のスペースのバランスを取ります。
異なるコンテキストでは異なるフォーマット選択が必要です。動画プレーヤーのコントロールバーに表示される所要時間は「1h 30m」のようなコンパクトなテキストが適しています。ワークアウトのサマリー画面でセッションの長さを説明する場合は「1時間30分」のような明確なテキストが必要です。複数のタイマー値を表示するモバイルダッシュボードでは、画面に情報を収めるために最もコンパクトな形式を使用します。
JavaScriptのIntl.DurationFormatは、この選択を制御するためのstyleオプションを提供します。単語をすべて綴る長い表示、標準的な略語を使用する短い表示、または可能な限り最もコンパクトな表現を使用する狭い表示から選択できます。このオプションにより、所要時間がユーザーにどのように表示されるかを正確に制御できます。
styleオプションが制御するもの
Intl.DurationFormatのstyleオプションは、テキストベースのフォーマットに対して"long"、"short"、"narrow"の3つの値を受け付けます。各値は所要時間の出力に対して異なるレベルの冗長性を生成します。
long値は「1時間30分」のように完全な単位名を綴ります。short値は「1時間 30分」のように標準的な略語を使用します。narrow値は「1h 30m」のような最もコンパクトな表現を生成し、多くの場合スペースを削除し最小限の記号を使用します。
const duration = { hours: 1, minutes: 30 };
const longFormatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(longFormatter.format(duration));
// 出力: "1 hour and 30 minutes"
const shortFormatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(shortFormatter.format(duration));
// 出力: "1 hr and 30 min"
const narrowFormatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(narrowFormatter.format(duration));
// 出力: "1h 30m"
styleオプションを省略した場合、デフォルトは"short"になります。つまり、明示的に異なる表示スタイルを要求しない限り、所要時間のフォーマットには標準的な略語が使用されます。
期間を長いスタイルでフォーマットする
長いスタイルは単位名を完全に綴ります。このフォーマットは水平方向のスペースを多く使用する代わりに、最大限の明確さを提供します。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
const duration = { hours: 2, minutes: 30 };
console.log(formatter.format(duration));
// 出力: "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 }));
// 出力: "1 hour and 30 minutes"
console.log(formatter.format({ hours: 2, minutes: 1 }));
// 出力: "2 hours and 1 minute"
期間に表示される単位の数に関係なく、各単位タイプは完全に綴られます。
const formatter = new Intl.DurationFormat("en-US", {
style: "long"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// 出力: "2 hours, 30 minutes and 45 seconds"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// 出力: "5 minutes and 30 seconds"
console.log(formatter.format({ hours: 1, minutes: 0, seconds: 15 }));
// 出力: "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));
// 出力: "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 }));
// 出力: "1 hr, 46 min and 40 sec"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// 出力: "5 min and 30 sec"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// 出力: "3 hr and 15 min"
短いスタイルはデフォルトの動作です。styleオプションを省略すると、フォーマッターは自動的に短いスタイルを使用します。
const formatter = new Intl.DurationFormat("en-US");
console.log(formatter.format({ hours: 2, minutes: 30 }));
// 出力: "2 hr and 30 min"
このデフォルト設定により、スタイルオプションを明示的に指定せずに標準的な略語付きの期間を表示したい場合に、短いスタイルが便利です。
異なる期間タイプを短いスタイルでフォーマットして、標準的な略語を確認できます。
const formatter = new Intl.DurationFormat("en-US", {
style: "short"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// 出力: "2 days and 5 hr"
console.log(formatter.format({ weeks: 1, days: 3 }));
// 出力: "1 wk and 3 days"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// 出力: "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));
// 出力: "2h 30m"
フォーマッターは一文字の省略形と最小限のスペースを使用します。時間は「h」、分は「m」、秒は「s」になります。出力はロングスタイルやショートスタイルよりも大幅にコンパクトです。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ hours: 1, minutes: 46, seconds: 40 }));
// 出力: "1h 46m 40s"
console.log(formatter.format({ minutes: 5, seconds: 30 }));
// 出力: "5m 30s"
console.log(formatter.format({ hours: 3, minutes: 15 }));
// 出力: "3h 15m"
異なる単位は標準的な慣例に基づいて異なるナロー表現を生成します。
const formatter = new Intl.DurationFormat("en-US", {
style: "narrow"
});
console.log(formatter.format({ days: 2, hours: 5 }));
// 出力: "2d 5h"
console.log(formatter.format({ weeks: 1, days: 3 }));
// 出力: "1w 3d"
console.log(formatter.format({ hours: 1, minutes: 30, seconds: 45, milliseconds: 500 }));
// 出力: "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));
// 出力:
// Long: 1 hour, 30 minutes and 45 seconds
// Short: 1 hr, 30 min and 45 sec
// Long: 1h 30m 45s
ロングスタイルは完全な単語と明示的な接続詞を使用します。ショートスタイルは接続詞を伴う標準的な省略形を使用します。ナロースタイルは最小限のスペースで一文字を使用します。この進行は明確さと空間効率のトレードオフを示しています。
異なる時間間隔を比較して、各スタイルがさまざまな時間幅をどのように処理するかを確認できます。
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("");
});
// 出力:
// 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時間と30分」と読み上げるよりも自然に聞こえ、後者は不自然に読まれたり、特別な発音ルールを必要としたりする可能性があります。
教育コンテンツでは、学習者が時間の略語に慣れていない可能性があるため、長いスタイルが有益です。期間を説明する教材では、混乱を避けるために単位をスペルアウトする必要があります。
ワークアウトのサマリーやセッションレポートでは、明確でプロフェッショナルなトーンを維持するために長いスタイルを使用します。完了したワークアウト時間を表示するフィットネスアプリでは、「1時間15分」の方が「1h 15m」よりも読みやすくなります。
正式なレポートやドキュメントでは、一貫した文章基準を維持するために長いスタイルを使用します。ビジネスレポート、医療記録、公式文書では、通常、時間の長さを略さずにスペルアウトします。
国際的な利用者は、言語を学んでいる場合、長いスタイルの恩恵を受けます。「時間」や「分」などのスペルアウトされた単位名は、非ネイティブスピーカーにとって略語よりも理解しやすいです。
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 hours and 30 minutes」の代わりに「2 hr and 30 min」を使用すると、1つの時間表示あたり11文字節約でき、複数の値にわたると大きな違いになります。
ビデオプレーヤーのコントロールでは、インターフェースを煩雑にせずに時間を表示するために短いスタイルを使用します。コントロールバーに「1 hour and 46 minutes」ではなく「1 hr and 46 min」と表示する方が、明確さを保ちながらもコンパクトです。
時間を表示するデータテーブルでは、一貫した列幅が必要です。「hr」、「min」、「sec」などの短い略語は列幅を管理しやすくします。「hours」、「minutes」、「seconds」などの長い単位は不必要に列を広げてしまいます。
タイマーアプリケーションでは、タイマーを確認するユーザーは時間の略語に慣れているため、短いスタイルを使用します。「5 min and 30 sec」と表示するカウントダウンタイマーは、表示スペースを効率的に使いながら明確さのバランスを取っています。
航空券予約インターフェースでは、移動時間を表示するために短いスタイルを使用します。フライト検索結果で「8 hr and 15 min」と表示することは、「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秒」よりも「5m 30s」と大きなテキストで表示するタイマーウィジェットの方が適しています。
密度の高い情報を持つデータの可視化は、狭いスタイルの恩恵を受けます。チャートラベル、グラフの注釈、データオーバーレイは、基礎となる視覚的コンテンツを隠さないように最小限のテキストが必要です。「2時間30分」の代わりに「2h 30m」を使用することで、文脈を理解するユーザーにとって読みやすさを維持しながら文字数を節約できます。
スペースが限られたモバイルのホーム画面ウィジェットでは、情報密度を最大化するために狭いスタイルを使用します。小さなタイルに複数の最近のセッションを表示するワークアウト追跡ウィジェットは、コンパクトな時間表記の恩恵を受けます。
スマートウォッチのインターフェースは、画面スペースが非常に限られているため、狭いスタイルを使用します。小さな円形画面に「1h 15m」を表示する方が、より長い形式よりも適しています。
時間を含む多くの項目を表示するリストビューでは、各行をコンパクトに保つために狭いスタイルを使用できます。トラックの再生時間を表示する音楽プレイリスト、実行時間を表示する動画リスト、またはエクササイズごとの時間を表示するエクササイズリストはすべて、最小限のフォーマットの恩恵を受けます。
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"));
// 出力:
// [
// { title: "Introduction", duration: "2m 30s" },
// { title: "Getting Started", duration: "5m 15s" },
// { title: "Advanced Topics", duration: "1h 10m" }
// ]
狭いスタイルは、ユーザーが時間表記に慣れており、補助なしで単位を解釈できることを前提としています。このオプションは明確さと引き換えに、最大限のスペース効率を提供します。
スタイルを他のフォーマットオプションと組み合わせる
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 }));
// 出力: "1:05:03"
この組み合わせでは、時間は長いスタイルで表示しますが、分と秒にはゼロ埋めの数値フォーマットを使用します。結果として、テキストと数字を混合したハイブリッドフォーマットになります。
一貫したスタイルを使用しながら、特定の単位のみをフォーマットすることもできます。
const formatter = new Intl.DurationFormat("en-US", {
style: "short",
hours: "numeric",
minutes: "numeric"
});
console.log(formatter.format({ hours: 2, minutes: 30, seconds: 45 }));
// 出力: "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 }));
// 出力: "1 hour, 30 min, 45s"
これにより、各単位が異なる詳細レベルを使用する混合フォーマットが生成されます。一般的ではありませんが、この柔軟性により、必要に応じて特殊なフォーマットを作成できます。
覚えておくべきこと
styleオプションは、Intl.DurationFormatでフォーマットする際の期間の表示方法を制御します。「2 hours and 30 minutes」のようにスペルアウトされた単位には"long"を、「2 hr and 30 min」のような標準的な略語には"short"を、「2h 30m」のようなコンパクトな形式には"narrow"を設定します。省略した場合、オプションはデフォルトで"short"になります。
明確さとアクセシビリティがスペースよりも重要な場合や、ユーザーが時間の略語に慣れていない可能性がある場合は、長いスタイルを使用します。スペースが重要で、ユーザーが標準的な略語を理解している汎用アプリケーションには、短いスタイルを使用します。狭いスタイルは、ユーザーが時間表記に非常に精通している、極めてスペースが制限されたコンテキストでのみ使用してください。
フォーマッタは、単位名、略語、接続詞、間隔の規則、複数形など、ロケール固有のバリエーションを自動的に処理します。styleを他のフォーマットオプションと組み合わせて、表示される単位とその表示方法を制御します。