【JavaScript】ブラウザの言語設定(ロケール)と言語名を取得する方法
更新日:2023/10/20
ブラウザは使用する言語を設定することで、どの国の言語でも表示できるようになっています。
この設定をJavaScriptで取得することで、特定の言語に対応した処理を行うことができます。
そこでJavaScriptで、"ja"や "en-US"などの言語設定を取得して、"日本語"や"アメリカ英語"などの言語名に変換する方法を紹介します。
言語設定を取得する方法
ブラウザから"ja"や"en-US"などの言語を表す文字列は、次のようにすると取得できます。
const langage = navigator.language;
言語が日本語かどうかを確認したい時は、次のように "ja" と比較します。
if( navigator.language === "ja" ) console.log( "日本語です" );
else console.log( "日本語ではありません:" + navigator.language);
他の言語と比較するときは、このページの最後(補足:言語コードと言語名)を参考にしてください。
navigatorオブジェクトには、languagesというプロパティがあります。
こちらは、優先言語として登録されている言語の一覧を取得できます。
日本の場合は規定で、"ja"、 "en-US"、 "en"の3つが登録されています。
(後から追加できます)
console.log( navigator.languages );
// [ "ja", "en-US", "en" ]
この設定は、リクエストヘッダーのAccept-LanguageとしてWebサーバーに送信されます。
あくまでリクエスト送信するだけ。
ブラウザの表示内容を変更するような設定ではありません。
言語コードを日本語や英語に変換する方法
Intl.DisplayNames()を使用すると、"ja"、 "en-US"などの言語コードを日本語や英語などの名称に変換できます。
const ja = new Intl.DisplayNames(["ja"], {type: "language"});
console.log( ja.of( "ja" ) ); // "日本語"
console.log( ja.of( "en" ) ); // "英語"
console.log( ja.of( "en-US" ) ); // "アメリカ英語"
console.log( ja.of( "zh-TW" ) ); // "中国語 (台湾)"
上のコードは、最初の行で日本語表示の準備をします。
第一引数に配列で言語コードを指定します。
第二引数はオブジェクトです。typeプロパティに"language"を指定します。
次に、ofメソッドで言語コードを日本語表記に変換しています。
他の言語に変えるときは、第一引数の配列要素を他の言語コードに変更します。
console.log( new Intl.DisplayNames(["en-US"], {type: "language"}).of( "ja" ) );
// "Japanese"
console.log( new Intl.DisplayNames(["ko"], {type: "language"}).of( "ja" ) );
// "일본어"
console.log( new Intl.DisplayNames(["fr"], {type: "language"}).of( "ja" ) );
// "japonais"
console.log( new Intl.DisplayNames(["de"], {type: "language"}).of( "ja" ) );
// "Japanisch"
console.log( new Intl.DisplayNames(["sv"], {type: "language"}).of( "ja" ) );
// "japanska"
"language" を "region" に変更すると、国名コードを日本語や英語などに変換できます。
// 日本語
const ja = new Intl.DisplayNames(["ja"], {type: "region"});
console.log( ja.of( "jp" ) ); // "日本"
console.log( ja.of( "us" ) ); // "アメリカ合衆国"
// アメリカ英語
const us = new Intl.DisplayNames(["en-US"], {type: "region"});
console.log( us.of( "jp" ) ); // "Japan"
console.log( us.of( "us" ) ); // "United States"
日本語は "ja" ですが、日本は "jp" です。
言語コードと国名コードの違いで混乱しやすいので注意が必要ですね。
補足:言語コードと言語名
Google Chrome116.0.5845.141(2023/9時点)で、言語設定で追加できた言語の一覧です。
言語コード | 言語名(日本語) | 言語名(英語) |
---|---|---|
ja | 日本語 | Japanese |
en-US | アメリカ英語 | American English |
en | 英語 | English |
is | アイスランド語 | Icelandic |
ay | アイマラ語 | Aymara |
ga | アイルランド語 | Irish |
ak | アカン語 | Akan |
ast | アストゥリアス語 | Asturian |
az | アゼルバイジャン語 | Azerbaijani |
as | アッサム語 | Assamese |
af | アフリカーンス語 | Afrikaans |
am | アムハラ語 | Amharic |
an | アラゴン語 | Aragonese |
ar | アラビア語 | Arabic |
sq | アルバニア語 | Albanian |
hy | アルメニア語 | Armenian |
it | イタリア語 | Italian |
it-IT | イタリア語 (イタリア) | Italian (Italy) |
it-CH | イタリア語 (スイス) | Italian (Switzerland) |
yi | イディッシュ語 | Yiddish |
ig | イボ語 | Igbo |
ilo | イロカノ語 | Iloko |
ia | インターリングア | Interlingua |
id | インドネシア語 | Indonesian |
ug | ウイグル語 | Uyghur |
cy | ウェールズ語 | Welsh |
wo | ウォロフ語 | Wolof |
uk | ウクライナ語 | Ukrainian |
uz | ウズベク語 | Uzbek |
ur | ウルドゥー語 | Urdu |
ee | エウェ語 | Ewe |
et | エストニア語 | Estonian |
eo | エスペラント語 | Esperanto |
oc | オック語 | Occitan |
or | オディア語 | Odia |
nl | オランダ語 | Dutch |
om | オロモ語 | Oromo |
kk | カザフ語 | Kazakh |
ca | カタロニア語 | Catalan |
gl | ガリシア語 | Galician |
lg | ガンダ語 | Ganda |
kn | カンナダ語 | Kannada |
rw | キニアルワンダ語 | Kinyarwanda |
el | ギリシャ語 | Greek |
ky | キルギス語 | Kyrgyz |
gn | グアラニー語 | Guarani |
gu | グジャラート語 | Gujarati |
km | クメール語 | Khmer |
kri | クリオ語 | Krio |
ku | クルド語 | Kurdish |
hr | クロアチア語 | Croatian |
qu | ケチュア語 | Quechua |
xh | コサ語 | Xhosa |
co | コルシカ語 | Corsican |
kok | コンカニ語 | Konkani |
sm | サモア語 | Samoan |
sa | サンスクリット語 | Sanskrit |
jv | ジャワ語 | Javanese |
ka | ジョージア語 | Georgian |
sn | ショナ語 | Shona |
sd | シンド語 | Sindhi |
si | シンハラ語 | Sinhala |
sv | スウェーデン語 | Swedish |
zu | ズールー語 | Zulu |
gd | スコットランド・ゲール語 | Scottish Gaelic |
es | スペイン語 | Spanish |
es-US | スペイン語 (アメリカ合衆国) | Spanish (United States) |
es-AR | スペイン語 (アルゼンチン) | Spanish (Argentina) |
es-UY | スペイン語 (ウルグアイ) | Spanish (Uruguay) |
es-CR | スペイン語 (コスタリカ) | Spanish (Costa Rica) |
es-CO | スペイン語 (コロンビア) | Spanish (Colombia) |
es-ES | スペイン語 (イベリア半島) | European Spanish |
es-CL | スペイン語 (チリ) | Spanish (Chile) |
es-VE | スペイン語 (ベネズエラ) | Spanish (Venezuela) |
es-PE | スペイン語 (ペルー) | Spanish (Peru) |
es-HN | スペイン語 (ホンジュラス) | Spanish (Honduras) |
es-MX | スペイン語 (メキシコ) | Mexican Spanish |
es-419 | スペイン語 (ラテンアメリカ) | Latin American Spanish |
sk | スロバキア語 | Slovak |
sl | スロベニア語 | Slovenian |
sw | スワヒリ語 | Swahili |
su | スンダ語 | Sundanese |
ceb | セブアノ語 | Cebuano |
sr | セルビア語 | Serbian |
sh | セルビア語 (ラテン文字) | Serbian (Latin) |
so | ソマリ語 | Somali |
th | タイ語 | Thai |
tg | タジク語 | Tajik |
tt | タタール語 | Tatar |
ta | タミル語 | Tamil |
cs | チェコ語 | Czech |
chr | チェロキー語 | Cherokee |
ts | ツォンガ語 | Tsonga |
tn | ツワナ語 | Tswana |
ti | ティグリニア語 | Tigrinya |
dv | ディベヒ語 | Divehi |
te | テルグ語 | Telugu |
da | デンマーク語 | Danish |
de | ドイツ語 | German |
de-AT | ドイツ語 (オーストリア) | Austrian German |
de-CH | 標準ドイツ語 (スイス) | Swiss High German |
de-DE | ドイツ語 (ドイツ) | German (Germany) |
de-LI | ドイツ語 (リヒテンシュタイン) | German (Liechtenstein) |
tw | アカン語 | Akan |
doi | ドーグリー語 | Dogri |
tk | トルクメン語 | Turkmen |
tr | トルコ語 | Turkish |
to | トンガ語 | Tongan |
ny | ニャンジャ語 | Nyanja |
ne | ネパール語 | Nepali |
no | ノルウェー語 | Norwegian |
nn | ノルウェー語(ニーノシュク) | Norwegian Nynorsk |
nb | ノルウェー語(ブークモール) | Norwegian Bokmål |
ht | ハイチ・クレオール語 | Haitian Creole |
ha | ハウサ語 | Hausa |
ps | パシュトゥー語 | Pashto |
eu | バスク語 | Basque |
haw | ハワイ語 | Hawaiian |
hu | ハンガリー語 | Hungarian |
pa | パンジャブ語 | Punjabi |
bm | バンバラ語 | Bambara |
hi | ヒンディー語 | Hindi |
fil | フィリピノ語 | Filipino |
fi | フィンランド語 | Finnish |
fo | フェロー語 | Faroese |
hmn | フモン語 | Hmong |
fr | フランス語 | French |
fr-CA | フランス語 (カナダ) | Canadian French |
fr-CH | フランス語 (スイス) | Swiss French |
fr-FR | フランス語 (フランス) | French (France) |
bg | ブルガリア語 | Bulgarian |
br | ブルトン語 | Breton |
vi | ベトナム語 | Vietnamese |
he | ヘブライ語 | Hebrew |
be | ベラルーシ語 | Belarusian |
fa | ペルシア語 | Persian |
bn | ベンガル語 | Bangla |
bho | ボージュプリー語 | Bhojpuri |
pl | ポーランド語 | Polish |
bs | ボスニア語 | Bosnian |
pt | ポルトガル語 | Portuguese |
pt-BR | ポルトガル語 (ブラジル) | Brazilian Portuguese |
pt-PT | ポルトガル語 (イベリア半島) | European Portuguese |
mai | マイティリー語 | Maithili |
mi | マオリ語 | Māori |
mk | マケドニア語 | Macedonian |
mg | マダガスカル語 | Malagasy |
mni-Mtei | マニプリ語 (メイテイ文字) | Manipuri (Meitei Mayek) |
mr | マラーティー語 | Marathi |
ml | マラヤーラム語 | Malayalam |
mt | マルタ語 | Maltese |
ms | マレー語 | Malay |
lus | ミゾ語 | Mizo |
my | ミャンマー語 | Burmese |
mn | モンゴル語 | Mongolian |
yo | ヨルバ語 | Yoruba |
lo | ラオ語 | Lao |
la | ラテン語 | Latin |
lv | ラトビア語 | Latvian |
lt | リトアニア語 | Lithuanian |
ln | リンガラ語 | Lingala |
ro | ルーマニア語 | Romanian |
mo | ルーマニア語 | Romanian |
lb | ルクセンブルク語 | Luxembourgish |
ru | ロシア語 | Russian |
rm | ロマンシュ語 | Romansh |
wa | ワロン語 | Walloon |
en-IE | 英語 (アイルランド) | English (Ireland) |
en-GB-oxendict | en-GB-oxendict | British English (Oxford English Dictionary spelling) |
en-GB | イギリス英語 | British English |
en-IN | 英語 (インド) | English (India) |
en-AU | オーストラリア英語 | Australian English |
en-CA | カナダ英語 | Canadian English |
en-NZ | 英語 (ニュージーランド) | English (New Zealand) |
en-ZA | 英語 (南アフリカ) | English (South Africa) |
ko | 韓国語 | Korean |
fy | 西フリジア語 | Western Frisian |
ckb | 中央クルド語 | Central Kurdish |
zh | 中国語 | Chinese |
zh-CN | 中国語 (中国) | Chinese (China) |
zh-HK | 中国語 (中華人民共和国香港特別行政区) | Chinese (Hong Kong SAR China) |
zh-TW | 中国語 (台湾) | Chinese (Taiwan) |
st | 南部ソト語 | Southern Sotho |
nso | 北部ソト語 | Northern Sotho |
この表はGoogle Chromeの言語設定で、優先言語に全ての言語を追加した後に、次のコードを実行した結果をコピペしたものです。
document.addEventListener("DOMContentLoaded",()=>{
const ja = new Intl.DisplayNames(["ja"], {type: "language"});
const us = new Intl.DisplayNames(["en-US"], {type: "language"});
document.body.innerHTML = "<table><tbody><tr><th>言語コード</th><th>言語名(日本語)</th><th>言語名(英語)</th></tr>"
+ navigator.languages.map((e=>`<tr><th>${e}</th><td>${ja.of(e)}</td><td>${us.of(e)}</td></tr>`)).join("\n")
+ "</table>";
});
ちなみに、このページ内で解説していますが、この設定はリクエストヘッダでWebサーバーに送信されます。
そのため、全ての言語を追加するとリクエストヘッダーが肥大化します。
必要ないものは削除しておきましょう、と言いたいところですが、削除がとても面倒です。
やらないといけない理由がないなら、やらないほうがいいです。
更新日:2023/10/20
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。