Help us understand the problem. What is going on with this article?

javascriptでブラウザの言語設定を取得する

More than 3 years have passed since last update.

サーバ側でブラウザの言語設定を見るには Accept-Language ヘッダを読めばいいけど、クライアント側でそれに該当する情報を取得したくなったので、調査結果をメモ。

言語設定を取得するスクリプト

とりあえず結果があればいい人向けに、最初に結論を書いておきます。

// 最優先の言語だけ取得
var language = (window.navigator.languages && window.navigator.languages[0]) ||
            window.navigator.language ||
            window.navigator.userLanguage ||
            window.navigator.browserLanguage;

// クライアント側で受け付けている言語リストを取得
var languages = window.navigator.languages || [
            window.navigator.language ||
            window.navigator.userLanguage ||
            window.navigator.browserLanguage
    ];

クロスブラウザのための工夫

IE対応

JavaScript でブラウザの言語設定を取得」を参考にしました。
IEやOperaはnavigator.languageが存在しないので、navigator.userLanguagenavigator.browserLanguageを参照する必要があるらしい。

navigator.languageの挙動の差

FirefoxをChromeはどちらもnavigator.languageに対応していますが、微妙に挙動が違います。

MDNによるとFirefoxではnavigator.languageは以下のような挙動をするそうです。

  • navigator.languagesはAccept-Language HTTPヘッダと同じ配列を返す
  • navigator.languageはAccept-Language HTTPヘッダの一番先頭の要素

しかし、Chromeでの挙動を検証してみたところ、
2016年3月7日現在の最新版の Chrome 49.0.2623.75 では以下のような挙動をしました。

  • navigator.languagesはAccept-Language HTTPヘッダと同じ値を返す
  • navigator.languageAccept-Language HTTPヘッダの設定に関わらず常にブラウザUIの言語設定を返す

Chromeの場合、「言語と入力の設定」から言語の優先順位を変えてもnavigator.languageは変わりません。
どのブラウザであっても Accept-Language HTTPヘッダと同じ値を取得したいので、一番最初にnavigator.languagesを見るようにしてあります。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away