導入
Webアプリケーション開発において、金額やパーセンテージ、あるいは単位付きの数値を扱うことは日常茶飯事です。しかし、手動でカンマを付与したり、通貨記号をハードコードしたりすると、多言語対応（i18n）やロケールごとの表記ルールの違いに対応できなくなります。JavaScript標準APIである「Intl.NumberFormat」を活用すれば、これらを安全かつ簡潔に解決できます。本記事では、実務で即戦力となるこのAPIの使い方を解説します。
基礎知識
Intl.NumberFormatは、ECMAScript Internationalization APIの一部であり、言語や地域に特化した数値のフォーマットを行うためのコンストラクタです。
主な特徴は以下の通りです。
・ロケール対応: ユーザーのブラウザ設定（ja-JPやen-USなど）に合わせて自動的にフォーマットを切り替えられます。
・柔軟なオプション: 小数点以下の桁数制御、通貨記号の有無、単位の付与などをオブジェクト一つで定義できます。
・パフォーマンス: インスタンス化して使い回すことで、大量の数値を処理する際もライブラリを追加するより軽量に動作します。
実装/解決策
基本的な使い方は、まず「ロケール」と「オプション」を指定してインスタンスを作成し、`format()`メソッドに数値を渡すだけです。
特に実務でよく利用される「通貨」と「単位付き数値」のパターンを抑えておきましょう。
サンプルプログラム
// 1. 日本円表記の基本設定
const jpyFormatter = new Intl.NumberFormat(‘ja-JP’, {
style: ‘currency’,
currency: ‘JPY’,
});
// 2. 小数点以下を制御したパーセンテージ表記
const percentFormatter = new Intl.NumberFormat(‘ja-JP’, {
style: ‘percent’,
minimumFractionDigits: 1, // 最低表示する小数点桁数
maximumFractionDigits: 1, // 最大表示する小数点桁数
});
// 3. 単位（バイト）を付与する設定
const byteFormatter = new Intl.NumberFormat(‘ja-JP’, {
style: ‘unit’,
unit: ‘byte’,
unitDisplay: ‘short’,
});
// 実行例
console.log(jpyFormatter.format(1234567)); // 結果: “￥1,234,567”
console.log(percentFormatter.format(0.1234)); // 結果: “12.3%”
console.log(byteFormatter.format(1024)); // 結果: “1,024 byte”
応用・注意点
実務で利用する際に気をつけるべきポイントを2点挙げます。
1. インスタンスの再利用:
`new Intl.NumberFormat`の生成は比較的コストがかかる処理です。Reactのコンポーネント内などでループ処理を行う場合は、useMemoやコンポーネント外での定義を行い、インスタンスを使い回すようにしましょう。
2. ブラウザの挙動差:
基本的にモダンブラウザでは統一された挙動を示しますが、古いブラウザや特定のOS環境では、単位のスペース有無などが微妙に異なる場合があります。UIデザインで厳密な余白が求められる場合は、`formatToParts()`メソッドを利用して、数値や単位を個別のパーツとして取得し、DOMを組み立てるアプローチも検討してください。
これらを意識するだけで、数値表示の品質は格段に向上し、グローバル展開にも強い堅牢なコードになります。ぜひ今日から積極的に活用してみてください。