🍉

JavaScript で静的 HTML ページの多言語対応をする

2024/04/01に公開

JavaScript

i18n

多言語

tech

概要

フレームワークなどを使用しない HTML/CSS/JavaScript で作成された静的ページを多言語化する方法です。
<select> を使用して、選択された言語のhtmlを表示します。

jsonファイルで各言語の原稿を管理する方法などもありますが、言語ごとにhtmlを用意するという要件だったためコンテンツは各htmlファイルに直書きする想定です。

要件

HTML, CSS, JavaScriptで作成されたWebページ
言語ごとのhtmlファイル

/
|-- index.html
|-- index-ja.html
`-- index-el.html

実際のコード

htmlファイルは共通で <option> の selected と、コンテンツ部分をhtmlファイルにあわせて書き換えます。

...
  <body>
    <select id="locale-switcher">
      <option value="en" selected>🇬🇧 EN</option>
      <option value="ja">🇯🇵 JA</option>
      <option value="el">🇬🇷 EL</option>
    </select>
    <h1>Hello, World!</h1>
  </body>
...

以下はデフォルト言語が「英語」の場合の例です。

const switcher = document.getElementById("locale-switcher");

function localeSwitch(lang) {
  switch (lang) {
    case "ja":
      window.location.href = "./index-ja.html";
      break;
    case "el":
      window.location.href = "./index-el.html";
      break;
    default:
      window.location.href = "./index.html";
  }
}

switcher.addEventListener("change", (e) => {
  // option タグの value を読み取る
  const targetLang = e.target.value;
  localeSwitch(targetLang);
});

JavaScript で静的 HTML ページの多言語対応をする

概要

要件

実際のコード

デモ

Discussion