コンパクトフォーマットで1Kと1千の選択方法
compactDisplayオプションを使用して、コンパクト数値を略語で表示するか綴りで表示するかを制御する
はじめに
大きな数値をコンパクト表記でフォーマットすると、1500という数値はデフォルトで1.5Kになります。この省略形式は、モバイル画面やダッシュボードカードのような限られたスペースのインターフェースでうまく機能します。しかし、状況によっては桁数を明示的に表記した方が良い場合もあります。同じ数値でも1.5Kではなく1.5 thousand（1.5千）と表示することで、簡潔さと引き換えに明確さを得ることができます。
JavaScriptのIntl.NumberFormatは、この選択を制御するためのcompactDisplayオプションを提供しています。K、M、Bなどの略語を使用する短い表示（short display）と、thousand（千）、million（百万）、billion（十億）のように桁数を綴る長い表示（long display）のどちらかを選択できます。このオプションにより、コンパクトな数値がユーザーにどのように表示されるかを正確に制御できます。
compactDisplayオプションが制御するもの
compactDisplayオプションは、notationを"compact"に設定した場合にのみ機能します。このオプションは"short"と"long"の2つの値を受け付けます。shortの値は1.5Kのような省略された出力を生成し、longの値は1.5 thousand（1.5千）のように綴られた出力を生成します。
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// 出力: "1.5K"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// 出力: "1.5 thousand"
compactDisplayオプションを省略した場合、デフォルトは"short"になります。つまり、明示的に長い表示を要求しない限り、コンパクト表記は略語を使用します。
短いコンパクト表示で数値をフォーマットする
短いコンパクト表示では、桁数を表すために一文字の略語を使用します。このフォーマットは読みやすさを維持しながら、水平方向のスペースを最小限に抑えます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(formatter.format(1500));
// 出力: "1.5K"
console.log(formatter.format(2400000));
// 出力: "2.4M"
console.log(formatter.format(7800000000));
// 出力: "7.8B"
console.log(formatter.format(5600000000000));
// 出力: "5.6T"
フォーマッターは数値の桁数に基づいて適切な略語を自動的に選択します。千にはK、百万にはM、十億にはB、兆にはTを使用します。
短い表示は、限られたスペースに数値を収める必要がある場合に適しています。モバイルインターフェース、データテーブル、チャートラベル、ダッシュボードカードなどは、省略された数値のコンパクトな幅の恩恵を受けます。
数値を長い省略表示でフォーマットする
長い省略表示は、桁数を表す単位を略さずに完全に表記します。この形式は横方向のスペースを多く使用する代わりに、より明確さを提供します。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(1500));
// 出力: "1.5 thousand"
console.log(formatter.format(2400000));
// 出力: "2.4 million"
console.log(formatter.format(7800000000));
// 出力: "7.8 billion"
console.log(formatter.format(5600000000000));
// 出力: "5.6 trillion"
フォーマッタは桁数を表す単位を完全に表記するため、ユーザーが略語を解釈する必要なく、数値のスケールが即座に明らかになります。K、M、Bなどの表記に慣れていないユーザーにとって、thousand、million、billionの方がより理解しやすくなります。
長い表示は、スペースよりも明確さが重要な場面で効果的です。教育コンテンツ、財務報告書、アクセシビリティを重視したインターフェース、正式な文書などでは、省略せずに表記された桁数表示が有益です。
短い省略表示と長い省略表示の比較
短い表示と長い表示の違いは、同じ数値を両方のオプションでフォーマットすると明確になります。
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
const numbers = [1500, 45000, 2400000, 950000000];
numbers.forEach(num => {
console.log(`${num}:`);
console.log(` Short: ${shortFormatter.format(num)}`);
console.log(` Long: ${longFormatter.format(num)}`);
});
// 出力:
// 1500:
// Short: 1.5K
// Long: 1.5 thousand
// 45000:
// Short: 45K
// Long: 45 thousand
// 2400000:
// Short: 2.4M
// Long: 2.4 million
// 950000000:
// Short: 950M
// Long: 950 million
短い表示は一貫して少ない文字数を使用します。略語のKは1文字ですが、thousandはスペースを含めて8文字必要です。この違いは、表やリストで多くの数値を表示する場合に顕著になります。
長い表示は各数値により多くのコンテキストを提供します。ユーザーはMが何を表すのかを解読する必要なく、2.4 millionを読むことができます。この明示性は、省略された数値形式に慣れていないユーザーにとって役立ちます。
言語によって異なるコンパクト表示
短いコンパクト表示と長いコンパクト表示の両方が、指定したロケールに適応します。異なる言語では、異なる略語や桁表現の単位が使用されます。
const locales = ["en-US", "fr-FR", "de-DE", "es-ES"];
locales.forEach(locale => {
const shortFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "short"
});
const longFormatter = new Intl.NumberFormat(locale, {
notation: "compact",
compactDisplay: "long"
});
console.log(`${locale}:`);
console.log(` Short: ${shortFormatter.format(2400000)}`);
console.log(` Long: ${longFormatter.format(2400000)}`);
});
// 出力結果:
// en-US:
// Short: 2.4M
// Long: 2.4 million
// fr-FR:
// Short: 2,4 M
// Long: 2,4 millions
// de-DE:
// Short: 2,4 Mio.
// Long: 2,4 Millionen
// es-ES:
// Short: 2,4 M
// Long: 2,4 millones
フランス語では複数形を表すために「millions」に「s」を追加します。ドイツ語では短い形式として「Mio.」、長い形式として「Millionen」を使用します。スペイン語では複数形として「millones」を使用します。各言語は短い形式と長い形式の両方に独自の文法規則を適用します。
フォーマッターはロケールに基づいてこれらのバリエーションを自動的に処理します。各言語ごとに個別のフォーマットロジックを維持する必要はありません。
アジアの言語では、まったく異なる数値のグループ化システムがよく使用されます。
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact",
compactDisplay: "short"
});
console.log(jaFormatter.format(15000000));
// 出力結果: "1500万"
const zhFormatter = new Intl.NumberFormat("zh-CN", {
notation: "compact",
compactDisplay: "short"
});
console.log(zhFormatter.format(15000000));
// 出力結果: "1500万"
日本語と中国語では、千単位ではなく万単位でグループ化します。「万」という文字は1万を表すため、15,000,000は15Mではなく1500万になります。Intl APIはこれらの数値システムの根本的な違いを自動的に処理します。
短いコンパクト表示を使用するタイミング
短い簡潔な表示は、文字数が重要な限られたスペースのコンテキストで最適に機能します。モバイルインターフェースは水平方向のスペースが限られているため、コンテンツを画面に収めるには省略された数字が不可欠です。
複数の数字を表示するデータテーブルは、均一の幅が有益です。1.5K、2.4M、7.8Bを使用することで列が整列し、折り返しを防ぎます。一貫した省略形式により、ユーザーは数字の列を素早くスキャンできます。
ダッシュボードカードやメトリクスパネルでは、情報密度を最大化するために短い表示を使用します。フォロワー数、閲覧数、複数のプラットフォーム間のエンゲージメントメトリクスを表示するダッシュボードでは、すべてのメトリクスを同時に画面に収めるためにコンパクトなフォーマットが必要です。
チャートの軸とラベルは、重複や混雑を避けるために最小限のテキストが必要です。1.5 millionの代わりに1.5Mを使用することで、軸ラベルを回転させたり切り詰めたりすることなく読みやすさを保ちます。
インタラクティブマップやデータビジュアライゼーションは、オーバーレイやツールチップとして数字を表示する際に短い表示が有益です。省略された形式により、テキストが基礎となるコンテンツを隠すことを防ぎます。
長い簡潔な表示を使用する場合
長い簡潔な表示は、スペース効率よりも明確さとアクセシビリティが重要な場合に最適です。大きな数字について教える教育コンテンツは、桁数を明示することで恩恵を受けます。人口統計や経済数値について学ぶ学生は、規模を理解するために明示的な桁数の言葉が必要です。
財務報告書や正式な文書では、曖昧さを避けるために長い表示を使用します。収益が2.4 millionと記載されているビジネスレポートは、特に省略表記の慣習に慣れていない読者にとって、2.4Mよりも明確です。
アクセシビリティに焦点を当てたインターフェースは、スクリーンリーダーがスペルアウトされた単語をより自然に発音するため、長い表示から恩恵を受けます。スクリーンリーダーが「1.5 thousand」と発表するのは、「1.5K」（「ワンポイントファイブケー」または「ワンポイントファイブK」と読まれる可能性がある）よりも自然に聞こえます。
印刷レイアウトはデジタルインターフェースよりも水平方向のスペースが多いため、長い表示が実用的です。印刷された報告書、インフォグラフィック、プレゼンテーションは、レイアウトの問題を引き起こすことなく追加の文字を収容できます。
ユーザーが省略形に慣れていない可能性があるコンテキストでは、長い表示が必要です。国際的な視聴者、非技術的なユーザー、またはデジタルリテラシーが低いユーザーは、K、M、Bよりも「thousand」、「million」、「billion」の方が認識しやすいと感じます。
コンパクト表示と他のフォーマットオプションを組み合わせる
compactDisplayオプションは、すべての数値フォーマットオプションと連携します。短い表示と長い表示を選択しながら、小数点以下の桁数、グループ化、その他のフォーマットをコントロールできます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
maximumFractionDigits: 2
});
console.log(formatter.format(1234567));
// 出力: "1.23 million"
console.log(formatter.format(9876543));
// 出力: "9.88 million"
maximumFractionDigitsオプションは小数点以下の精度をコントロールし、compactDisplayは桁数の表示形式をコントロールします。これらのオプションが連携して、必要な正確なフォーマットを生成します。
コンパクト表示と通貨フォーマットを組み合わせて、桁数を表記した金額を表示することもできます。
const formatter = new Intl.NumberFormat("en-US", {
style: "currency",
currency: "USD",
notation: "compact",
compactDisplay: "long"
});
console.log(formatter.format(2400000));
// 出力: "$2.4 million"
console.log(formatter.format(750000));
// 出力: "$750 thousand"
このフォーマットは、通貨記号と桁数の表記の両方が明確さを提供する財務レポートや予算概要で大きな金額を表示するのに適しています。
コンパクト表示は、変化やデルタを表示するための符号表示とも連携します。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long",
signDisplay: "always"
});
console.log(formatter.format(1500000));
// 出力: "+1.5 million"
console.log(formatter.format(-850000));
// 出力: "-850 thousand"
明示的な符号と桁数表記の組み合わせにより、変化がユーザーにすぐに明確になります。
覚えておくべきこと
compactDisplayオプションは、コンパクト表記が略語を使用するか、単語を綴るかをコントロールします。1.5Kのような略語出力には"short"を、1.5 thousandのような綴り出力には"long"を設定します。このオプションは省略すると"short"がデフォルトになります。
スペースが限られている場合や、一貫した幅が必要な多くの数値を表示する場合は短い表示を使用します。スペース効率よりも明確さとアクセシビリティが重要な場合は長い表示を使用します。フォーマッタは短い形式と長い形式の両方でロケール固有のバリエーションを自動的に処理します。
compactDisplayを小数点以下の桁数、通貨、符号表示などの他のフォーマットオプションと組み合わせて、アプリケーションに必要な正確な数値フォーマットを作成します。