【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サーバーに送信されます。

Accept-Language:ja,en-US;q=0.9,en;q=0.8

あくまでリクエスト送信するだけ。
ブラウザの表示内容を変更するような設定ではありません。

 

言語コードを日本語や英語に変換する方法

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-oxendicten-GB-oxendictBritish 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

書いた人(管理人):けーちゃん

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない?」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。