多言語サイトの言語切り替え実装方法｜JavaScriptで英語・日本語を自動判定する方法【2026年リライト】

このコードは、以下の要件を満たすために組まれています。

1. 日本語ページ → 英語ページへ切り替え
2. 英語ページ → 日本語ページへ戻す
3. URL構造（階層の深さ）によって遷移先を変える
4. 英語ファイルが存在しない場合はボタン自体を非表示にする

CMSなしの静的サイトの場合、英語版のファイル名がパスによって違うこともしばしばあります。
例：

• トップページ：index.php → index_en.php

• 下層ページ：index.php → en.php

つまり、「フォルダの深さでルールが変わる」仕様。

これを自動判定し、ユーザーにとって自然な切り替えを実現しています。

企業サイトやゲーム公式サイトの海外展開では、多言語対応が当たり前になりつつあります。

しかし実際には、

• 英語ページだけURL構造が異なる
• ページによって翻訳が存在しない
• SEOを考慮したURL設計ができていない
• 言語切替後にトップページへ飛ばされる

といった問題が頻繁に発生します。

特にCMSを利用していない静的サイトでは、言語切替ロジックを独自実装するケースも少なくありません。

本記事では、実際の制作案件で採用したJavaScriptによる言語切替実装を例に解説します。

/* ランゲージボタン */
document.addEventListener('DOMContentLoaded', () => {
  const langBtn = document.getElementById('lang-switch');
  if (!langBtn) return;
  const langLi = langBtn.closest('.lang');
  const currentPath = window.location.pathname;
  let targetPath = '';
  let isEnglish = false;

  console.log("現在のパス:", currentPath);

  // 英語ページなら日本語に戻す
  if (currentPath.endsWith('index_en.php')) {
    targetPath = currentPath.replace('index_en.php', 'index.php');
    langBtn.textContent = 'JP';
    isEnglish = true;
  } else if (currentPath.endsWith('en.php')) {
    targetPath = currentPath.replace('en.php', 'index.php');
    langBtn.textContent = 'JP';
    isEnglish = true;
  }

  // 日本語ページなら英語へ切り替え
  else if (currentPath.endsWith('index.php')) {
    const depth = currentPath.split('/').filter(Boolean).length;
    if (depth <= 2) {
      targetPath = currentPath.replace('index.php', 'index_en.php');
    } else {
      targetPath = currentPath.replace('index.php', 'en.php');
    }
    langBtn.textContent = 'EN';
  }

  // ディレクトリアクセス（例: /company/）
  else if (currentPath.endsWith('/')) {
    const depth = currentPath.split('/').filter(Boolean).length;
    if (depth <= 1) {
      targetPath = currentPath + 'index_en.php';
    } else {
      targetPath = currentPath + 'en.php';
    }
    langBtn.textContent = 'EN';
  }

  // 想定外パターン
  else {
    targetPath = currentPath.replace('.php', '_en.php');
    langBtn.textContent = 'EN';
  }

  // ファイル存在チェック（なければボタン非表示）
  fetch(targetPath, { method: 'HEAD' })
    .then(response => {
      if (response.ok) {
        langLi.style.display = 'flex';
        langBtn.addEventListener('click', (e) => {
          e.preventDefault();
          window.location.href = targetPath;
        });
      } else {
        langLi.style.display = 'none';
      }
    })
    .catch(() => {
      langLi.style.display = 'none';
    });
});

① ページの階層（深さ）を自動判定

const depth = currentPath.split('/').filter(Boolean).length;

• /company/ → depth=1

• /service/web/ → depth=2

• /service/web/project/ → depth=3

トップか下層かで「英語版ファイル名」が変わる仕様に対応しています。

② 英語版のファイルが存在しない場合は言語切替ボタンを消す

fetch(targetPath, { method: 'HEAD' })

HEAD リクエストで存在チェックし、

• あれば → ボタン表示

• なければ → ボタン非表示

クライアントに「英語版が無いのにENボタンがある」誤解を与えません。

③ 想定外のファイル名でも _en.php を自動生成

targetPath = currentPath.replace('.php', '_en.php');

規則外でも最低限の英語版遷移を作る保険です。

• 静的HTML + PHPで構成された企業サイト

• CMSなしでページごとに英語ファイルを持っている構成

• URL構造が一定ではないサイト

• 英語版が存在しないページも混在しているサイト

ProcessWireやWordPressなどCMS利用の場合はより効率よい方法がありますが、静的サイトでの多言語切替としては十分に堅牢な構成です。

Googleは多言語サイトにおいて、

• example.com/
• example.com/en/

のようにURLを分ける構成を推奨しています。

そのため、

• JavaScriptだけで翻訳する
• ボタンで表示言語のみ変更する

方式よりも、言語ごとに独立したURLを持つ構成がSEO上有利です。

今回紹介する実装は、そのようなURL分離型サイト向けの言語切替ロジックになります。

今回の実装の考え方を応用すると、以下のような改善も可能です。

● 切替後に「同じコンテンツの英語版」に飛ばす

→ CMSならページIDで紐づけられる

● 言語パラメータ（?lang=en）方式に変更

→ SPAやReact構成と相性が良い

● サイト全体で統一したファイル命名規則を導入

→ 運用コスト大幅削減

Q. 多言語サイトの言語切り替えはJavaScriptだけで実装できますか？

可能です。

JavaScriptを利用することで、現在のURLを取得し、英語版・日本語版などの対応ページへ遷移させることができます。

ただし、SEOを重視する場合は、単純な表示切替ではなく、言語ごとに独立したURLを用意する構成がおすすめです。

Q. 多言語サイトのURL構成はどれがおすすめですか？

一般的には以下の3パターンがあります。

• ディレクトリ方式（example.com/en/）
• サブドメイン方式（en.example.com）
• 国別ドメイン方式（example.co.uk）

運用性やSEOを考慮すると、ディレクトリ方式が採用されるケースが多くなっています。

Q. Google翻訳だけで多言語サイトを作れますか？

技術的には可能ですが推奨されません。

自動翻訳のみでは誤訳や不自然な表現が発生しやすく、ユーザー体験や企業イメージに影響する可能性があります。

特にゲーム公式サイトや企業サイトでは、ネイティブチェックや翻訳品質の管理が重要です。

弊社プロジェクト「輪廻 Vintage Game Tees JP」では、Google翻訳をサイト内に埋め込んで使用しておりますので、参考までにご覧ください。

Q. hreflangタグは必要ですか？

多言語サイトでは設定をおすすめします。

hreflangタグを設定することで、検索エンジンに各言語ページの関係性を正しく伝えられます。

その結果、日本語検索には日本語ページ、英語検索には英語ページが表示されやすくなります。

Q. ProcessWireで多言語サイトは作れますか？

可能です。

• 管理画面の多言語対応
• ページごとの翻訳管理
• 言語別URL管理

などを柔軟に設定できます。

中小規模から大規模サイトまで対応しやすいCMSです。

Q. 多言語サイト制作の費用相場はどのくらいですか？

サイト規模や対応言語数によって異なります。

一般的な目安としては、

• 小規模サイト：30万〜80万円
• 中規模サイト：80万〜200万円
• 大規模サイト：200万円以上

となることが多いです。

翻訳費用や運用体制も考慮して計画することが重要です。

Q. ゲーム公式サイトを多言語対応するメリットは何ですか？

海外ユーザーへの情報発信がしやすくなり、Steamやコンソール向けタイトルの認知拡大につながります。

また、

• 海外メディア掲載
• コミュニティ形成
• ストアページへの送客

といったマーケティング面でも効果が期待できます。

夢双合同会社では、

• ゲーム公式サイト制作
• Steam向けLP制作
• インディーゲームサイト制作
• リッチアニメーション実装
• SEO/AIOを意識した構成設計
• SNS連動型Web制作

など、ゲーム業界向けのWeb制作を行っています。

RPG・FPS・ノベルゲーム・アクションなど、ジャンルごとの世界観に合わせたデザイン・演出設計にも対応しています。

新作タイトルのプロモーションサイト制作や、既存サイトの見直しについてお悩みの方は、お気軽にご相談ください。

企画段階からのご相談にも対応しており、「何から考えればいいか分からない」といった状態でも問題ありません。

内容を整理しながら、最適なサイトの方向性をご提案いたします。

実際にご相談いただくケースでも、「まだ具体的な要件が固まっていない」という段階からスタートすることがほとんどです。

そのため、初期の方向性整理から伴走する形でサポートしています。

制作実績 → https://6sou.site/works.php

壁打ち相談はこちら → https://6sou.site/free_consult.php