JavaScriptでサイトの言語を切り替える方法

Web

2020.09.27 2020.03.25

今回は、JavaScriptとCookieを使ってサイトの言語を切り替える方法を紹介します。

HTML

<html>
<a id="ja">日本語</a>
<a id="en">English</a>

<div class="ja">
<p>日本語コンテンツ</p>
</div>
<div class="ja">
<p>English content</p>
</div>
</html>

JavaScript

$(function(){
　　//言語選択ボタンを監視
    $("#ja").click(function(){
        document.cookie = "lang=ja";
        location.reload();
    })
    $("#en").click(function(){
        document.cookie = "lang=en";
        location.reload();
    })

    //Cookieの言語データを読み出して選ばれていない言語を非表示にする
    lang="ja"
    var cookiedata = document.cookie;
    var cookiesArray = cookiedata.split(';');
    for(var c of cookiesArray){
        var cArray = c.split('=');
        if( cArray[0] == 'lang'){
            if( cArray[1] == "ja"){
                lang="ja"
            }
            if( cArray[1] == "en"){
                lang="en"
            }
        }
    }
    if(lang=="ja"){
        $(".ja").show()
        $(".en").hide()

    }
    if(lang=="en"){
        $(".ja").hide()
        $(".en").show()
    }    
})

この方法ではjqueryを使用しているため予め読み込んでおいてください。

aタグで書かれている言語ボタンを押すことでJSがCookieに言語情報を書き込んでいます。

リンク