単位を短縮形または完全形で表示する方法
unitDisplayオプションを使用して、単位を略語、完全な単語、またはコンパクトな記号として表示するかを制御します
はじめに
インターフェースで測定値を表示する場合、単位は数値と並んでスペースを占有します。5キロメートルという距離は、利用可能なスペースの量と必要な明確さに応じて、「5 km」、「5キロメートル」、または「5km」として表示できます。各形式は、可読性と水平スペースのトレードオフを行います。
異なるコンテキストには、異なる書式設定の選択が必要です。複数の指標を表示するモバイルダッシュボードは、「km」や「kg」などのコンパクトな単位から恩恵を受けます。学生に測定について教える教育アプリケーションには、「キロメートル」や「キログラム」などの明確でスペルアウトされた単位が必要です。データ密度の高い可視化では、画面により多くの情報を収めるために、可能な限り最もコンパクトな形式を使用します。
JavaScriptのIntl.NumberFormatは、この選択を制御するためのunitDisplayオプションを提供します。標準的な略語を使用した短縮表示、スペルアウトされた単語を使用した完全表示、または可能な限り最もコンパクトな表現を使用した狭い表示を選択できます。このオプションにより、単位がユーザーにどのように表示されるかを正確に制御できます。
unitDisplayオプションが制御する内容
unitDisplayオプションは、Intl.NumberFormatでstyleを"unit"に設定した場合に機能します。これは3つの値を受け入れます:"short"、"long"、および"narrow"。各値は、フォーマットされた出力の単位部分に対して異なるレベルの冗長性を生成します。
short値は「5 km」や「10 lb」などの標準的な略語単位を生成します。long値は「5キロメートル」や「10ポンド」などの完全な単位名をスペルアウトします。narrow値は「5km」や「10lb」などの最もコンパクトな表現を生成し、多くの場合、数値と単位の間のスペースを削除します。
const shortFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
console.log(shortFormatter.format(5));
// Output: "5 km"
const longFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(longFormatter.format(5));
// Output: "5 kilometers"
const narrowFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(narrowFormatter.format(5));
// Output: "5km"
unitDisplayオプションを省略した場合、デフォルトで"short"になります。つまり、明示的に異なる表示スタイルを要求しない限り、単位のフォーマットには標準的な略語が使用されます。
短縮表示で単位をフォーマットする
短縮表示では、ほとんどの人が認識できる標準的な略語を使用します。このフォーマットは、可読性とスペース効率のバランスを取ります。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
console.log(formatter.format(5));
// Output: "5 km"
console.log(formatter.format(42));
// Output: "42 km"
フォーマッターは数値と略語化された単位の間にスペースを追加します。この区切りにより、出力をコンパクトに保ちながら可読性が向上します。
短縮表示でさまざまな単位タイプをフォーマットできます。
const distanceFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
const weightFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "short"
});
const volumeFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "liter",
unitDisplay: "short"
});
console.log(distanceFormatter.format(10));
// Output: "10 km"
console.log(weightFormatter.format(25));
// Output: "25 kg"
console.log(volumeFormatter.format(3.5));
// Output: "3.5 L"
各単位タイプは標準的な略語を使用します。距離はkm、重量はkg、体積はLを使用します。これらの略語は広く認識されており、ほとんどのコンテキストで適切に機能します。
短縮表示はデフォルトの動作です。unitDisplayオプションを省略すると、フォーマッターは自動的に短縮表示を使用します。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer"
});
console.log(formatter.format(5));
// Output: "5 km"
このデフォルト設定により、表示オプションを明示的に指定せずに標準的な略語単位が必要な場合、短縮表示が便利になります。
完全表示で単位をフォーマットする
完全表示では、単位名を完全にスペルアウトします。このフォーマットは、水平スペースを追加で使用する代わりに、最大限の明確さを提供します。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(formatter.format(5));
// Output: "5 kilometers"
console.log(formatter.format(1));
// Output: "1 kilometer"
フォーマッターは単数形と複数形を自動的に処理します。1つの単位は単数形の「kilometer」を使用し、複数の単位は複数形の「kilometers」を使用します。どちらの形式を使用するかを手動で決定する必要はありません。
完全表示でさまざまな単位をフォーマットして、完全な単位名を確認できます。
const distanceFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "mile",
unitDisplay: "long"
});
const weightFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "pound",
unitDisplay: "long"
});
const temperatureFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "celsius",
unitDisplay: "long"
});
console.log(distanceFormatter.format(10));
// Output: "10 miles"
console.log(weightFormatter.format(25));
// Output: "25 pounds"
console.log(temperatureFormatter.format(22));
// Output: "22 degrees Celsius"
完全表示により、ユーザーが略語を解釈する必要なく、測定値が即座に明確になります。特に温度単位は、CやFなどの略語が曖昧になる可能性があるため、完全表示の恩恵を受けます。
測定の略語に不慣れなユーザーにとって、完全に表記された単位の方がアクセスしやすくなります。教育コンテンツ、正式なレポート、アクセシビリティを重視したインターフェースでは、この明示性が有益です。
狭い表示形式で単位をフォーマットする
狭い表示形式は、可能な限り最もコンパクトな表現を生成します。この形式はスペースを削除し、最小限の記号を使用して文字数を節約します。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(formatter.format(5));
// Output: "5km"
console.log(formatter.format(42));
// Output: "42km"
フォーマッターは数値と単位の間のスペースを削除し、より凝縮された出力を作成します。これにより、極めて制約のあるレイアウトで横方向のスペースを節約できます。
異なる単位は、標準的な慣例に基づいて異なる狭い表現を生成します。
const distanceFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
const speedFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer-per-hour",
unitDisplay: "narrow"
});
const weightFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "narrow"
});
console.log(distanceFormatter.format(10));
// Output: "10km"
console.log(speedFormatter.format(60));
// Output: "60km/h"
console.log(weightFormatter.format(25));
// Output: "25kg"
狭い表示形式は、スペースが極めて限られており、ユーザーが測定のコンテキストに精通している場合に最適です。凝縮された形式は、ユーザーが明示的な区切りや説明なしに単位を解釈できることを前提としています。
短い表示、長い表示、狭い表示を比較する
3つの表示オプションの違いは、同じ測定値を各オプションでフォーマットすると明確になります。
const shortFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
const longFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
const narrowFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
const distances = [1, 5, 10, 42];
distances.forEach(distance => {
console.log(`${distance}:`);
console.log(` Short: ${shortFormatter.format(distance)}`);
console.log(` Long: ${longFormatter.format(distance)}`);
console.log(` Narrow: ${narrowFormatter.format(distance)}`);
});
// Output:
// 1:
// Short: 1 km
// Long: 1 kilometer
// Narrow: 1km
// 5:
// Short: 5 km
// Long: 5 kilometers
// Narrow: 5km
// 10:
// Short: 10 km
// Long: 10 kilometers
// Narrow: 10km
// 42:
// Short: 42 km
// Long: 42 kilometers
// Narrow: 42km
短い表示は単位部分に4〜5文字を使用します。長い表示は複数形を含めて9〜10文字を使用します。狭い表示は2文字を使用し、スペースを削除します。この進行は、明確性とスペース効率のトレードオフを示しています。
異なる単位タイプを比較して、各表示オプションがさまざまな測定値をどのように処理するかを確認できます。
const units = [
{ unit: "mile", value: 10 },
{ unit: "pound", value: 25 },
{ unit: "gallon", value: 5 },
{ unit: "fahrenheit", value: 72 }
];
units.forEach(({ unit, value }) => {
const short = new Intl.NumberFormat("en-US", {
style: "unit",
unit: unit,
unitDisplay: "short"
}).format(value);
const long = new Intl.NumberFormat("en-US", {
style: "unit",
unit: unit,
unitDisplay: "long"
}).format(value);
const narrow = new Intl.NumberFormat("en-US", {
style: "unit",
unit: unit,
unitDisplay: "narrow"
}).format(value);
console.log(`${unit}:`);
console.log(` Short: ${short}`);
console.log(` Long: ${long}`);
console.log(` Narrow: ${narrow}`);
});
// Output:
// mile:
// Short: 10 mi
// Long: 10 miles
// Narrow: 10mi
// pound:
// Short: 25 lb
// Long: 25 pounds
// Narrow: 25lb
// gallon:
// Short: 5 gal
// Long: 5 gallons
// Narrow: 5gal
// fahrenheit:
// Short: 72°F
// Long: 72 degrees Fahrenheit
// Narrow: 72°F
温度単位は興味深い動作を示します。短い表示と狭い表示はどちらも度記号と略語単位を使用しますが、長い表示は「degrees Fahrenheit」と完全に表記します。これにより、完全なコンテキストが重要な温度において、長い表示が特に価値のあるものになります。
単位表示が言語間でどのように変化するか
3つの表示オプションはすべて、指定したロケールに適応します。異なる言語は、異なる略語、単位名、スペーシング規則を使用します。
const locales = ["en-US", "de-DE", "fr-FR", "ja-JP"];
locales.forEach(locale => {
const shortFormatter = new Intl.NumberFormat(locale, {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
const longFormatter = new Intl.NumberFormat(locale, {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(5)}`);
console.log(` Long: ${longFormatter.format(5)}`);
});
// Output:
// en-US:
// Short: 5 km
// Long: 5 kilometers
// de-DE:
// Short: 5 km
// Long: 5 Kilometer
// fr-FR:
// Short: 5 km
// Long: 5 kilomètres
// ja-JP:
// Short: 5 km
// Long: 5キロメートル
短い表示形式は、「km」が国際的に認識されている略語であるため、ロケール間で一貫性を保ちます。長い表示形式は、各言語がキロメートルを表す独自の単語を持つため、異なります。ドイツ語では「Kilometer」、フランス語では「kilomètres」、日本語では「キロメートル」を使用します。
フォーマッターは文法的な変化を自動的に処理します。ドイツ語の「Kilometer」は、英語の「kilometers」のように複数形にはなりません。フランス語では単語にアクセント記号が付きます。日本語では全く異なる表記体系を使用します。Intl APIは、ロケールに基づいてこれらの違いを管理します。
一部のロケールでは、狭い表示形式を他のロケールとは異なる方法で処理します。
const locales = ["en-US", "de-DE", "fr-FR"];
locales.forEach(locale => {
const narrowFormatter = new Intl.NumberFormat(locale, {
style: "unit",
unit: "kilometer-per-hour",
unitDisplay: "narrow"
});
console.log(`${locale}: ${narrowFormatter.format(60)}`);
});
// Output:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h
英語では狭い表示形式でスペースを削除し、「60km/h」となります。ドイツ語とフランス語ではスペースを保持し、「60 km/h」となります。これらのロケール固有の慣習は、各文化がコンパクトな形式で測定値をどのように記述するかを反映しています。
短い表示形式を使用するタイミング
短い表示形式は、スペースが重要であるが略語が広く理解されている状況で最も効果的です。これは汎用アプリケーションで最も一般的な選択肢です。
モバイルインターフェースは、画面幅が制限されているため、短い表示形式の恩恵を受けます。複数の指標を表示するダッシュボードカードは、情報を画面に収めるためにコンパクトな単位が必要です。「42 kilometers」の代わりに「42 km」を使用すると、1つの測定値あたり5文字節約でき、複数の値全体で積み重なります。
列に測定値を表示するデータテーブルには、一貫した幅が必要です。「km」、「kg」、「L」などの短い略語は、列幅を管理しやすく保ちます。「kilometers」、「kilograms」、「liters」などの長い単位は、不必要に列を広げます。
科学技術インターフェースでは、これらの分野のユーザーが標準的な略語に精通しているため、短い表示形式を使用します。エンジニア、科学者、技術専門家は、測定値が略語単位を使用することを期待しています。
地図や可視化では、テキストでインターフェースを乱雑にしないように短い表示形式を使用します。マーカー周辺のスペースが限られている場合、地図マーカーに「5 kilometers」ではなく「5 km」を表示する方が読みやすくなります。
短い表示は、明瞭性と効率性のバランスを取ります。ほとんどのユーザーは、km、mi、kg、lb、L、galなどの標準的な略語を混乱なく認識します。
長い表示を使用する場合
長い表示は、スペース効率よりも明瞭性とアクセシビリティが重要な場合に最適です。この選択により、解釈を必要とせずに測定値を即座に理解できるようになります。
教育コンテンツは長い表示の恩恵を受けます。なぜなら、学生は測定の略語に慣れていない可能性があるためです。距離、重量、または体積を説明する教材は、混乱を避けるために単位を完全に表記する必要があります。
アクセシビリティ重視のインターフェースは長い表示の恩恵を受けます。なぜなら、スクリーンリーダーは完全に表記された単語をより自然に発音するためです。スクリーンリーダーが「5キロメートル」と読み上げる方が、「5 km」よりも自然に聞こえます。後者は「5ケーエム」または「5ケイエム」と読まれる可能性があります。
正式な文書やレポートは、専門的なトーンを維持するために長い表示を使用します。ビジネスレポート、科学論文、公式文書は通常、測定値を略さずに完全に表記します。
測定システムが異なる場合、国際的なオーディエンスは長い表示の恩恵を受けます。メートル法やヤード・ポンド法に慣れていないユーザーは、略語よりも「キロメートル」や「マイル」のように完全に表記された名前の方が理解しやすいと感じます。
ユーザーが測定値や単位について学習している状況では、長い表示が必要です。料理の測定値を教えるレシピアプリケーション、距離を説明するフィットネスアプリケーション、または体重を表示する健康アプリケーションは、明確で完全に表記された単位を使用する必要があります。
狭い表示を使用する場合
狭い表示は、すべての文字が重要であり、ユーザーが測定領域に非常に精通している、極めてスペースが制約された状況で最適です。
密度の高い情報を含むデータ可視化は、狭い表示の恩恵を受けます。チャートラベル、グラフ注釈、データオーバーレイは、基礎となる視覚コンテンツを隠さないように最小限のテキストが必要です。「60km/h」を「60 km/h」の代わりに使用すると、1文字節約でき、コンテキストを理解しているユーザーにとって読みやすいままです。
単一の指標を表示するコンパクトなダッシュボードタイルは、タイルサイズが最小の場合に狭い表示を使用できます。大きなテキストで「60km/h」と表示するスピードメーターウィジェットは、「60 kilometers per hour」よりも適しています。
画面スペースが限られたモバイルウィジェットは、情報密度を最大化するために狭い表示を使用します。小さなホーム画面ウィジェットで気温、風速、降水量を表示する天気ウィジェットは、コンパクトな単位の恩恵を受けます。
専門家ユーザー向けの技術的なインターフェースは、対象者が明示的な分離なしに測定値を理解できるため、狭い表示を使用できます。航空ディスプレイ、エンジニアリングツール、科学機器は、専門家が即座に認識できるコンパクトな単位表記を使用することがよくあります。
狭い表示は、ユーザーが測定コンテキストに精通しており、支援なしで単位を解釈できることを前提としています。このオプションは、最大限のスペース効率のために明確さを犠牲にします。
単位表示を他のフォーマットオプションと組み合わせる
unitDisplayオプションは、他のすべての数値フォーマットオプションと連携します。単位表示スタイルを選択しながら、小数点以下の桁数、グループ化、その他のフォーマットを制御できます。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(42.7856));
// Output: "42.79 kilometers"
console.log(formatter.format(5.1));
// Output: "5.1 kilometers"
maximumFractionDigitsオプションは小数点の精度を制御し、unitDisplayは単位フォーマットを制御します。これらのオプションは連携して、必要な正確なフォーマットを生成します。
単位表示をコンパクト表記と組み合わせて、大きな測定値を読みやすい形式で表示できます。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "meter",
unitDisplay: "long",
notation: "compact"
});
console.log(formatter.format(1500));
// Output: "1.5K meters"
console.log(formatter.format(2400000));
// Output: "2.4M meters"
この組み合わせは、大きさと単位の両方を明確にする必要がある非常に大きな測定値を表示する場合に効果的です。科学データ、地理的距離、天文学的測定は、長い単位表示を伴うコンパクト表記の恩恵を受けます。
単位表示を符号表示と組み合わせて、測定値の変化や差異を表示できます。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(2.5));
// Output: "+2.5 kilograms"
console.log(formatter.format(-1.8));
// Output: "-1.8 kilograms"
この形式は、体重の変化、標高差、または変化の方向が重要な測定値を表示する場合に適しています。明示的な符号と完全表記された単位を組み合わせることで、変化が即座に明確になります。
覚えておくべきこと
unitDisplayオプションは、Intl.NumberFormatで測定値をフォーマットする際に単位がどのように表示されるかを制御します。標準的な略語(「5 km」など)には"short"を、完全表記の単位(「5 kilometers」など)には"long"を、コンパクトな形式(「5km」など)には"narrow"を設定します。このオプションは省略された場合、デフォルトで"short"になります。
スペースが重要で、ユーザーが標準的な略語を理解している汎用アプリケーションには短縮表示を使用します。明確性とアクセシビリティがスペースよりも重要な場合、またはユーザーが略語に不慣れな可能性がある場合は、完全表示を使用します。狭小表示は、ユーザーが測定領域に非常に精通しており、極端にスペースが制約されたコンテキストでのみ使用してください。
フォーマッターは、異なる略語、単位名、スペース規則、複数形を含む、ロケール固有のバリエーションを自動的に処理します。unitDisplayを小数点以下の桁数、コンパクト表記、符号表示などの他のフォーマットオプションと組み合わせて、アプリケーションに必要な正確な測定形式を作成してください。