英語など他の言語と日本語の切り替えをページごとにURL指定せずにボタンひとつで行えるようにするJavaScriptでの実装（jQueryなし）

WordPressを用いての英語など多言語サイトの作り方をこちらの記事で紹介しました。その中で、他の言語（以下、例として英語とする）と日本語の切り替え方法を簡単にご紹介しましたが、ここではそのJavaScriptの解説をいたします。

前提とするディレクトリ構造

詳しくはこちらの記事を参照いただきたいのですが、英語サイトを設ける場合のディレクトリ構造として大きく３種類ある中で、以下のようにディレクトリで分ける場合を想定した内容になっています。ただ、応用することで、独自ドメインで分ける場合、サブドメインで分ける場合にも活用はできると思います。

トップページ

日本語サイト：https://www.example.com/

英語サイト：https://www.example.com/en/

トップページ以外

日本語サイト：https://www.example.com/about/

英語サイト：https://www.example.com/en/about/

JavaScript

const url = location.href;
const dir = url.split("/").filter( e => Boolean(e)); // URLを/で分割して配列に格納
const lastDir = dir.pop();  // 分割したURLの最後の部分を取り出し
const beforeDomain = 'http://ドメイン名/';
const afterDomain = url.replace( beforeDomain , '' );

// スイッチの見た目について、スイッチ押下前に変更が必要な場合の記述（不要なら消す）
if ( url.match(new RegExp('/en/')) ) {
   // 英語サイトでの見た目のための処理
} else {
   // 日本語サイトでの見た目のための処理
}

document.getElementById('lang-sw').addEventListener('click', function() {

//ページ内にページ内リンクが設けられている場合を考慮して、URLに#から始まる記述がある場合にその部分を削除
  if (url.match('#')) {
   url.substring(0, url.indexOf('#'));
  }

//スタイルの見た目について、スイッチ押下後、リンク先に飛ぶ前に変更が必要な場合の処理

// URLに「/en/」が含まれる場合に、「/en/」を取ることで日本語サイトを表示
  if ( url.match(new RegExp('/en/')) ){
    const url_ja = url.replace('/en/', '/');
    location.href = url_ja;

// URLに「/en/」が含まれない場合は日本語サイトのため、
//トップページと、そうでない場合で条件分岐してURLを英語サイトのものに変更
  } else {
    if ( url == beforeDomain ) {
      location.href = url + 'en/';
  } else {
      url = url.replace(lastDir + '/' , '')
      location.href = url + 'en/' + lastDir + '/';
    }
  }
}, false);

説明

大体コメントアウトの形で書いてしまいましたが、それに補足を加えると以下の通りです。

1行目：	表示されているURLを取得
2行目：	ドメイン名までの部分を変数に格納します。ドメイン名と書いているのは、例として示すとwww.example.comなどです。
3行目：	ドメイン名までの部分を消すことで、ドメイン名以降の部分を取得します。例えば「https://www.example.com/about/」のページであれば、about/という文字列が取得されることとなります。
6～10行目：	ここで見た目の変更が必要な場合、と書いているのは、例えば上記のHTMLの例では「言語切替」の文言を「英語に切替」「日本語に切替」と日本語と英語で変える場合は元々そうしておけば良いのですが、スタイルを変えたい場合に、ここでJavaScriptで変える方法があります。
15～17行目：	ページ内リンクがあって、そのリンクが押された後の状態の場合、URLの末尾が#indexのようになるので、変数からその部分を消しています。
19行目：	あまりないと思いますが、スイッチが押された後、言語が切り替わる前にアニメーションなどを見せたい場合はここでその処理を書きます。
22～24行目：	URLに/en/が含まれるかどうかで現在のページの言語を判断し、英語の場合は/en/を取ることで日本語ページに遷移させます。
29～30行目：	日本語ページの場合、トップページとそれ以外で条件分岐をしています。
31～34行目：	トップページ以外の場合、ドメインの後に/en/がくるので、定義した変数beforeDomainとafterDomainを利用して、そうなるようにしています。

まとめ

英語など、日本語以外の言語ページを設ける場合に、JavaScriptを使って言語スイッチボタンを設ける方法についてご説明しました。WordPressにはプラグインもあるようですが、相当重くなってしまった状態のサイトを見たことがあります。このように、プラグインなしでも簡単に実装できる場合が多いと思うので、極力プラグインは使わないようにしましょう。
サイトを軽く、SEOに考慮して、良いデザインにしたい方、ぜひお気軽に当方にお問い合わせください。