[jquery-i18next] JavaScriptで多言語を表示する

JavaScriptで多言語を表示することができるライブラリを紹介します。

i18next
https://www.i18next.com/

i18next-xhr-backend
https://github.com/i18next/i18next-xhr-backend

jquery-i18next
https://github.com/i18next/jquery-i18next

今回使用したJavaScriptライブラリのバージョンは下記の通りです。

JavaScriptライブラリ

Bootstrap: 3.3.7
jQuery: 3.3.1
i18next: 12.0.0
i18next-xhr-backend: 1.5.1
jquery-i18next: 1.2.1

i18next とは

JavaScriptの多言語化フレームワークです。言語毎に定義された文字列を表示します。

i18next-xhr-backend とは

言語毎に文字列を定義したJSONファイルを切り替えることができます。

jquery-i18next とは

HTML属性data-i18nに指定されたキーをもとに言語毎に定義された文字列を表示します。

ライブラリの読み込み

下記のファイルを参照します。
i18next.min.js
jquery-i18next.min.js
i18nextXHRBackend.min.js

index.html

<script type="text/javascript" src="../lib/i18next/i18next.min.js"></script>
<script type="text/javascript" src="../lib/jquery-i18next/jquery-i18next.min.js"></script>
<script type="text/javascript" src="../lib/i18next-xhr-backend/i18nextXHRBackend.min.js"></script>

基本的な使い方

デモはこちら
ソースファイルはこちら

画面に表示する文字列を定義したJSONファイルを言語毎に作成します。
locales/en/string.json（英語）
locales/ja/string.json（日本語）
locales/zh/string.json（中国語）

locales/ja/string.json

{
  "label": {
    "label1": "作成する",
    "label2": "読み込む1<br>読み込む2"
  },
  "title": {
    "title1": "更新する"
  },
  "placeholder": {
    "placeholder1": "削除する"
  }
}

i18next.use関数とjqueryI18next.initで初期化します。loadPathに言語毎に指定したJSONファイルと同じパスになるように指定します。$('[data-i18n]').localize()を実行すると、HTML属性HTML属性data-i18nに指定されたキーから文字列が表示されます。

i18next.use(i18nextXHRBackend).init({
    backend: {
        loadPath: 'locales/{{lng}}/string.json'
    },
    debug: false,
    defaultLng: 'en',
    fallbackLng: false,
    lng: lang,
}, function (err, t) {
    jqueryI18next.init(i18next, $);
    $('[data-i18n]').localize();
});

ラベルを表示する

ソースコード上のHTML

<div data-i18n="label.label1"></div>

ブラウザ上のHTML

<div data-i18n="label.label1">作成する</div>

ラベルを表示する（文字列のHTMLを有効にする）

ソースコード上のHTML

<div data-i18n="[html]label.label2"></div>

ブラウザ上のHTML

<div data-i18n="[html]label.label2">読み込む1<br>読み込む2</div>

valueとtitleを表示する

ソースコード上のHTML

<input type="button" data-i18n="[value]title.title1;[title]title.title1">

ブラウザ上のHTML

<input type="button" data-i18n="[value]title.title1;[title]title.title1" value="更新する" title="更新する">

placeholderを表示する

ソースコード上のHTML

<input type="text" data-i18n="[placeholder]placeholder.placeholder1">

ブラウザ上のHTML

<input type="text" data-i18n="[placeholder]placeholder.placeholder1" placeholder="削除する">

オプション（置換文字）

デモはこちら
ソースファイルはこちら

useOptionsAttrオプションを有効にすることで、表示する文字列に置換文字を指定することができます。

locales/ja/string.json

{
  "label": {
    "label1": "値1={{v1}}, 値2={{v2}}"
  }
}

jqueryI18next.initで初期化するときに、useOptionsAttrオプションでtrueを指定します。

i18next.use(i18nextXHRBackend).init({
    backend: {
        loadPath: 'locales/{{lng}}/string.json'
    },
    debug: false,
    defaultLng: 'en',
    fallbackLng: false,
    lng: lang,
}, function (err, t) {
    jqueryI18next.init(i18next, $, {
        useOptionsAttr: true // optionを有効にする
    });
    $('[data-i18n]').localize();
});

置換文字を表示する

ソースコード上のHTML

<div data-i18n="label.label1" data-i18n-options='{"v1":"aaa","v2":"bbb"}'></div>

ブラウザ上のHTML

<div data-i18n="label.label1" data-i18n-options="{&quot;v1&quot;:&quot;aaa&quot;,&quot;v2&quot;:&quot;bbb&quot;}">値1=aaa, 値2=bbb</div>

以上です。