導入
Web開発において、金額や数値を表示する際に「1000000」とそのまま出力してはいませんか？ユーザーにとって読みづらいだけでなく、プロフェッショナルな印象も損ねてしまいます。JavaScriptの標準APIであるIntl.NumberFormatを活用すれば、ロケール（地域）に合わせたカンマ区切りや通貨記号の付与が驚くほど簡単に実装できます。外部ライブラリに頼らず、ブラウザ標準の機能で数値のフォーマット問題を解決しましょう。
基礎知識
Intl.NumberFormatは、ECMAScript Internationalization APIの一部で、言語や地域に応じた数値の書式設定を行うためのオブジェクトです。これを使うことで、日本なら「￥1,000」、米国なら「$1,000.00」といった形式を、コードを書き換えることなく動的に生成できます。特筆すべきは、ブラウザの言語設定を自動で検知できる点と、計算の正確さを保ったまま文字列変換ができる点です。
実装/解決策
実装の基本は、まずIntl.NumberFormatのインスタンスを作成し、その中のformatメソッドを呼び出すという流れです。コンストラクタで「どの言語（ロケール）」で「どのような形式（通貨やパーセントなど）」にするかをオプションとして渡します。一度インスタンスを作成してしまえば、あとは数値を入れるだけで整形された文字列が返ってくるため、パフォーマンス面でも非常に優秀です。
サンプルプログラム
以下のコードは、日本円と米ドルを適切に整形する例です。そのままコピーしてコンソールで実行してみてください。
// 1. 日本円のフォーマット設定
const yenFormatter = new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'JPY',
});
// 2. 米ドルのフォーマット設定
const usdFormatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
const price = 1234567.89;
// formatメソッドを使用して変換
console.log(yenFormatter.format(price)); // 出力: ￥1,234,568
console.log(usdFormatter.format(price)); // 出力: $1,234,567.89
// パーセント表示の例
const percentFormatter = new Intl.NumberFormat('ja-JP', {
style: 'percent',
minimumFractionDigits: 1 // 小数点以下の桁数を指定
});
console.log(percentFormatter.format(0.1234)); // 出力: 12.3%
応用・注意点
現場で活用する際のポイントは、インスタンスの再利用です。ループ処理の中で毎回 new Intl.NumberFormat を呼び出すとメモリ消費が増大します。必ず関数の外側や定数としてインスタンスを定義し、使い回すようにしてください。また、注意点として、通貨の「最小単位」はロケールによって異なる場合があります。例えば日本円は小数点以下を表示しませんが、米ドルはセント（小数点以下2桁）を扱うため、意図した通りの表示になるか、必ず複数のロケールでテストすることをおすすめします。