簡単な多言語切り替えサイト

(Sample)

今回は「多言語サイト」の仕組みを、初心者の方でもゼロから理解できるように、実際のHTML＋JavaScriptコードをもとに解説します。

「サイトを英語やフランス語にも対応したいけど、どうやるの？」と思ったことはありませんか？
このコードを読めば、「ユーザーが言語を選ぶと、その言語のコンテンツだけを表示する」しくみがすぐに作れるようになりますよ！

多言語対応の仕組みは意外とシンプル！

このサンプルでは、日本語・英語・フランス語の3つの言語を選べるようになっています。

流れはとても単純で、

1. すべての言語分のコンテンツをHTMLに用意しておき、
2. ユーザーが言語を選んだら、
3. JavaScriptが選ばれた言語だけを表示！

という仕組みです。

HTMLのポイントを解説！

言語セレクター部分

<select id="languageSelector">
  <option value="ja">日本語</option>
  <option value="en">English</option>
  <option value="fr">Français</option>
</select>

この <select> タグがユーザーに言語を選ばせるUIです。

• value="ja" → lang-ja のIDと対応
• value="en" → lang-en
• value="fr" → lang-fr

各言語のコンテンツ

<div class="lang-content" id="lang-ja">
  <h3>ようこそ</h3>
  <p>これは日本語のコンテンツです。</p>
</div>

上のようなブロックが、英語・フランス語の分も含めて3つあります。

すべてのブロックに .lang-content クラスが付いており、CSSで非表示にする制御が可能です。

CSSで表示・非表示を切り替える

.lang-content {
  display: none;
}

.lang-content.active {
  display: block;
}

• .lang-content は基本的に非表示
• .active クラスが付いたものだけ表示！

つまり、「今どの言語のブロックを表示するか？」は、このクラスの付け替えで制御されているんです。

JavaScriptでの言語切り替えの流れ

ここがこのコードの心臓部です。

document.addEventListener("DOMContentLoaded", () => {
  const languageSelector = document.getElementById("languageSelector");
  const langContents = document.querySelectorAll(".lang-content");

  function showContent(lang) {
    langContents.forEach((content) => {
      content.classList.remove("active");
    });
    document.getElementById(`lang-${lang}`).classList.add("active");
  }

  languageSelector.addEventListener("change", (event) => {
    showContent(event.target.value);
  });

  // 初期表示
  showContent(languageSelector.value);
});

解説ポイント

• document.addEventListener("DOMContentLoaded", ...)
  ページが読み込まれたタイミングで処理を実行します。
• showContent(lang) 関数
  すべての .lang-content を非表示にしたうえで、選ばれた言語の要素だけ active クラスを付与。
• languageSelector.addEventListener("change", ...)
  言語が変更されたタイミングで、showContent() を実行。

つまり、「セレクトボックスの値（ja/en/fr）に応じて、該当のHTML要素を表示する」だけのロジックなんです！

メリットとデメリットを理解しよう

💡補足：SEO（検索エンジン最適化）について

この方法は「切り替えが見た目だけ」なので、Googleのクローラーに全言語を見せるには追加対応が必要です。SEOを意識するなら「サーバー側で言語ごとにページを分ける」ことも検討しましょう。

今後の学習ステップ

今回のシンプルな構成から、次のステップへ進みましょう！

1. コンテンツをJSONで管理してみる
   → 翻訳データをJSONにして、必要に応じて読み込む構成に！
2. URLのパラメータで言語を切り替え可能にする
   例：?lang=en のようにURLで制御できると、共有しやすくなります。
3. i18nライブラリを使って本格対応
   • i18next や vue-i18n、react-i18next など、国際化対応に特化したライブラリを学ぶと、より大規模なサイトにも対応できます。

いかがでしたか？

一見難しそうな「多言語対応」も、実は基本の仕組みはとってもシンプル！
ぜひ今回のコードをベースに、独自の言語切り替えサイトを作ってみてください。
自分のポートフォリオにも使える応用力が身につきますよ！