ブラウザからユーザーの優先言語を検出する方法

はじめに

ユーザーがウェブアプリにアクセスすると、ブラウザはすでにユーザーが希望する言語を把握しています。この情報はオペレーティングシステムとブラウザの設定から取得されます。これらの言語設定を読み取ることで、ユーザーに手動で言語を選択してもらうことなく、適切な言語でコンテンツを表示することができます。

これがクライアントサイド国際化の基盤です。日付や数値のフォーマット、翻訳されたテキストを表示する前に、ユーザーがどの言語を希望しているかを知る必要があります。

ブラウザが言語設定を保存する方法

現代のブラウザはすべて、優先言語のリストを管理しています。ユーザーはブラウザやオペレーティングシステムの設定でこれらの設定を構成します。例えば、第一選択としてスペイン語を設定し、フォールバックとして英語を設定することができます。

ブラウザはこれらの設定を使用して、適切な言語でウェブページをリクエストします。JavaScriptコードが実行されると、同じ設定を読み取って、どの言語を表示するかを決定することができます。

JavaScriptで言語設定を読み取る

navigator.languagesプロパティは、ユーザーの優先言語を表す文字列の配列を返します。これはJavaScriptで言語設定を検出する主要な方法です。

const languages = navigator.languages;
console.log(languages);
// 出力: ["es-MX", "es", "en-US", "en"]

言語は優先順位に従って並べられ、最も優先される言語が最初に来ます。この例では、ユーザーはメキシコのスペイン語を最も優先し、次に一般的なスペイン語、アメリカ英語、そして一般的な英語の順に優先しています。

ブラウザが返す内容を理解する

各言語はBCP 47に従った言語タグを使用して記述されています。これらのタグは、英語のenのようにシンプルなものもあれば、アメリカ英語のen-USや中国で使用される中国語のzh-CNのようにより具体的なものもあります。

これらのタグの正確な形式と意味については次のレッスンで説明します。今のところ、配列内の各文字列は、ユーザーが読むことができる言語を優先順位に従って表していることを理解してください。

最も優先される単一言語の取得

navigator.languageプロパティはnavigator.languages配列の最初の要素です。ユーザーの最優先言語のみが必要な場合は、このプロパティを直接使用できます。

const topLanguage = navigator.language;
console.log(topLanguage);
// 出力: "es-MX"

両方のアプローチが有効です。1つの言語だけが必要な場合はnavigator.languageを使用し、複数のフォールバックオプションを考慮したい場合はnavigator.languagesを使用してください。

ブラウザが複数の言語を提供する理由

ユーザーは多くの場合、様々な習熟度で複数の言語を話します。ブラウザでは、優先順位に従って複数の言語を指定することができます。これにより、アプリケーションに選択肢が複数提供されます。

フランス語と英語を話すユーザーを考えてみましょう。アプリがフランス語をサポートしている場合は、フランス語でコンテンツを表示します。サポートしていない場合は、英語にフォールバックします。アプリが1つの言語設定しかサポートしていない場合、フォールバックオプションはありません。

const languages = navigator.languages;
// ["fr-CA", "fr", "en-US", "en"]

const supportedLanguages = ["en", "es", "de"];

// アプリがサポートする最初の言語を見つける
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// 出力: "en"

このコードは、ユーザーの設定言語とアプリがサポートする言語の間で最初に一致するものを見つけます。

言語設定を使用してコンテンツをフォーマットする

ユーザーの優先言語がわかったら、Intl APIと組み合わせて、その言語の規則に従って日付、数値、その他のコンテンツをフォーマットできます。

const userLanguage = navigator.language;

const date = new Date("2025-03-15");
const formattedDate = new Intl.DateTimeFormat(userLanguage).format(date);

console.log(formattedDate);
// 言語によって出力が異なる
// "en-US"の場合: "3/15/2025"
// "en-GB"の場合: "15/03/2025"
// "ja-JP"の場合: "2025/3/15"

navigator.languagesから取得した言語識別子の配列は、優先度に基づくフォールバック選択を実装するために、Intlコンストラクタに直接渡すことができます。Intl APIは自動的にリストから最初にサポートされている言語を使用します。

const formattedDate = new Intl.DateTimeFormat(navigator.languages).format(date);

このアプローチにより、Intl APIにフォールバックロジックを処理させることができます。

言語設定が変更された場合

ユーザーの優先言語が変更されると、Windowオブジェクトでlanguagechangeイベントが発生します。このイベントをリッスンすることで、アプリの言語をリアルタイムで更新できます。

window.addEventListener("languagechange", () => {
  const newLanguage = navigator.language;
  console.log("Language changed to:", newLanguage);
  // ここでアプリの表示言語を更新する
});

実際にはこのイベントが発生することは稀です。ほとんどのユーザーはブラウジング中にブラウザの言語設定を変更しません。しかし、このイベントをリッスンすることで、変更が発生した場合により良いユーザー体験を提供できます。