【JS応用｜実務向け】JavaScriptで言語の文字体系を正しく扱う：Intl.Locale.prototype.getScript活用術

1. 導入：なぜIntl.Locale.prototype.getScriptが重要なのか

グローバルなWebアプリケーションを開発する際、ユーザーの言語設定に応じて表示を切り替えることは一般的です。しかし、言語コード（例: “zh”）だけでは、その言語がどの文字体系（スクリプト）で記述されているかを特定できない場合があります。例えば、中国語は簡体字と繁体字で表記が異なります。Intl.Locale.prototype.getScriptを使用することで、言語タグから「どの文字体系が使われているか」をプログラム的に正確に取得でき、フォントの出し分けやバリデーションの精度向上が可能になります。

2. 基礎知識：Intl.Localeとは

Intl.Localeは、ECMAScriptの国際化APIの一部で、言語タグ（BCP 47形式）を解析・操作するためのオブジェクトです。例えば、”ja-JP-u-ca-japanese”といった複雑なタグから、言語、地域、カレンダー、文字体系などの情報を個別に抽出できます。getScriptは、その中から「ISO 15924」規格に基づいた4文字のスクリプトコード（例: ラテン文字なら”Latn”、日本語の漢字かな混じりなら”Jpan”）を返します。

3. 実装と解決策

Intl.Localeオブジェクトをインスタンス化し、そのメソッドであるgetScriptを呼び出すだけで簡単に取得できます。もし言語タグにスクリプト情報が含まれていない場合、このメソッドは「undefined」を返します。そのため、実務では必要に応じてフォールバック処理を実装する必要があります。

4. サンプルプログラム

以下は、さまざまな言語タグからスクリプト情報を取得する実用的なコード例です。

// 言語タグのリスト
const locales = ['ja-JP', 'zh-Hans-CN', 'zh-Hant-TW', 'en-US'];

locales.forEach(tag => {
  const locale = new Intl.Locale(tag);
  
  // getScriptメソッドでスクリプト情報を取得
  const script = locale.getScript();

  if (script) {
    console.log(`タグ: ${tag} | スクリプト: ${script}`);
  } else {
    // スクリプトが明示されていない場合はデフォルトの推論値を表示する等の工夫が必要
    console.log(`タグ: ${tag} | スクリプト情報なし（デフォルト値を使用）`);
  }
});

// 出力結果の例:
// タグ: ja-JP | スクリプト情報なし（デフォルト値を使用）
// タグ: zh-Hans-CN | スクリプト: Hans
// タグ: zh-Hant-TW | スクリプト: Hant

5. 応用・注意点：現場で役立つポイント

実務でこのAPIを扱う際、以下の点に注意してください。

明示的な指定の有無
getScriptは「タグの中に含まれている情報」を抽出するだけです。例えば”ja-JP”というタグにはスクリプト情報が含まれていないため、getScriptはundefinedを返します。自動的に「日本語だからJpan」と補完してくれるわけではない点に注意してください。ブラウザが自動補完した情報を得たい場合は、一度Intl.Localeのコンストラクタを通した後のプロパティを参照するのではなく、必要に応じてマッピングテーブルを自作するのが安全です。

フォントの出し分けへの活用
CSSで「lang属性」に応じてフォントを切り替える際、このAPIの結果をカスタム属性としてHTMLタグに付与することで、特定のスクリプト（例: CJK系）のみに特定のWebフォントを適用するような、精度の高いデザイン制御が可能になります。

バグ回避のヒント
古いブラウザ環境ではIntl.Locale自体がサポートされていない場合があります。Can I Useなどで対象ブラウザのサポート状況を確認し、必要であればcore-jsなどのポリフィルを導入してください。