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

はじめに

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

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

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

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

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

JavaScriptで言語設定を読み取る

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

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

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

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

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

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

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

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

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

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

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

ユーザーは、習熟度が異なる複数の言語を話すことがよくあります。ブラウザでは、優先順位順に複数の言語を指定できます。これにより、アプリケーションは複数の選択肢から選ぶことができます。

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

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

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

// Find the first language the app supports
const selectedLanguage = languages.find(lang => 
  supportedLanguages.includes(lang)
);

console.log(selectedLanguage);
// Output: "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);
// Output varies by language
// For "en-US": "3/15/2025"
// For "en-GB": "15/03/2025"
// For "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);
  // Update your app's displayed language here
});

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