1. 導入: なぜ今、このAPIが重要なのか
グローバルなWebアプリケーションを開発する際、ユーザーがどの地域の、どのような設定でブラウザを使っているかを把握することは非常に重要です。しかし、言語コード(例: “ja-JP”)だけでは、カレンダーの種類や数値の表記ルールといった詳細なカスタマイズ情報まで取得するのは困難でした。Intl.Locale.prototype.getKeywordsを使用すれば、ロケール情報に含まれる「拡張機能(Unicode Extension)」を簡単に抽出でき、地域固有の細かいユーザー設定に応じたUI提供が可能になります。
2. 基礎知識: Intl.Localeとは?
JavaScriptのIntl APIは、国際化対応のための強力なツール群です。その中でも「Intl.Locale」は、ロケール(地域や言語)に関する情報を保持し、操作するためのオブジェクトです。
特に「キーワード」とは、ロケール識別子の末尾(-u-以降)に付与される、特定の書式設定を指します。例えば、”ja-JP-u-ca-japanese-nu-latn” という文字列があれば、これは「日本(ja-JP)」「カレンダーは和暦(ca-japanese)」「数字はアラビア数字(nu-latn)」という設定を意味します。getKeywordsはこの設定をオブジェクト形式で取り出すためのメソッドです。
3. 実装/解決策: キーワードを抽出する手順
Intl.Localeオブジェクトをインスタンス化し、そのメソッドであるgetKeywordsを呼び出すだけで、設定値がキーバリューストア(Record)として取得できます。これにより、条件分岐を複雑に書くことなく、ユーザーの環境設定を判定できます。
4. サンプルプログラム: 実践コード
以下のコードをブラウザのコンソールに貼り付けて、どのような情報が取得できるか確認してみてください。
// ロケール文字列を定義(和暦カレンダーと、数字のスタイルを指定)
const localeString = 'ja-JP-u-ca-japanese-nu-latn';
// Intl.Localeオブジェクトを生成
const locale = new Intl.Locale(localeString);
// getKeywordsを使って設定情報を取得
const keywords = locale.getKeywords();
// 結果をコンソールに出力
console.log('取得したキーワード情報:', keywords);
// 特定のキーワード(例:カレンダーの種類)を判定するロジック
if (keywords.ca === 'japanese') {
console.log('ユーザーは和暦カレンダーを好んでいます。');
} else {
console.log('デフォルトのカレンダーを使用します。');
}
5. 応用・注意点: 現場で役立つアドバイス
注意点1: ブラウザの対応状況
このAPIはモダンブラウザ(Chrome, Firefox, Safariなど)で広くサポートされていますが、非常に古いブラウザや特定の環境では動作しない可能性があります。実務で使用する場合は、Can I Useなどで対応状況を確認するか、Polyfillの検討が必要です。
注意点2: 文字列の正規化
ロケール文字列が不正な場合、Intl.Localeのコンストラクタはエラーを投げます。ユーザー入力など、信頼できないソースからロケール文字列を取得する場合は、必ずtry-catchブロックで囲んでエラーハンドリングを行ってください。
応用: ユーザー体験の向上
単に情報を取得するだけでなく、このAPIを使って「ユーザーが指定した通貨形式(cf)や並び順(co)に従って、動的に表示を切り替える」といった実装を行うと、非常に洗練された国際化対応アプリケーションになります。ぜひ試してみてください。