[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ライブラリのバージョンは下記の通りです。

```Markdown: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`

```HTML: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>
```

## 基本的な使い方

[デモはこちら](https://yunbow.github.io/sample-jquery-i18next/02/)
[ソースファイルはこちら](https://github.com/yunbow/sample-jquery-i18next/tree/master/02/)

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

```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`に指定されたキーから文字列が表示されます。

```JavaScript:
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:ソースコード上のHTML
<div data-i18n="label.label1"></div>
```
```HTML:ブラウザ上のHTML
<div data-i18n="label.label1">作成する</div>
```

### ラベルを表示する（文字列のHTMLを有効にする）
```HTML:ソースコード上のHTML
<div data-i18n="[html]label.label2"></div>
```
```HTML:ブラウザ上のHTML
<div data-i18n="[html]label.label2">読み込む1<br>読み込む2</div>
```

### valueとtitleを表示する
```HTML:ソースコード上のHTML
<input type="button" data-i18n="[value]title.title1;[title]title.title1">
```
```HTML:ブラウザ上のHTML
<input type="button" data-i18n="[value]title.title1;[title]title.title1" value="更新する" title="更新する">
```

### placeholderを表示する
```HTML:ソースコード上のHTML
<input type="text" data-i18n="[placeholder]placeholder.placeholder1">
```
```HTML:ブラウザ上のHTML
<input type="text" data-i18n="[placeholder]placeholder.placeholder1" placeholder="削除する">
```

## オプション（置換文字）

[デモはこちら](https://yunbow.github.io/sample-jquery-i18next/03/)
[ソースファイルはこちら](https://github.com/yunbow/sample-jquery-i18next/tree/master/03/)

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

```Json:locales/ja/string.json
{
  "label": {
    "label1": "値1={{v1}}, 値2={{v2}}"
  }
}
```

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

```JavaScript:
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:ソースコード上のHTML
<div data-i18n="label.label1" data-i18n-options='{"v1":"aaa","v2":"bbb"}'></div>
```
```HTML:ブラウザ上の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>
```

以上です。