Javascript 言語判別 ブラウザの言語を自動判別して表示を自動切り替えする方法

はじめに

こんにちは！株式会社TOKOSのフロントエンドエンジニアのタクヤです！
普段はWeb制作のデザインや実装をしています。
今回は、JavaScriptでブラウザの言語判別をする方法について説明していきます。

概要

ユーザーの使用言語によってページの内容を自動で切り替えたいときがあるかと思います。
JavaScriptにはブラウザの言語判別が簡単にできるプロパティが用意されています。
それは、navigator.languageというプロパティです。
実際のユースケースも踏まえて後ほど詳しく説明していきます。

対象者

• 使用言語によって表示内容を切り替えたい方
• JavaScriptで言語判別する方法を知りたい方

navigator.language プロパティ

結論、JavaScriptでユーザーのブラウザ上での使用言語を判別するには、navigatorのlanguageというプロパティを用いることで実現が可能です。
navigatorとは、JavaScriptのプロパティのひとつで、ウェブブラウザのあらゆる情報を持ったプロパティです。
今回はその中でも、languageというプロパティを使用することでウェブブラウザの使用言語を取得します。

navigatorのlanguageプロパティの詳しい仕様は、こちらを参考にしてください。

Navigator: language プロパティ - Web API | MDN

Navigator.language は読み取り専用プロパティで、ユーザーの言語を表す文字列を返します。普通、ブラウザー UI の言語が返されます。

developer.mozilla.org

見ていただくとわかるかと思いますが、特に難しいことはありません。
ブラウザの使用言語が文字列として返されるといったプロパティです。

実装

今回は、ブラウザの言語判別をしその結果によってページの内容を切り替えるケースを想定し実装していきます。
とは言っても、今回は文字を変えるだけです。
使用言語が日本語の場合は「ja」、それ以外の場合は「En」と表示するようにします。

実際に多言語化したウェブサイトやアプリケーションを作るには、専用のライブラリでの実装が必要になってくる場合が多いです。

<p>使用言語は<span id="browser-language"></span>です</p>
<script src="./main.js"></script>

const browserLang =
  (window.navigator.languages && window.navigator.languages[0])
  || window.navigator.language
document.getElementById("browser-language").textContent =
  browserLang?.startsWith("ja") ? "ja" : "En"

navigator.languageは環境によって「ja」ではなく「ja-JP」を返す場合があるため、startsWith()を使用して判定しています。

上記のコードを実行すると、以下のように表示されます。

navigator.languagesはユーザーが設定した優先言語のリストを配列で返します。
navigator.languageはブラウザのUI言語を返すため、navigator.languages[0]を優先的に参照することで、ユーザーの希望言語をより正確に取得できます。

参考にした記事を貼っておきます。

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

サーバ側でブラウザの言語設定を見るには Accept-Language ヘッダを読めばいいけど、クライアント側でそれに該当する情報を取得したくなったので、調査結果をメモ。 言語設定を取得するスクリプト とりあえず結果があればいい人向けに、最初に結論を書いておきます。 //...

qiita.com

おわりに

JavaScriptで言語判別する方法について説明しました。
navigatorのlanguageプロパティを使えば簡単にウェブブラウザの使用言語が取得できるので、ぜひお試しください！

また、navigatorプロパティには、languageの他にも様々なプロパティがあります。
例えば、userAgentプロパティは、ウェブブラウザのChromeやFirefoxなどのユーザーエージェントに関してのプロパティです。
他にも面白いプロパティがあるので、調べてみてください！