単位を短形式または長形式で表示する方法
unitDisplayオプションを使用して、単位を略語、完全な単語、またはコンパクトな記号として表示するかを制御する
はじめに
インターフェースで測定値を表示する場合、単位は数字と共にスペースを占めます。5キロメートルという距離は、利用可能なスペースと必要な明確さに応じて、「5 km」、「5キロメートル」、または「5km」と表示できます。各フォーマットは読みやすさと水平方向のスペースのバランスを取ります。
異なるコンテキストでは異なるフォーマットの選択が必要です。複数のメトリクスを表示するモバイルダッシュボードでは、「km」や「kg」などのコンパクトな単位が有効です。測定について学生に教える教育アプリケーションでは、「キロメートル」や「キログラム」のような明確に綴られた単位が必要です。データが密集した可視化では、画面上により多くの情報を収めるために最もコンパクトな形式を使用します。
JavaScriptのIntl.NumberFormatは、この選択を制御するためのunitDisplayオプションを提供しています。標準的な略語を使用した短い表示、綴りを完全に表示する長い表示、または可能な限り最もコンパクトな表現を使用する狭い表示を選択できます。このオプションにより、ユーザーに単位がどのように表示されるかを正確に制御できます。
unitDisplayオプションが制御するもの
unitDisplayオプションは、Intl.NumberFormatでstyleを"unit"に設定した場合に機能します。このオプションは"short"、"long"、"narrow"の3つの値を受け付けます。各値は、フォーマットされた出力の単位部分に対して異なるレベルの詳細さを生成します。
short値は「5 km」や「10 lb」のような標準的な略語単位を生成します。long値は「5 kilometers」や「10 pounds」のように単位名を完全に綴ります。narrow値は「5km」や「10lb」のような最もコンパクトな表現を生成し、多くの場合、数字と単位の間のスペースを削除します。
const shortFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
console.log(shortFormatter.format(5));
// 出力: "5 km"
const longFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(longFormatter.format(5));
// 出力: "5 kilometers"
const narrowFormatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(narrowFormatter.format(5));
// 出力: "5km"
unitDisplayオプションを省略した場合、デフォルトは"short"になります。つまり、明示的に異なる表示スタイルを要求しない限り、単位のフォーマットは標準的な略語を使用します。
単位を短い表示形式でフォーマットする
短い表示形式では、ほとんどの人が認識できる標準的な略語を使用します。この形式は読みやすさとスペース効率のバランスを取っています。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "short"
});
console.log(formatter.format(5));
// 出力: "5 km"
console.log(formatter.format(42));
// 出力: "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));
// 出力: "10 km"
console.log(weightFormatter.format(25));
// 出力: "25 kg"
console.log(volumeFormatter.format(3.5));
// 出力: "3.5 L"
各単位タイプはそれぞれの標準的な略語を使用します。距離はkm、重量はkg、体積はLを使用します。これらの略語は広く認識されており、ほとんどの状況でうまく機能します。
短い表示形式はデフォルトの動作です。unitDisplayオプションを省略すると、フォーマッターは自動的に短い表示形式を使用します。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer"
});
console.log(formatter.format(5));
// 出力: "5 km"
このデフォルト設定により、表示オプションを明示的に指定せずに標準的な略語単位を使用したい場合に、短い表示形式が便利です。
単位を長い表示形式でフォーマットする
長い表示形式では、単位名を完全に綴り出します。この形式は、水平方向のスペースを多く使用する代わりに、最大限の明確さを提供します。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long"
});
console.log(formatter.format(5));
// 出力: "5 kilometers"
console.log(formatter.format(1));
// 出力: "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));
// 出力: "10 miles"
console.log(weightFormatter.format(25));
// 出力: "25 pounds"
console.log(temperatureFormatter.format(22));
// 出力: "22 degrees Celsius"
長い表示形式では、ユーザーが略語を解釈する必要なく、測定値が即座に明確になります。特に温度単位は、CやFなどの略語が曖昧になる可能性があるため、長い表示形式の恩恵を受けます。
測定略語に慣れていないユーザーにとって、綴り出された単位はより理解しやすくなります。教育コンテンツ、正式なレポート、アクセシビリティに焦点を当てたインターフェースは、この明示性の恩恵を受けます。
単位の狭い表示形式
狭い表示形式は可能な限り最もコンパクトな表現を生成します。この形式はスペースを削除し、最小限の記号を使用して文字数を節約します。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "narrow"
});
console.log(formatter.format(5));
// 出力: "5km"
console.log(formatter.format(42));
// 出力: "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));
// 出力: "10km"
console.log(speedFormatter.format(60));
// 出力: "60km/h"
console.log(weightFormatter.format(25));
// 出力: "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)}`);
});
// 出力:
// 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}`);
});
// 出力:
// 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)}`);
});
// 出力:
// 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」、日本語では「キロメートル」を使用します。
フォーマッターは文法的な変化を自動的に処理します。ドイツ語では英語の「kilometers」のように「Kilometer」を複数形にしません。フランス語では単語にアクセントを追加します。日本語では完全に異なる表記システムを使用します。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)}`);
});
// 出力:
// en-US: 60km/h
// de-DE: 60 km/h
// fr-FR: 60 km/h
英語では狭い表示でスペースを削除し、「60km/h」となります。ドイツ語とフランス語ではスペースを保持し、「60 km/h」となります。これらのロケール固有の規則は、各文化が簡潔な形式で測定値を記述する方法を反映しています。
短い表示を使用するタイミング
短い表示は、スペースが重要でありながら略語が広く理解されているコンテキストで最適に機能します。これは一般的な用途のアプリケーションで最も一般的な選択肢です。
モバイルインターフェースは画面幅が限られているため、短い表示の恩恵を受けます。複数のメトリクスを表示するダッシュボードカードでは、情報を画面に収めるためにコンパクトな単位が必要です。「42 kilometers」の代わりに「42 km」を使用すると、測定値ごとに5文字節約でき、複数の値にわたって積み重なります。
列に測定値を表示するデータテーブルでは、一貫した幅が必要です。「km」、「kg」、「L」などの短い略語は列幅を管理しやすくします。「kilometers」、「kilograms」、「liters」などの長い単位は不必要に列を広げてしまいます。
科学的・技術的インターフェースでは、これらのコンテキストのユーザーが標準的な略語に慣れているため、短い表示を使用します。エンジニア、科学者、技術専門家は、測定値が略語の単位を使用することを期待しています。
地図や視覚化では、テキストでインターフェースが煩雑になるのを避けるために短い表示を使用します。マーカーの周りのスペースが限られている場合、地図マーカーに「5 kilometers」ではなく「5 km」を表示する方が読みやすくなります。
短い表示は明確さと効率性のバランスを取ります。ほとんどのユーザーは、km、mi、kg、lb、L、galなどの標準的な略語を混乱なく認識します。
長い表示を使用するタイミング
長い表示は、スペース効率よりも明確さとアクセシビリティが重要な場合に最適です。この選択により、解釈を必要とせずに測定値がすぐに理解できるようになります。
教育コンテンツは、学生が測定略語に慣れていない可能性があるため、長い表示の恩恵を受けます。距離、重量、または体積を説明する教材では、混乱を避けるために単位をスペルアウトする必要があります。
アクセシビリティに焦点を当てたインターフェースは、スクリーンリーダーがスペルアウトされた単語をより自然に発音するため、長い表示の恩恵を受けます。「5 km」（「5 k m」または「5 kay em」と読まれる可能性がある）よりも、「5 kilometers」と発表するスクリーンリーダーの方が自然に聞こえます。
正式な文書やレポートでは、プロフェッショナルな調子を維持するために長い表示を使用します。ビジネスレポート、科学論文、公式文書では、通常、略語ではなく測定値をスペルアウトします。
測定システムが異なる場合、国際的な視聴者は長い表示の恩恵を受けます。メートル法やヤード・ポンド法の単位に慣れていないユーザーは、略語よりも「kilometers」や「miles」などのスペルアウトされた名前の方が理解しやすいと感じます。
ユーザーが測定値や単位について学んでいるコンテキストでは、長い表示が必要です。料理の測定値を教えるレシピアプリケーション、距離を説明するフィットネスアプリケーション、または体重を表示する健康アプリケーションでは、明確にスペルアウトされた単位を使用する必要があります。
ナロー表示を使用するタイミング
ナロー表示は、1文字ごとが重要で、ユーザーが測定ドメインに非常に精通している極めて限られたスペースのコンテキストで最も効果的です。
密度の高い情報を持つデータビジュアライゼーションはナロー表示の恩恵を受けます。チャートラベル、グラフの注釈、データオーバーレイは、基礎となる視覚的コンテンツを隠さないように最小限のテキストが必要です。「60 km/h」の代わりに「60km/h」を使用すると、コンテキストを理解するユーザーにとって読みやすさを維持しながら1文字節約できます。
タイルサイズが最小限の場合、単一のメトリクスを表示するコンパクトなダッシュボードタイルでナロー表示を使用できます。「60 kilometers per hour」よりも「60km/h」と大きなテキストで表示する速度計ウィジェットの方が適しています。
画面スペースが限られているモバイルウィジェットでは、情報密度を最大化するためにナロー表示を使用します。小さなホーム画面ウィジェットで気温、風速、降水量を表示する天気ウィジェットは、コンパクトな単位表記の恩恵を受けます。
専門家向けの技術的インターフェースでは、明示的な区切りなしで測定値を理解できるため、ナロー表示を使用できます。航空ディスプレイ、エンジニアリングツール、科学機器では、専門家がすぐに認識できるコンパクトな単位表記がよく使用されます。
ナロー表示は、ユーザーが測定コンテキストに精通しており、補助なしで単位を解釈できることを前提としています。このオプションは明確さと引き換えに最大限のスペース効率を提供します。
単位表示を他のフォーマットオプションと組み合わせる
unitDisplayオプションはすべての数値フォーマットオプションと連携します。単位表示スタイルを選択しながら、小数点以下の桁数、グループ化、その他のフォーマットを制御できます。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilometer",
unitDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(42.7856));
// 出力: "42.79 kilometers"
console.log(formatter.format(5.1));
// 出力: "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));
// 出力: "1.5K meters"
console.log(formatter.format(2400000));
// 出力: "2.4M meters"
この組み合わせは、大きさと単位の両方を明確にする必要がある非常に大きな測定値を表示する場合に効果的です。科学データ、地理的距離、天文学的測定は、長い単位表示を持つコンパクト表記の恩恵を受けます。
単位表示と符号表示を組み合わせて、測定値の変化や差異を表示できます。
const formatter = new Intl.NumberFormat("en-US", {
style: "unit",
unit: "kilogram",
unitDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(2.5));
// 出力: "+2.5 kilograms"
console.log(formatter.format(-1.8));
// 出力: "-1.8 kilograms"
このフォーマットは、体重変化、標高差、または変化の方向が重要な測定値を表示するのに適しています。明示的な符号とスペルアウトされた単位を組み合わせることで、変化が即座に明確になります。
覚えておくべきこと
unitDisplayオプションは、Intl.NumberFormatで測定値をフォーマットする際に単位がどのように表示されるかを制御します。"short"を設定すると「5 km」のような標準的な略語、"long"を設定すると「5 kilometers」のようにスペルアウトされた単位、"narrow"を設定すると「5km」のようなコンパクトな形式になります。このオプションを省略した場合、デフォルトは"short"です。
スペースが重要で、ユーザーが標準的な略語を理解できる汎用アプリケーションでは短い表示を使用してください。明確さとアクセシビリティがスペースよりも重要な場合や、ユーザーが略語に慣れていない可能性がある場合は、長い表示を使用してください。狭い表示は、ユーザーが測定ドメインに非常に精通している、極めてスペースが制限されたコンテキストでのみ使用してください。
フォーマッターは、異なる略語、単位名、スペースの規則、複数形など、ロケール固有のバリエーションを自動的に処理します。unitDisplayを小数点、コンパクト表記、符号表示などの他のフォーマットオプションと組み合わせて、アプリケーションに必要な正確な測定フォーマットを作成できます。