【JS応用|豆知識】【モダンJS】Intl.Locale.prototype.getRegionで言語ロケールの「地域」をスマートに取得する方法

導入:なぜこのAPIが重要なのか

Web開発において、多言語対応(i18n)は避けて通れない課題です。特に「ユーザーがどの国・地域からアクセスしているか」をロケール情報から抽出したい場合、これまで文字列の分割(split)や正規表現を使って無理やり取得していた方も多いのではないでしょうか。
Intl.Locale APIのgetRegionメソッドを使えば、複雑な文字列操作を行うことなく、標準化された方法で安全かつ確実に「地域コード(国コード)」を取得できます。コードの可読性を高め、予期せぬパースエラーを防ぐために非常に重要なAPIです。

基礎知識:Intl.Localeとは何か

Intl.Localeは、JavaScriptの国際化APIの一部で、言語タグ(例: “ja-JP”や”en-US”)をオブジェクトとして扱い、そのプロパティを簡単に操作するためのインターフェースです。
ここでいう「ロケール」とは、言語や地域、文字の向きなどを定義した識別子のことです。getRegionメソッドは、このロケール文字列の中から、ISO 3166-1で定義された2文字の国コード(JP, US, GBなど)を抽出します。

実装:getRegionの使い方

使い方は非常にシンプルです。Intl.Localeのインスタンスを作成し、そのインスタンスに対してgetRegionメソッドを呼び出すだけです。戻り値として地域コードが返されます。もしロケールに地域が含まれていない場合は、undefinedが返されます。

サンプルプログラム:ロケールから地域コードを抽出する

以下は、さまざまなロケール文字列から地域コードを取得する実用的なサンプルコードです。

// ロケール文字列を定義
const locale1 = new Intl.Locale("ja-JP"); // 日本
const locale2 = new Intl.Locale("en-US"); // アメリカ
const locale3 = new Intl.Locale("fr");    // 地域指定なし

// getRegionメソッドを使用して地域コードを取得
const region1 = locale1.getRegion();
const region2 = locale2.getRegion();
const region3 = locale3.getRegion();

console.log(`ロケール: ${locale1.toString()}, 地域: ${region1}`); // 結果: JP
console.log(`ロケール: ${locale2.toString()}, 地域: ${region2}`); // 結果: US
console.log(`ロケール: ${locale3.toString()}, 地域: ${region3}`); // 結果: undefined

// 応用: 地域が存在する場合のみ処理を行う例
if (region1) {
  console.log("対象の地域コードは: " + region1);
} else {
  console.log("地域設定がありません");
}

応用・注意点:現場での活用と落とし穴

1. 存在しない場合のチェック:
getRegionは地域が指定されていない場合にundefinedを返します。そのため、戻り値を直接URL生成などに使う場合は、必ずif文などで存在確認を行うことがバグ回避の鉄則です。

2. ブラウザ互換性:
Intl.Localeはモダンブラウザで幅広くサポートされていますが、非常に古いブラウザや特定の環境では動作しない場合があります。本番環境で利用する際は、Can I Useなどでターゲットブラウザのサポート状況を確認し、必要であればポリフィルを検討してください。

3. 文字列操作との違い:
正規表現でパースする場合、例えば「en-US-u-ca-gregory」のような拡張タグが含まれるロケール文字列でミスが発生しがちです。Intl.Locale APIを使えば、仕様に則って正確に「地域部分のみ」を抽出してくれるため、堅牢なアプリケーション構築に繋がります。

タイトルとURLをコピーしました