1. 導入：なぜIntl.NumberFormatが重要なのか
Webサイトの管理画面やECサイトの価格表示において、数値のフォーマットは避けて通れない課題です。例えば、「1000000」を「1,000,000」と表示したり、通貨単位を付けたりする処理です。従来は正規表現や手動の文字列操作で行うこともありましたが、これらは「多言語対応」や「通貨ごとのルール」を考慮すると非常に複雑になります。Intl.NumberFormatを使えば、ブラウザ標準の強力な機能を使って、安全かつ簡潔にロケール（地域・言語設定）に応じたフォーマットを実現できます。
2. 基礎知識：Intl.NumberFormatとは
Intl.NumberFormatは、JavaScriptの標準組み込みオブジェクトの一つで、数値や通貨を言語に適した形式に変換するために設計されています。
特に重要なのが「ロケール（locale）」と「オプション」の概念です。ロケールを指定することで、日本なら「￥1,000」、ドイツなら「1.000 €」といった、その国で標準的な表記に自動変換されます。ライブラリを別途読み込む必要がなく、IE11以降の主要ブラウザで広く利用可能なため、現場で安心して導入できる技術です。
3. 実装/解決策：実務での活用手順
実務では、単に数値を整形するだけでなく、特定の通貨形式や桁数制限を適用することが多いです。
1. `new Intl.NumberFormat(ロケール, オプション)`でインスタンスを作成します。
2. 作成したインスタンスの`.format(数値)`メソッドを呼び出します。
3. 必要に応じて、`formatToParts()`を使用して数値の単位や整数部・小数部を個別に取得し、UIデザインに合わせて装飾します。
4. サンプルプログラム
以下のコードは、実務でよく遭遇する3つのパターンをまとめたものです。コピー＆ペーストして動作を確認してみてください。
const price = 1234567.89;
// パターン1：日本円として整形（通貨単位付き）
const jpyFormatter = new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'JPY'
});
console.log(jpyFormatter.format(price)); // "￥1,234,568" ※自動的に四捨五入されます
// パターン2：パーセンテージ表示（小数点以下を制御）
const percentFormatter = new Intl.NumberFormat('ja-JP', {
style: 'percent',
minimumFractionDigits: 1, // 最小小数点桁数
maximumFractionDigits: 1 // 最大小数点桁数
});
console.log(percentFormatter.format(0.12345)); // "12.3%"
// パターン3：UIデザインで単位を別スタイルにしたい場合（formatToParts）
const parts = new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'JPY'
}).formatToParts(price);
// partsの中身を解析して、HTMLのspanタグで囲むなどのカスタマイズが可能
const formattedHtml = parts.map(part => {
if (part.type === 'currency') return `<span class="unit">${part.value}</span>`;
return part.value;
}).join('');
console.log(formattedHtml); // "￥<span class="unit">￥</span>1,234,568"
5. 応用・注意点：現場での陥りやすいポイント
・通貨ごとの端数処理
日本円（JPY）のように小数点を持たない通貨と、米ドル（USD）のように小数点を持つ通貨では、デフォルトの挙動が異なります。意図しない四捨五入を防ぐため、`maximumFractionDigits`などのオプションを明示的に指定することをお勧めします。
・パフォーマンスへの配慮
ループ処理内で毎回`new Intl.NumberFormat()`を呼び出すのはコストが高いため、必ずインスタンスを一度作成してから使い回すようにしましょう。
・formatToPartsの活用
「￥」記号だけフォントサイズを小さくしたい、といった細かいデザイン要望には、`formatToParts()`が非常に強力です。正規表現で文字列を分割するよりも、言語的に正しいパーツ単位で操作できるため、バグを未然に防ぐことができます。
コメント