【JavaScript】ブラウザの言語を取得して適切なページにリダイレクトする方法

2023.06.30

ぶんけい

こんにちはインターン生の「ぶんけい」です。現在大学4年生で文系の学部に所属しています。インターン生としてPIPELINEで勤め始めて、様々な言語の学習や開発に携わってきました。その中で得たTipsを共有しようと思います。

Contents

1 JavaScriptでのセッションストレージの利用方法
2 ユーザーの言語設定を取得・保存する方法
3 URLパスから言語を判断する方法
4 初回訪問時のリダイレクト処理の実装方法
5 まとめ：JavaScriptでの言語設定とリダイレクト処理
6 コードの全文

JavaScriptでのセッションストレージの利用方法

セッションストレージは、一時的なデータ保管に用いられるウェブストレージの一種です。sessionStorageオブジェクトを使用して、ブラウザにデータを保存し、そのセッション中ではいつでもアクセスできます。

例えば、以下のようにしてセッションストレージに値をセットします：

sessionStorage.setItem('key', 'value');

ユーザーの言語設定を取得・保存する方法

ユーザーのブラウザ設定やセッション情報から言語設定を取得する方法を学びましょう。以下の関数getUserLanguageでは、まずセッションストレージを確認し、そこにユーザーの言語設定が存在すればそれを返します。なければブラウザの設定から言語を抽出します。

function getUserLanguage() {
return sessionStorage.getItem('userLanguage') || navigator.language.substr(0, 2);
}

次に、saveLanguageToSession関数で、セッションストレージにユーザーの言語を保存する方法を紹介します。これはユーザーがサイトに初めて訪れたときに実行されます。

function saveLanguageToSession() {
if (!sessionStorage.getItem('userLanguage')) {
const language = getLanguageFromPath();
sessionStorage.setItem('userLanguage', language);
console.log(`Saved user language: ${language}`);
} else {
console.log(`User language already set: ${getUserLanguage()}`);
}
}

URLパスから言語を判断する方法

URLのパス部分を見て、ユーザーの言語を判断する方法もあります。例えば、以下のような関数を作成しました。

function getLanguageFromPath() {
const path = window.location.pathname;
if (path.startsWith('/jp/')) return 'jp';
if (path.startsWith('/ch/')) return 'zh';
return 'en';
}

初回訪問時のリダイレクト処理の実装方法

リダイレクト処理は、ユーザーが初めてサイトに訪れたとき、そのユーザーの言語に合わせたページに自動的に遷移させるためのものです。以下の関数redirectOnFirstVisitでは、ユーザーが初めてサイトに訪れたとき、そのユーザーの言語設定に基づいてリダイレクトします。

function redirectOnFirstVisit() {
saveLanguageToSession();

const language = getUserLanguage();
const path = window.location.pathname;

const isJapanesePath = path.startsWith('/jp/');
const isChinesePath = path.startsWith('/ch/');

const shouldRedirectToJapanese = language === 'jp' && !isJapanesePath;
const shouldRedirectToChinese = language === 'zh' && !isChinesePath;
const shouldRedirectToEnglish = language === 'en' && (isJapanesePath || isChinesePath);

if (shouldRedirectToJapanese) {
window.location.href = '/jp/';
} else if (shouldRedirectToChinese) {
window.location.href = '/ch/';
} else if (shouldRedirectToEnglish) {
window.location.href = '/';
}
}

まとめ：JavaScriptでの言語設定とリダイレクト処理

この記事では、JavaScriptを用いて言語設定を取得・保存し、初回訪問者を適切なページにリダイレクトする方法を解説しました。これらの機能は、多言語対応のWebサイトを作成する際に非常に役立つでしょう。JavaScriptの学習を続けて、さまざまなインタラクティブな機能を自由自在に実装できるようになりましょう。

コードの全文

// ユーザーの設定言語を取得する関数
function getUserLanguage() {
return sessionStorage.getItem('userLanguage') || navigator.language.substr(0, 2);
}

// 初回訪問時にセッションに言語情報を保存する関数
function saveLanguageToSession() {
if (!sessionStorage.getItem('userLanguage')) {
const language = getLanguageFromPath();
sessionStorage.setItem('userLanguage', language);
console.log(`Saved user language: ${language}`);
} else {
console.log(`User language already set: ${getUserLanguage()}`);
}
}

// URLパスから言語を推定する関数
function getLanguageFromPath() {
const path = window.location.pathname;
if (path.startsWith('/jp/')) return 'jp';
if (path.startsWith('/ch/')) return 'zh';
return 'en';
}

// 初回訪問時に適切なページへリダイレクトする関数
function redirectOnFirstVisit() {
saveLanguageToSession();

const language = getUserLanguage();
const path = window.location.pathname;

const isJapanesePath = path.startsWith('/jp/');
const isChinesePath = path.startsWith('/ch/');

const shouldRedirectToJapanese = language === 'jp' && !isJapanesePath;
const shouldRedirectToChinese = language === 'zh' && !isChinesePath;
const shouldRedirectToEnglish = language === 'en' && (isJapanesePath || isChinesePath);

if (shouldRedirectToJapanese) {
window.location.href = '/jp/';
} else if (shouldRedirectToChinese) {
window.location.href = '/ch/';
} else if (shouldRedirectToEnglish) {
window.location.href = '/';
}
}

// 初回訪問時の言語判定とリダイレクトを実行する
redirectOnFirstVisit();

ぶんけい