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

はじめに

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

概要

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

対象者

navigator.language プロパティ

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

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

参考

Navigator.language – Web API | MDN

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

実装

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

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

HTML

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

Javascript

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

結果

クロスブラウザ対応として、
ウェブブラウザによってはlanguageの挙動が変わるので、その対策として、navigator.languagesで配列を取得し、最初のものを取得することで、同じような挙動にできます。

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

おわりに

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

また、navaigatorプロパティには、languageの他にも様々なプロパティがあります。
例えば、userAgentプロパティは、ウェブブラウザのChromeやFirefoxなどのユーザーエージェントに関してのプロパティです。他にも面白いプロパティがあるので、見てると良いかもしれません。
初学者のJavascriptの学習にぴったりな書籍のAmazonのリンクを張っておきますので、参考にしてみてください！

スポンサーリンク