ブラウザ言語設定を検出してローカライズされたコンテンツを提供する方法
JavaScript でブラウザの言語設定を検出する方法
このガイドでは、JavaScriptを使用してブラウザの言語設定を検出する方法を説明します。これは、ローカライズされたコンテンツを提供したり、ユーザーの言語設定に基づいてアプリケーションの動作を変更したりする必要がある場合に役立ちます。
方法
ブラウザの言語設定を検出するには、navigator.language プロパティを使用します。このプロパティは、ユーザーのブラウザで設定されている言語の 2 文字の言語コードを返します。たとえば、英語の場合は "en"、日本語の場合は "ja" が返されます。
const languageCode = navigator.language;
console.log(languageCode);
このコードは、ユーザーのブラウザで設定されている言語コードをコンソールにログ出力します。
補足
navigator.languageは、常に 2 文字の言語コードを返します。より詳細な言語情報が必要な場合は、navigator.languagesプロパティを使用できます。このプロパティは、ユーザーのブラウザで設定されているすべての言語の配列を返します。- 一部のブラウザでは、
navigator.userLanguageプロパティも使用できます。このプロパティは、navigator.languageと同等の機能を提供しますが、互換性の問題があるため、navigator.languageの使用をお勧めします。
ローカリゼーションと国際化
ブラウザの言語設定を検出することは、ローカリゼーションと国際化の重要な部分です。
- ローカリゼーション は、特定の言語や地域向けにコンテンツやアプリケーションを調整するプロセスです。
- 国際化 は、さまざまな言語や地域での使用に対応できるように、ソフトウェアやアプリケーションを設計するプロセスです。
ブラウザの言語設定を検出することで、ユーザーの言語設定に基づいてコンテンツやアプリケーションを自動的に調整することができます。これは、より良いユーザーエクスペリエンスを提供し、ユーザーエンゲージメントを向上させるのに役立ちます。
例
次の例では、navigator.language プロパティを使用して、ユーザーの言語設定に基づいて異なるウェルカムメッセージを表示する方法を示します。
const languageCode = navigator.language;
if (languageCode === 'en') {
console.log('Welcome to our website!');
} else if (languageCode === 'ja') {
console.log('ようこそ！');
} else {
console.log('Welcome!');
}
このコードは、ユーザーのブラウザ言語が英語の場合は "Welcome to our website!"、日本語の場合は "ようこそ！"、それ以外の場合は "Welcome!" というメッセージをコンソールにログ出力します。
JavaScript でブラウザの言語設定を検出することは、ローカライズされたコンテンツやアプリケーションを提供するのに役立つ簡単な方法です。navigator.language プロパティを使用することで、ユーザーの言語設定に基づいてコンテンツやアプリケーションを簡単に調整することができます。
ブラウザの言語設定を検出して、それに応じてコンテンツを動的に表示するサンプルコード
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Browser Language Detection</title>
<style>
.welcome-message {
font-size: 24px;
margin: 20px;
}
</style>
</head>
<body>
<div id="welcome-message"></div>
<script src="script.js"></script>
</body>
</html>
CSS
/* style.css */
.welcome-message {
font-size: 24px;
margin: 20px;
}
JavaScript
// script.js
const welcomeMessageElement = document.getElementById('welcome-message');
function showWelcomeMessage() {
const languageCode = navigator.language;
if (languageCode === 'en') {
welcomeMessageElement.textContent = 'Welcome to our website!';
} else if (languageCode === 'ja') {
welcomeMessageElement.textContent = 'ようこそ！';
} else {
welcomeMessageElement.textContent = 'Welcome!';
}
}
showWelcomeMessage();
説明
このコードは、以下の動作をします。
- HTML ファイルは、
lang属性を "en" に設定して、ページのデフォルト言語を英語に指定します。 - CSS ファイルは、
.welcome-messageクラスのスタイルを定義します。このスタイルは、ウェルカムメッセージのフォントサイズとマージンを設定します。 - JavaScript ファイルは、以下の処理を行います。
welcomeMessageElement変数を、ID が "welcome-message" の HTML 要素に設定します。showWelcomeMessage関数を定義します。この関数は、ユーザーのブラウザ言語コードに基づいてウェルカムメッセージを設定します。showWelcomeMessage関数を呼び出して、ウェルカムメッセージをすぐに表示します。
実行方法
このコードを実行するには、以下の手順を実行します。
- 上記のコードを 3 つのファイル (
index.html、style.css、およびscript.js) に保存します。 - Web ブラウザで
index.htmlファイルを開きます。
ブラウザがユーザーの言語設定を検出し、それに応じてウェルカムメッセージが表示されます。
カスタマイズ
このコードは、ニーズに合わせてカスタマイズできます。たとえば、以下のように変更できます。
- 異なる言語のメッセージを追加します。
- ユーザーの言語設定に基づいて、ページの他の要素を変更します。
- 翻訳 API を使用して、コンテンツを動的に翻訳します。
JavaScript でブラウザの言語設定を検出するその他の方法
navigator.languages プロパティは、ユーザーのブラウザで設定されているすべての言語の配列を返します。このプロパティを使用すると、より詳細な言語情報にアクセスできます。
const languages = navigator.languages;
console.log(languages);
Accept-Language ヘッダーは、HTTP リクエストに含まれるヘッダーで、ユーザーが優先する言語のリストを指定します。このヘッダーにアクセスするには、XMLHttpRequest オブジェクトを使用する必要があります。
const xhr = new XMLHttpRequest();
xhr.open('GET', '/');
xhr.onload = function() {
const languageCode = xhr.getResponseHeader('Accept-Language');
console.log(languageCode);
};
xhr.send();
このコードは、/ パスへの GET リクエストを行い、Accept-Language ヘッダーの値をコンソールにログ出力します。
第三者ライブラリ
ブラウザの言語設定を検出するのに役立つ、いくつかの第三者ライブラリがあります。人気のあるライブラリには、以下のようなものがあります。
これらのライブラリは、navigator.language プロパティや Accept-Language ヘッダーに加えて、他の方法でブラウザの言語設定を検出する機能を提供することがあります。
使用する方法は、ニーズによって異なります。
- シンプルで使いやすい方法が必要な場合は、navigator.language プロパティを使用するのがおすすめです。
- HTTP リクエストから言語情報にアクセスする必要がある場合は、Accept-Language ヘッダーを使用します。
- さらに機能が必要な場合は、第三者ライブラリを使用することを検討します。
注意事項
- ブラウザの言語設定は、ユーザーによっていつでも変更できることに注意してください。
- 一部のユーザーは、ブラウザの言語設定を異なる言語に設定している場合があります。これは、プライバシーを保護するためや、別の言語でコンテンツにアクセスするために行われる場合があります。
- ユーザーの言語設定を尊重することが重要です。ユーザーの言語設定がわからない場合は、デフォルトの言語を使用するようにしてください。
javascript localization internationalization
