window.navigator.languageの基本

JavaScriptの`window.navigator.language`は、ユーザーのブラウザが設定している言語を取得するためのプロパティです。このプロパティを使うことで、ユーザーの言語設定に基づいてコンテンツを動的に調整することができます。ブラウザが提供するユーザーの言語設定を確認する際に、`navigator.language`は非常に便利です。

例えば、ユーザーが英語を話している場合、`navigator.language`は`”en”`という値を返します。一方で、日本語を使用している場合は、`”ja”`という値が返されます。このプロパティを使用すると、ユーザーが好む言語に合わせてウェブページをローカライズすることができます。

例を使ったwindow.navigator.languageの活用法

ここでは、実際に`navigator.language`を使った簡単なコード例を示します。まず、ユーザーの言語設定を取得し、それに基づいて簡単なメッセージを表示するコードです。

      
        let userLanguage = window.navigator.language;
        if (userLanguage === 'ja') {
          alert('こんにちは！');
        } else if (userLanguage === 'en') {
          alert('Hello!');
        } else {
          alert('Hello, world!');
        }
      
    

上記のコードでは、ユーザーの言語が日本語（`’ja’`）であれば「こんにちは！」、英語（`’en’`）であれば「Hello!」、それ以外の場合には「Hello, world!」というメッセージを表示します。このように、`navigator.language`を利用して、ユーザーに合った言語でメッセージを出力できます。

実際の使用例

多くのウェブサイトでは、ユーザーの言語設定を利用して、最初に表示されるコンテンツの言語を変更します。例えば、国際的なウェブサイトでは、訪問者の言語に基づいて自動的に表示言語を切り替える機能をよく見かけます。

以下に示すのは、ユーザーの言語に基づいてページのタイトルを変更する例です。

      
        let userLanguage = window.navigator.language;
        if (userLanguage === 'ja') {
          document.title = '日本語のページ';
        } else if (userLanguage === 'en') {
          document.title = 'English Page';
        } else {
          document.title = 'Multi-language Page';
        }
      
    

このコードは、ブラウザの言語設定に応じてページのタイトルを変更します。もし日本語設定のユーザーが訪れた場合、ページタイトルは「日本語のページ」に、英語設定のユーザーであれば「English Page」に変更されます。

注意点と制限

`window.navigator.language`は、ユーザーのブラウザの言語設定を返しますが、これは必ずしもユーザーの「実際の言語」や「話す言語」を反映しているわけではありません。例えば、英語がデフォルトで設定されている国でも、ユーザーが他の言語を話している場合があります。そのため、単純に`navigator.language`を使用してコンテンツをローカライズするだけでは、すべてのケースに対応できないことがあります。

さらに、`navigator.language`の値は、一般的に言語コードと地域コードが結合された形式（例：`”en-US”`や`”ja-JP”`）です。そのため、言語コードだけでなく、国コード（`US`や`JP`）も考慮する場合があります。場合によっては、`navigator.language`だけでは不十分な場合があるため、地域設定に基づいた更に詳細なローカライズが必要になることもあります。