エンドユーザーの言語を取得するには？［JavaScript］：.NET TIPS

JavaScriptでエンドユーザーの言語を取得するには、navigator.languageプロパティやnavigator.userLanguageプロパティなどを使用する。

» 2016年03月23日 05時00分公開

[山本康彦，BluewaterSoft／Microsoft MVP for Windows Development]

連載目次

　Webアプリなどで、エンドユーザーの使っている言語によって処理を変えたいことがある。例えば、エンドユーザーが日本語を使っているときは日本語のメッセージを出し、それ以外の言語のときは英語のメッセージを出すといったような場合だ。

　本稿ではJavaScriptでエンドユーザーの言語を取得する方法を解説する。

Accept-Languageヘッダについて

　エンドユーザーがブラウザに設定している言語は、HTTPリクエストヘッダの「Accept-Language」としてWebサーバに送信される（複数の言語を設定している場合は、その優先順位も）。Webサーバ側で、Accept-Languageヘッダに含まれるロケール（言語を表す「ja-JP」といった文字列）を解析して処理を変えるのが、最も確実な方法だ*1。

　ブラウザが送信するAccept-Languageヘッダと同じ言語のリストをJavaScriptで汎用的に取得する方法は、残念ながら本稿執筆時点では存在しない*2。その代用になるプロパティを本稿では紹介するが、必ずしもエンドユーザーがブラウザに設定している言語が取得できるとは限らない。ブラウザによってバラツキがあるのだ。それを踏まえた上で、以降の解説をお読みいただきたい。

*1　Webアプリを開発するためのフレームワークには、Accept-Languageヘッダを利用する機能が用意されているのが普通だ。例えば、冒頭に述べたメッセージの切り替えは、ASP.NETでも以前からサポートしている。「.NET TIPS：［ASP.NET AJAX］ローカリゼーション対応を行うには？［2.0、3.0、3.5、C#、VB］」参照。

*2　将来は、HTML 5.1でnavigator.languagesプロパティが導入されるようだ（language「s」と複数形になっていることに注意）。

navigator.languageプロパティ

　多くのブラウザのJavaScriptエンジンは、navigator.languageプロパティを実装している。Mozilla Developer Networkのページ（英語）によれば、バージョン10までのInternet Explorer（以降、IE）を除く主要なブラウザが対応している。navigator.languageプロパティは、Accept-Languageヘッダの先頭にあるロケールか、または、エンドユーザーの環境の言語を返す。

　上記のページによれば、ChromeはAccept-Languageヘッダの先頭にあるロケールを返すのではなく、ブラウザのUIの言語を返す。また、Windows 7上のIE 11は、筆者が試したところ、Windowsの言語を返しているようだ（Windows 10バージョン1511上のIE 11では返す場合と返さない場合がある）。なお、Windows 10のEdgeでは、Accept-Languageヘッダの先頭にあるロケールが返ってきた。

　エンドユーザーの環境の言語がそのエンドユーザーの希望する言語だとは限らないが、そこは妥協するしかない。

Internet Explorer対応

　バージョン10までのIEにはnavigator.languageプロパティが実装されていない。代わりに、navigator.userLanguageプロパティを使う。ただし、MSDNのページ（英語）の注意書きにあるように、エンドユーザーがWindowsのコントロールパネルで設定した言語が返される（Accept-Languageヘッダの先頭にあるロケールではない）。

エンドユーザーの言語を取得するには？

　以上をまとめると、エンドユーザーの言語を取得するには、navigator.languageプロパティが存在するならそれを参照し、存在しないときはIEだと見なしてnavigator.userLanguageプロパティを試してみるとよいだろう

　どちらのプロパティにも対応していないブラウザのことも考慮すると、例えば日本語とそれ以外で処理を分けるコードは、次のコードのようになるだろう（どちらのプロパティにも対応していないときは日本語と見なしている）。

// ブラウザの言語を取得する
var lang = (navigator.language) ? navigator.language : navigator.userLanguage;
// ただし、どちらのプロパティにも対応していないブラウザではundefinedになる

if(lang === undefined)
lang = "ja"; // 不明のときは日本語と見なす

if(lang.toLowerCase().indexOf("ja") !== -1){
// 日本語のときの処理
}
else{
// 日本語以外のときの処理
}

エンドユーザーの言語によって処理を分けるコードの例（JavaScript）
navigator.languageプロパティが存在するならその値を、存在しないときはnavigator.userLanguageプロパティ（IEの場合）を取得する（太字の部分）。
ただし、どちらにも対応していないブラウザでは、結果はundefinedになる。この例では、そのときは日本語と見なすようにした。
indexOfメソッドを使っている部分については、「.NET TIPS：文字列が他の文字列に含まれているかを調べるには？［JavaScript］」を参照。

【コラム】ストアアプリ／UWPアプリ

　ストアアプリ／UWPアプリは、JavaScriptで作るときもWindowsランタイムのWindows.Globalization.ApplicationLanguages.languagesプロパティを利用できる。

まとめ

　ブラウザで実行されるJavaScriptでエンドユーザーの言語を取得するには、navigator.languageプロパティかnavigator.userLanguageプロパティ（バージョン10までのIEの場合）を利用する。ただし、取得できる値は、ブラウザが送信するAccept-Languageヘッダの先頭にあるロケールのこともあれば、ブラウザやOSの言語のこともある。

カテゴリ：JavaScript　処理対象：多言語対応
関連TIPS：Visual Studioで静的HTMLページのJavaScriptコードをデバッグするには？
関連TIPS：異なるデータ型の値を比較するには？（==と===の違いを理解する）［JavaScript］
関連TIPS：文字列が他の文字列に含まれているかを調べるには？［JavaScript］