JSでHTMLの言語設定をする

趣味の制作で9か国語対応をすることになったので、実装のメモ。

実行環境

Vue.js v3.3.4
Node.js v18.16.0

ユーザーのブラウザの言語設定を取得し、用意している言語に合うかチェックする

// 用意している言語
const LangArr = ["ja", "en", "de", "it", "fr", "es", "ko", "zh-Hans", "zh-Hant"];

//　言語設定（配列）
const UserLang = () => {
  return navigator.languages.filter((lang) => {
    return LangArr.includes(lang);
  });
};

オブジェクトの場合

const LangArrText = [
  { code: "ja", name: "日本語" },
  { code: "en", name: "English" },
  { code: "de", name: "Deutsch" },
  { code: "it", name: "Italiano" },
  { code: "fr", name: "français" },
  { code: "es", name: "Español" },
  { code: "ko", name: "한글" },
  { code: "zh-Hans", name: "中文（简体）" },
  { code: "zh-Hant", name: "中文（繁体）" },
];

//　言語設定
const UserLang = () => {
  return navigator.languages.filter((lang) => {
    return LangArrText.some((item) => item.code === lang);
  });
};

navigator.languagesは配列を返す（ぼくのブラウザだと['ja', 'en-US' ,'en']）ので、filter関数で用意している言語（LangArr）に含まれているものだけ返却する（['ja', 'en']が返ってくる）。

ブラウザから返ってくる言語コード（culture_code）の一覧。
https://www.venea.net/web/culture_code

幸いPokeAPI内の表記と一致していたのでそのまま使えた。よかった。

HTMLの言語属性を変える

document.getElementsByTagName("html")[0].lang = UserLang()[0] || "en";

配列に何も入っていない（対応できる言語がない）場合は英語にフォールバックする。

言語パックをロードする

言語ごとにテキストを翻訳したjsonファイルを用意しているので、それを読み込む。

const LangData = ref({});
function LoadLangData(lang) {
  fetch(`./data/text/${lang}_text.json`)
    .then((response) => response.json())
    .then((data) => {
      LangData.value = data[0];
    }).catch((error) => {
      console.log("テキストの取得に失敗しました。" + error);
    });
}
LoadLangData(UserLang()[0] || "en");

関数からテキストをHTMLにロードすれば完成。
念のため、ロード前のHTMLにもテキストを入れておくといい。