JavaScriptで各ブラウザの使用言語を検出する方法

3682 ワード
TypeScript Chrome opera JavaScript InternetExplorer JavaScript テキストリンク

概要

JavaScriptではnavigatorオブジェクトのプロパティであるlanguageを利用することで、ブラウザで設定されている使用言語を簡単に検出することができます。
ここではlanguageプロパティと各ブラウザによる挙動の違いについてまとめます。

Languageプロパティとは

navigatorとはユーザーが利用しているブラウザの詳細な情報を取得するオブジェクトであり、そのプロパティであるlanguageではブラウザの使用言語を検出することができます。

navigatorオブジェクトはwindowオブジェクトのプロパティの一つであるため、そのプロパティのプロパティであるlanguageにはwindow.navigator.languageといったコードでアクセスします。

このlanguageプロパティは主要なブラウザではほぼ使用可能ですが、ブラウザのバージョンによっては未対応な場合もあります。

各ブラウザの動き

Chrome / Safari / Firefox / Edge

Chrome・Safari・Firefox・Edgeではlanguageプロパティが利用できます。
これらのブラウザは使用言語を複数設定できますが、languageプロパティはその中で一番優先順位が高い言語を取得します。
以下はChromeの動作例です。

前提条件
日本語を最優先に5つの言語を設定してあります。

> window.navigator.language
> "ja"

一番上に設定されている日本語が返ってくることがわかります。

また、navigatorオブジェクトにはlanguagesプロパティという設定している全ての使用言語を取得できるプロパティも存在します。この一覧はブラウザで設定している優先順位通りの順で返ります。

> window.navigator.languages
> (5) ["ja", "en", "az", "en-US", "en-GB"]

なおlanguageプロパティは基本的には"ja"や"en"などの言語コードのみを返しますが、英語（アメリカ合衆国）、英語（イギリス）など国名を含めた言語を選択している場合は言語コードに国コードを組み合わせた"en-US""en-GB"といった値になるため注意が必要です。

Internet Explorer

最新バージョンのIE11はlanguageプロパティを利用できますが、それより前のバージョンでは非対応であり使おうとするとundefinedが返ります。

代替としてIEではブラウザの言語設定を検出するためのプロパティとしてbrowserLanguageが存在し、これは古いバージョンでも使えます。また最新のIE11でもこのプロパティは残っています。

なおChromeなどで利用できるlanguagesプロパティには非対応です。

前提条件
日本語を最優先に2つの言語を設定してあります。私が検証したIE11&Windows10の環境ではブラウザの言語設定をしようとするとWindows全体の言語設定画面に遷移しました。

> window.navigator.browserLanguage
> "ja-JP"

補足
TypeScriptを使っている場合上記のwindow.navigator.browserLanguageという書き方では以下のようなエラーが出ます。

Property 'browserLanguage' does not exist on type 'Navigator'

これはTypeScriptがbrowserLanguageをnavigatorオブジェクトのプロパティとして認識していないことが原因であり、ドットではなく角括弧を使うことで回避できます。

> window.navigator['browserLanguage']
> "ja-JP"

IEでは単に「日本語」を選択しても"ja-JP"といった国名付きの言語コードが返るようです。

Opera

OperaもIE同様、古いバージョンではlanguageプロパティに対応しておらず、代わりにbrowserLanguageやuserLanguageなどを使う必要がありました。
しかし現行のバージョンではlanguageプロパティ及びlanguagesプロパティに対応しています。
その代わりなのかbrowserLanguageやuserLanguageは利用できなくなっています。こちらはIEと異なる点です。

まとめ

  • 主なブラウザの最新バージョンはどれもlanguageプロパティが使える
  • まだまだ古いバージョンのIEを使っている人は多いのでその辺りのフォローは必要
  • OperaなどIE以外でも古いバージョンだとlanguageプロパティが使えないブラウザはあるが、少しマイナー感があるブラウザをどこまでサポートするかは悩みどころ