期間の表示方法：短縮形と長縮形の使い分け

はじめに

所要時間を表示する際、そのフォーマットによって必要なスペースが変わります。たとえば、トレーニングの所要時間「1時間30分」は、スペースや分かりやすさのニーズに合わせて「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 の値は「1h 30m」のような標準的な省略形を使います。narrow の値は、さらにスペースを詰めて「1h30m」のように最小限の記号だけを使った最もコンパクトな表記となります。

const duration = { hours: 1, minutes: 30 };

const longFormatter = new Intl.DurationFormat("en-US", {
  style: "long"
});

console.log(longFormatter.format(duration));
// Output: "1 hour and 30 minutes"

const shortFormatter = new Intl.DurationFormat("en-US", {
  style: "short"
});

console.log(shortFormatter.format(duration));
// Output: "1 hr and 30 min"

const narrowFormatter = new Intl.DurationFormat("en-US", {
  style: "narrow"
});

console.log(narrowFormatter.format(duration));
// Output: "1h 30m"

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"

フォーマッターは一般的な省略表記を用います。「hours」は「hr」、「minutes」は「min」、「seconds」は「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

複数の期間を並べると文字数の差はさらに大きくなります。多くの期間を一覧表示する場合、ナロースタイルを使うとロングスタイルに比べて横幅を大幅に節約できます。

言語ごとに異なる期間スタイル

スタイルはどれも指定したロケールに合わせて自動で適用されます。各言語で略語や単位名、接続詞、スペースの使い方が異なります。

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 hours and 30 minutes」はそのまま自然に発音できますが、「2 hr and 30 min」のような略語表現は、うまく読まれなかったり、特別な発音ルールが必要になることがあります。

学習教材では、ロングスタイルの方が効果的です。学習者が時間の略語に不慣れな場合も多いため、単位を省略せずに書くことで混乱を避けられます。

ワークアウトのまとめやセッションのレポートなどでは、クリアでプロフェッショナルな印象を保つためにロングスタイルが選ばれます。たとえばフィットネスアプリで運動の所要時間を「1 hour and 15 minutes」と表示すると、「1h 15m」よりも理解しやすくなります。

フォーマルなレポートやドキュメントでは、一定の書式基準を守るためにロングスタイルが使われます。ビジネスレポート、医療記録、公的書類などでは、時間の長さを省略せずに記載するのが一般的です。

言語を学んでいるユーザーが多い国際的なオーディエンスには、長い表記スタイルが役立ちます。"hours" や "minutes" のように単位名をしっかり綴ることで、略語よりも分かりやすくなり、非ネイティブユーザーにも理解しやすくなります。

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 hr and 46 min" のような短いスタイルで再生時間を表示すると、すっきりしたインターフェイスを保てます。"1 hour and 46 minutes" よりもコンパクトで、分かりやすさも損なわれません。

データテーブルで列に時間を表示する場合、列幅を一定に保つために "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」のような標準的な略語を問題なく認識できます。

ナロースタイルを使う場面

ナロースタイルは、表示スペースが非常に限られていて、すべての文字数が重要であり、ユーザーが時間表記に慣れている場合に最適です。

単一の指標を示すコンパクトなウィジェットでは、表示サイズが最小限の場合にナロースタイルが適しています。タイマーウィジェットで大きな文字で「5m 30s」と表示する方が、「5 minutes and 30 seconds」と長く書くよりも見やすくなります。

情報量の多いデータビジュアライゼーションでは、ナロースタイルが効果的です。チャートやグラフのラベル、データオーバーレイなどは、視覚情報を邪魔しないよう最小限のテキストが求められます。たとえば「2h 30m」と表示することで、「2 hr and 30 min」よりも文字数を節約しつつ、文脈を理解しているユーザーには十分伝わります。

スペースの限られたモバイルのホーム画面ウィジェットでは、情報密度を高めるためにナロースタイルが役立ちます。最近の複数のワークアウトセッションを小さなタイルで表示するトラッキングウィジェットでは、コンパクトな時間表記が有利です。

スマートウォッチのインターフェースでは、画面スペースが非常に限られているためナロースタイルが定番です。小さな円形画面で「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"));
// Output:
// [
//   { 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 }));
// Output: "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 }));
// Output: "2 hr and 30 min"

フォーマッターは、duration オブジェクトに秒が含まれていても、時と分のみを表示します。これにより出力される単位を自由に選択できます。

さまざまな単位スタイルを組み合わせて、カスタム形式を作成することも可能です。

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 hr 30 min" のように "short"、さらに短く "2h 30m" のようなコンパクトな形にしたい場合は "narrow" を選びます。何も指定しない場合、デフォルトは "short" です。

わかりやすさやアクセシビリティを優先したいときや、利用者が時間の省略形に慣れていない場合はロングスタイルを使いましょう。一般的な用途で表示スペースが限られ、標準省略形に慣れたユーザーが多い場合はショートスタイルがおすすめです。表示スペースが極端に限られていて、かつユーザーが時間表記に非常に慣れている場合のみ、ナロースタイルを使ってください。

フォーマッターは、単位名称や短縮形、接続詞、間隔の取り方、複数形の表現方法など、ロケールごとの違いも自動的に処理します。どの単位をどのように表示するかは、style と他のフォーマットオプションを組み合わせて調整してください。