なぜformatToPartsが重要なのか？
普段、Webサイトで金額や数値を表示する際、日本円なら「¥1,000」のようにカンマや通貨記号を付けますよね。JavaScriptの標準機能であるIntl.NumberFormatを使えば簡単に変換できますが、通常は「ひとまとまりの文字列」として返ってきます。
もし、「通貨記号だけ少し小さくしたい」「数字の色だけ変えたい」といったデザインの要望があったらどうしますか？通常のメソッドでは文字列全体をCSSで装飾することしかできません。そこで役立つのが formatToParts です。これを使うと、数値を「通貨単位」「整数部」「カンマ」などのパーツに分解して取得できるため、自由自在な装飾が可能になります。
基礎知識：パーツに分けるとは？
Intl.NumberFormatは、数値をフォーマットするための組み込みオブジェクトです。通常はformat()メソッドで文字列を取得しますが、formatToParts() を使うと、結果が配列として返ってきます。
例えば「1000」を日本円に変換する場合、以下のようなパーツの配列になります。
・type: “currency”（通貨記号）
・type: “integer”（数値）
このように、データが構造化されることで、HTMLのタグ（spanタグなど）で個別に囲むことが容易になります。
実装：パーツを分解してHTMLに変換する
具体的な手順は以下の通りです。
1. Intl.NumberFormatでインスタンスを作成する。
2. formatToParts(数値)を呼び出し、配列を取得する。
3. 配列をループ（mapなど）で回し、パーツのtypeに応じてHTMLタグで囲む。
4. 最後にjoin(”)で繋げて出力する。
サンプルプログラム
以下のコードは、金額の「通貨記号」と「数値」を別々のクラスで装飾して表示する例です。
応用・注意点：現場で役立つヒント
1. 予期せぬパーツに注意
formatToPartsが返す配列には、通貨記号や数値だけでなく、小数点や「グループ区切り（カンマ）」も含まれます。これらを見逃すと表示が崩れる可能性があるため、必ず全てのパーツを結合するようにしてください。
2. パフォーマンスについて
単純に数値を表示するだけであれば、通常のformat()の方が高速です。装飾が必要な箇所にだけ限定して使うのが、フロントエンドのパフォーマンスを最適化するコツです。
3. ブラウザ互換性
現在のモダンブラウザであればほぼすべて対応していますが、非常に古い環境を考慮する必要がある場合は、Can I Useなどのサイトで確認することをお勧めします。
このAPIを活用すれば、UIデザインの幅がグッと広がります。ぜひ試してみてくださいね。