🗺️

Webサイトの「単純な」ローカライズ(他言語対応)方法

2024/09/28に公開

JavaScript

ローカライズ(多言語対応)は本格的にやろうとすると、例えば日時の表示方法が国によって違う(日本では2024/09/24のように年/月/日の順に書くが、アメリカでは09/24/2024と月/日/年の順に書く)など考える事が沢山あって難しいですが、ここでは「単純な」ケース、要するに「最終試験」を「Final exam」と英語に置き換えるだけのような場合を考えます。

まずローカライズ(多言語対応)のための言語ファイルを作成します。

ja.json

{
    "final_exam": "最終試験",
    "required_score": "必要スコア"
}

en.json

{
    "final_exam": "Final exam",
    "required_score": "Required score"
}

そしてHTMLファイルではローカライズしたい部分に以下のようにlocalization-keyを設定します。

<html>
    <head>
    	<meta charset="utf-8" />
    	<script src="script.js"></script>
    </head>
    <body>
        <span localization-key="final_exam">最終試験</span>
        <span localization-key="required_score">必要スコア</span>
    </body>
</html>

元々特にタグで囲んでなかった場合も単体では特に効果を発揮しないspanで囲んでlocalization-keyを設定すれば大丈夫です。

そしてhtmlファイルからリンクしているjavascriptファイルには以下のように書きます。

script.js

//用意している言語のリスト(今回は日本語(ja)と英語(en))
const PREPARED_LANG_SET = new Set(["ja", "en"]);

let translations;
const loadLanguage = (lang) => {
    //Webページを見た人の言語が用意している言語リストに無かったら、「デフォルト言語」に変更。
    //今は機械翻訳もあるので「デフォルト」を原語(日本語)にした方が良いこともあるかもしれません。
    if (!PREPARED_LANG_SET.has(lang)) lang = "ja";

    //例えば英語(en)ならen.jsonファイルを取得
    fetch(`${lang}.json`)
        .then(response => {
            if (!response.ok) {
                throw new Error(response.status);
            }
            return response.json();
        })
        .then(data => {
            translations = data;
            //`localization-key`属性を持つタグを取得
            document.querySelectorAll('[localization-key]').forEach((element) => {
                //key、例えば"final_exam"などを取得
                const key = element.getAttribute('localization-key');
                //jsonデータからキー(e.x."final_exam")を元に"Final exam"(en)や"最終試験"(ja)を取得
                const translated = translations[key];
                element.innerHTML = translated;
            });
        })
        .catch(error => console.error('Error loading language file:', error));
}

//実際の「翻訳処理」はページのロードが終わってタグが存在してから
window.onload = () => {
    const lang = window.navigator.language.substring(0, 2);
    loadLanguage(lang);
}

参考記事: JavaScript Localization: A Step-by-Step Guide | by Transifex | Geek Culture | Medium

なお、ローカルで上記のコードを動かそうとすると「外部ファイルを読み込もうとしている！」とブロックされてしまうのでローカルサーバーを建てる必要があります。Visual Studio Codeなら以下の記事のように一つ拡張を入れるだけでいいです。

宣伝

以下の学マスレッスン自動選択＆パラメータ計算機も上記の方法でローカライズしています。

宣伝

Discussion