数値を1K、1M、1Bとして表示する方法
コンパクト表記を使用して大きな数値をスペース効率の良い読みやすい形式で表示する
はじめに
大きな数値は多くのスペースを占め、素早く把握することが困難です。1,500,000のような数値は書式設定を含めて7桁必要ですが、1.5Mなら同じ大きさを3文字で表現できます。このコンパクトな表記は、ソーシャルメディアのフォロワー数、動画の視聴回数、ダッシュボードのメトリクス、ファイルサイズなどでよく使用されています。
JavaScriptでは、Intl.NumberFormat APIを通じてコンパクトな数値フォーマットをネイティブにサポートしています。このAPIは自動的に変換を処理し、異なる言語や地域に合わせてフォーマットを適応させ、すべてのユーザーに対して数値が正しく表示されるようにします。
大きな数値がコンパクトなフォーマットを必要とする理由
ユーザーインターフェースで大きな数値を表示する場合、2つの問題が発生します。まず、数値が水平方向のスペースを消費します。1,234,567ビューを表示するカウンターは、1.2Mビューを表示するものよりも多くのスペースを必要とします。次に、ユーザーはコンパクトな数値をより速く処理します。人間の脳は1,500,000を解析するよりも、1.5Mを150万として認識する方が速いのです。
コンパクト表記は、末尾のゼロを大きさを示す指標に置き換えることで、両方の問題を解決します。すべての桁を表示する代わりに、有効数字のみを表示し、その後に大きさを表す文字を付けます。このアプローチは精度と読みやすさのバランスを取ります。
異なるコンテキストでは異なるレベルの精度が必要です。ソーシャルメディアのフォロワー数は正確な数値を必要とすることはほとんどありません。1,234,567フォロワーの代わりに1.2Mフォロワーを表示すれば十分な情報を提供します。財務ダッシュボードではより高い精度が必要かもしれず、1.2Mではなく1.23Mを表示します。Intl APIを使用すると、コンパクトなフォーマットを維持しながらこの精度を制御できます。
JavaScriptでコンパクト表記を使用する
Intl.NumberFormatのnotationオプションは、数値の表現方法を制御します。これを"compact"に設定すると、コンパクトなフォーマットが有効になります。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(1500));
// 出力: "1.5K"
console.log(formatter.format(1500000));
// 出力: "1.5M"
console.log(formatter.format(1500000000));
// 出力: "1.5B"
フォーマッターは数値の大きさに基づいて適切な大きさの指標を自動的に選択します。千はK、百万はM、十億はBになります。フォーマッターはまた、数値を読みやすい形に縮小し、1.5千の代わりに1.5Kを表示します。
K、M、Bをいつ使用するかを決定するロジックを書く必要はありません。Intl APIは数値の大きさに基づいてこの決定を処理します。
コンパクト表記が異なる桁数をどのようにフォーマットするか
コンパクト表記は異なるスケールで異なるフォーマットを適用します。これらのしきい値を理解することで、数値がどのように表示されるかを予測するのに役立ちます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(500));
// 出力: "500"
console.log(formatter.format(1000));
// 出力: "1K"
console.log(formatter.format(1500));
// 出力: "1.5K"
console.log(formatter.format(999000));
// 出力: "999K"
console.log(formatter.format(1000000));
// 出力: "1M"
console.log(formatter.format(1500000));
// 出力: "1.5M"
console.log(formatter.format(1000000000));
// 出力: "1B"
console.log(formatter.format(1000000000000));
// 出力: "1T"
1000未満の数値は圧縮せずに表示されます。数値が1000に達すると、K表記に切り替わります。同じパターンが百万、十億、兆にも続きます。
フォーマッタはコンパクトな表現に合わせて数値を丸めます。例えば、1,234,567という数値はデフォルトで1.2Mになります。次のレッスンでは、コンパクト表記で表示される小数点以下の桁数を制御する方法について説明します。
短い表示と長い表示の選択
コンパクト表記には2つの表示スタイルがあります。短いスタイルはK、M、Bなどの文字を使用します。長いスタイルは桁数を単語として綴ります。
const shortFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "short"
});
console.log(shortFormatter.format(1500));
// 出力: "1.5K"
console.log(shortFormatter.format(1500000));
// 出力: "1.5M"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// 出力: "1.5 thousand"
console.log(longFormatter.format(1500000));
// 出力: "1.5 million"
compactDisplayオプションでこの動作を制御します。"short"と"long"の2つの値を受け付けます。このオプションを省略すると、デフォルトで"short"になります。
短い表示はスペースが限られている場合に適しています。ダッシュボードカード、モバイルインターフェース、データテーブルはK、M、Bの簡潔さの恩恵を受けます。長い表示はスペースよりも明確さが重要な場合に適しています。教育コンテンツ、財務報告書、アクセシビリティに焦点を当てたインターフェースは、桁数を綴ることで恩恵を受けます。
異なる言語での簡略表記の仕組み
簡略表記はロケールで指定された言語と地域に適応します。異なる言語では、桁数表示に異なる文字、単語、フォーマット規則を使用します。
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(enFormatter.format(1500000));
// 出力: "1.5M"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact"
});
console.log(frFormatter.format(1500000));
// 出力: "1,5 M"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact"
});
console.log(deFormatter.format(1500000));
// 出力: "1,5 Mio."
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(15000000));
// 出力: "1500万"
フランス語ではMの前にスペースを入れます。ドイツ語ではMillionの略語としてMio.を使用します。日本語では完全に異なる数字体系を使用し、「万」は1万を表します。
これらの違いはロケールに基づいて自動的に処理されます。異なる桁数表示を処理するためにロケール固有のコードを書く必要はありません。ユーザーの言語設定をフォーマッターに渡すだけで、その言語に適した出力が生成されます。
長い表示形式も各言語に適応します。
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(enFormatter.format(1500000));
// 出力: "1.5 million"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact",
compactDisplay: "long"
});
console.log(frFormatter.format(1500000));
// 出力: "1,5 million"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact",
compactDisplay: "long"
});
console.log(deFormatter.format(1500000));
// 出力: "1,5 Millionen"
ドイツ語ではmillionの複数形としてMillionenを使用します。フランス語ではmillionにsをつけません。Intl APIはこれらの言語的な違いを自動的に処理します。
小さな数値が簡略化されない場合
簡略化の閾値以下の数値は通常通り表示されます。この閾値はロケールによって異なりますが、多くの西洋言語では通常1000から始まります。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(10));
// 出力: "10"
console.log(formatter.format(100));
// 出力: "100"
console.log(formatter.format(999));
// 出力: "999"
console.log(formatter.format(1000));
// 出力: "1K"
この動作により、小さな数値の不自然なフォーマットが防止されます。500を0.5Kとして表示するよりも、500として表示する方が明確です。フォーマッターは読みやすさが向上する場合にのみ簡略表記を適用します。
閾値は常に1000とは限りません。日本語のような一部の言語では、異なる数値のグループ化システムを使用します。日本語は1万単位でグループ化するため、簡略表記の開始閾値が異なる場合があります。
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(9999));
// 出力: "9999"
console.log(jaFormatter.format(10000));
// 出力: "1万"
Intl APIはこれらのロケール固有の閾値を自動的に処理します。
コンパクト表記と他のフォーマットオプションの組み合わせ
コンパクト表記は他の数値フォーマットオプションと連携します。コンパクト表記を使用しながら、小数点以下の桁数、区切り記号、丸めを制御できます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 1
});
console.log(formatter.format(1234567));
// 出力: "1.2M"
const preciseFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 2
});
console.log(preciseFormatter.format(1234567));
// 出力: "1.23M"
const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 0
});
console.log(noDecimalsFormatter.format(1234567));
// 出力: "1M"
maximumFractionDigitsオプションは整数部分の後に表示される小数点以下の桁数を制御します。これを0に設定すると、すべての小数点以下の桁が削除され、数値がさらにコンパクトになります。
また、コンパクト表記と最小桁数オプションを組み合わせて、さまざまな数値間で一貫したフォーマットを確保することもできます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(1000));
// 出力: "1.0K"
console.log(formatter.format(1500));
// 出力: "1.5K"
console.log(formatter.format(2000));
// 出力: "2.0K"
このアプローチにより、すべての数値が小数点以下1桁を表示するため、表やグラフの視覚的な一貫性を維持するのに役立ちます。
コンパクト表記を使用するタイミング
コンパクト表記は、スペースが限られている場合や正確な精度が重要でない場合に最適です。ソーシャルメディアのカウンター、ダッシュボードのメトリクス、要約統計などが理想的なユースケースです。ユーザーは動画の再生回数が正確に1,234,567回であることを知る必要はありません。1.2M回の再生があることを知れば十分な情報です。
正確な数値が重要な場合はコンパクト表記を使用しないでください。金融取引、科学的測定、法的文書には完全な精度が必要です。銀行残高は$1,234.56と表示すべきで、$1.2Kではありません。請求書は$1,500.00と表示すべきで、$1.5Kではありません。
対象ユーザーとコンテキストを考慮してください。データアナリストは正確な値を理解するために完全な数値を見ることを好むかもしれません。一般消費者は処理が速いため、コンパクトな数値を好むことが多いです。一部のインターフェースでは両方のオプションを提供し、デフォルトではコンパクトな数値を表示し、必要に応じて正確な数値を表示する方法を提供しています。
コンパクト表記はファイルサイズにも適していますが、実装は若干異なります。ファイルサイズは通常、1000ではなく1024のべき乗を使用するため、キロバイトやメガバイトではなく、キビバイトやメビバイトになります。Intl APIはバイナリ単位を処理しないため、ファイルサイズのフォーマットにはカスタムロジックまたは専用ライブラリが必要です。