数値を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));
// Output: "1.5K"
console.log(formatter.format(1500000));
// Output: "1.5M"
console.log(formatter.format(1500000000));
// Output: "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));
// Output: "500"
console.log(formatter.format(1000));
// Output: "1K"
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(999000));
// Output: "999K"
console.log(formatter.format(1000000));
// Output: "1M"
console.log(formatter.format(1500000));
// Output: "1.5M"
console.log(formatter.format(1000000000));
// Output: "1B"
console.log(formatter.format(1000000000000));
// Output: "1T"
千未満の数値は、圧縮せずに表示されます。数値が千に達すると、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));
// Output: "1.5K"
console.log(shortFormatter.format(1500000));
// Output: "1.5M"
const longFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(longFormatter.format(1500));
// Output: "1.5 thousand"
console.log(longFormatter.format(1500000));
// Output: "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));
// Output: "1.5M"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact"
});
console.log(frFormatter.format(1500000));
// Output: "1,5 M"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact"
});
console.log(deFormatter.format(1500000));
// Output: "1,5 Mio."
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(15000000));
// Output: "1500万"
フランス語ではMの前にスペースを使用します。ドイツ語ではMillionの略語としてMio.を使用します。日本語では完全に異なる数値システムを使用し、万は1万を表します。
これらの違いはロケールに基づいて自動的に発生します。異なる桁数の指標を処理するためにロケール固有のコードを記述する必要はありません。フォーマッターにユーザーの言語設定を渡すだけで、その言語に適した出力が生成されます。
長い表示形式も各言語に適応します。
const enFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
compactDisplay: "long"
});
console.log(enFormatter.format(1500000));
// Output: "1.5 million"
const frFormatter = new Intl.NumberFormat("fr-FR", {
notation: "compact",
compactDisplay: "long"
});
console.log(frFormatter.format(1500000));
// Output: "1,5 million"
const deFormatter = new Intl.NumberFormat("de-DE", {
notation: "compact",
compactDisplay: "long"
});
console.log(deFormatter.format(1500000));
// Output: "1,5 Millionen"
ドイツ語ではmillionの複数形にMillionenを使用します。フランス語ではsなしでmillionを使用します。Intl APIはこれらの言語的なバリエーションを自動的に処理します。
小さな数値がコンパクト化されない場合
コンパクト化の閾値を下回る数値は通常通り表示されます。この閾値はロケールによって異なりますが、ほとんどの西洋言語では通常1,000から始まります。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact"
});
console.log(formatter.format(10));
// Output: "10"
console.log(formatter.format(100));
// Output: "100"
console.log(formatter.format(999));
// Output: "999"
console.log(formatter.format(1000));
// Output: "1K"
この動作により、小さな数値の不自然なフォーマットを防ぎます。500を0.5Kと表示するよりも、500として表示する方が明確です。フォーマッターは可読性を向上させる場合にのみコンパクト表記を適用します。
閾値は常に1,000とは限りません。日本語のように、異なる数値のグループ化システムを使用する言語もあります。日本語では1万単位でグループ化するため、コンパクト表記は異なる閾値から始まる可能性があります。
const jaFormatter = new Intl.NumberFormat("ja-JP", {
notation: "compact"
});
console.log(jaFormatter.format(9999));
// Output: "9999"
console.log(jaFormatter.format(10000));
// Output: "1万"
Intl APIはこれらのロケール固有の閾値を自動的に処理します。
コンパクト表記と他のフォーマットオプションの組み合わせ
コンパクト表記は他の数値フォーマットオプションと併用できます。コンパクト表記を使用しながら、小数点以下の桁数、桁区切り記号、丸め処理を制御できます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 1
});
console.log(formatter.format(1234567));
// Output: "1.2M"
const preciseFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 2
});
console.log(preciseFormatter.format(1234567));
// Output: "1.23M"
const noDecimalsFormatter = new Intl.NumberFormat("en-US", {
notation: "compact",
maximumFractionDigits: 0
});
console.log(noDecimalsFormatter.format(1234567));
// Output: "1M"
maximumFractionDigitsオプションは、整数部の後に表示される小数点以下の桁数を制御します。これを0に設定すると、すべての小数点以下の桁が削除され、数値がさらにコンパクトになります。
コンパクト表記と最小桁数オプションを組み合わせて、数値の範囲全体で一貫した書式設定を確保することもできます。
const formatter = new Intl.NumberFormat("en-US", {
notation: "compact",
minimumFractionDigits: 1,
maximumFractionDigits: 1
});
console.log(formatter.format(1000));
// Output: "1.0K"
console.log(formatter.format(1500));
// Output: "1.5K"
console.log(formatter.format(2000));
// Output: "2.0K"
このアプローチにより、すべての数値が小数点以下1桁を表示するため、表やグラフでの視覚的な一貫性を維持できます。
コンパクト表記を使用するタイミング
コンパクト表記は、スペースが限られている場合や、正確な精度が重要でない場合に最適です。ソーシャルメディアのカウンター、ダッシュボードのメトリクス、要約統計は理想的なユースケースです。ユーザーは、動画の再生回数が正確に1,234,567回であることを知る必要はありません。120万回であることがわかれば十分な情報です。
正確な数値が重要な場合は、コンパクト表記を使用しないでください。金融取引、科学的測定、法的文書には完全な精度が必要です。銀行残高は$1.2Kではなく$1,234.56と表示する必要があります。請求書は$1.5Kではなく$1,500.00と表示する必要があります。
対象者とコンテキストを考慮してください。データアナリストは正確な値を理解するために完全な数値を見ることを好む場合があります。一般消費者は、処理が速いためコンパクトな数値を好むことが多いです。一部のインターフェースでは両方のオプションを提供し、デフォルトでコンパクトな数値を表示し、必要に応じて正確な数値を表示する方法を提供しています。
コンパクト表記はファイルサイズにも適していますが、実装は若干異なります。ファイルサイズは通常、1000ではなく1024の累乗を使用するため、キロバイトやメガバイトではなく、キビバイトやメビバイトになります。Intl APIはバイナリ単位を処理しないため、ファイルサイズの書式設定にはカスタムロジックまたは専用ライブラリが必要です。