導入: なぜIntl APIが重要なのか
Webサイトを開発する際、日付、通貨、数値の表示形式は国や地域によって大きく異なります。例えば、日本では「2023/10/27」と書く日付も、米国では「10/27/2023」と書くのが一般的です。これらを自力で条件分岐させて実装するのは非常に困難で、バグの原因にもなります。そこで役立つのが、ブラウザ標準搭載のIntl APIです。これを使うことで、複雑なロジックを書くことなく、世界中のユーザーに適した表示を簡単に実現できます。
基礎知識: Intl APIとは？
Intl APIは、ECMAScript Internationalization APIの略称です。JavaScriptで言語や地域（ロケール）に応じた文字列比較、数値フォーマット、日付・時刻のフォーマットを可能にするための組み込みオブジェクトです。ライブラリを別途読み込む必要がなく、現代のすべてのモダンブラウザで動作するため、パフォーマンス面でも非常に優れています。
実装/解決策: 基本的な使い方
Intl APIの主要なオブジェクトには、日付用の Intl.DateTimeFormat、数値用の Intl.NumberFormat、リスト表示用の Intl.ListFormat などがあります。基本的には、対象のフォーマッタを作成し、formatメソッドに値を渡すことで、整形された文字列を取得できます。
サンプルプログラム
以下のコードをブラウザのコンソールに貼り付けて、実行結果を確認してみてください。
// 1. 数値の通貨フォーマット（日本円と米ドル）
const yen = new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' });
const usd = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' });
console.log(yen.format(10000)); // 結果: ￥10,000
console.log(usd.format(10000)); // 結果: $10,000.00
// 2. 日付のフォーマット
const date = new Date();
const jaDate = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' });
const enDate = new Intl.DateTimeFormat('en-US', { dateStyle: 'full' });
console.log(jaDate.format(date)); // 結果: 202X年X月X日金曜日
console.log(enDate.format(date)); // 結果: Friday, October 27, 202X
// 3. リストのフォーマット（カンマ区切りなどを地域に合わせて自動調整）
const list = ['りんご', 'みかん', 'バナナ'];
const jaList = new Intl.ListFormat('ja-JP', { style: 'long', type: 'conjunction' });
const enList = new Intl.ListFormat('en-US', { style: 'long', type: 'conjunction' });
console.log(jaList.format(list)); // 結果: りんご、みかん、およびバナナ
console.log(enList.format(list)); // 結果: apple, orange, and banana
応用・注意点: 現場で役立つアドバイス
Intl APIを使用する際、最も注意すべき点は「ロケールのフォールバック」です。ユーザーのブラウザ設定が特定の言語に対応していない場合、意図しない表示になることがあります。必ず第1引数にロケール（’ja-JP’など）を明示するか、navigator.languageを使ってユーザーのブラウザ設定を取得するようにしましょう。
また、頻繁にフォーマットを行う場合は、インスタンスを毎回作成するのではなく、変数を使い回す（キャッシュする）ことで処理負荷を下げることが可能です。大規模なアプリケーションでは、これらのフォーマッタをReactのContextなどで管理すると、よりクリーンなコードになります。ぜひ今日から取り入れてみてください。