LoginSignup
8

More than 5 years have passed since last update.

jquery-i18nとi18nextで画面メッセージを国際化する

Posted at

概要

  • 画面メッセージの国際化を行いたい。
  • 画面はReactで一部作成してしまい、残りはjQueryなどで実装。

なんてことがありました。今後Reactに画面を置き換えることを考えても、コストをなるべく低く抑えたい。そんな時に取った手法。

解決法

jquery-i18n+i18nextを利用すると、以下の利点が得られる。
- メッセージリソースファイルをフルReact実装にしても使いまわせる。
 →メッセージをjsonで保持可能。React用のi18nコンポーネント「React-Intl」や「react-i18n」はjsonファイルをメッセージリソースファイルとして利用可能。

実装方針

以下のコードをjsとして定義しておく。(例です)

// ブラウザの設定を読み込んで言語設定を取得
var lang = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
lang = lang.split("-")[0];
i18next.use(i18nextXHRBackend).init({
    lng: lang,
    debug: false,
    fallbackLng : false,
    defaultLng : 'en',
    backend : {
        loadPath: '/system/locales/{{lng}}/{{ns}}.json'
        // http://<IPAddress>/system/locales/<lng>/<namespaces(default:translation)>.jsonにアクセスする。
    }
}, function(err, t) {
    i18nextJquery.init(i18next, $);
    $("[data-i18n]").localize();
});

画面側はこんな感じで実装すれば、切り替わる。

<th data-i18n="sample.component.name">Name</th>
<th data-i18n="sample.component.endpointurl">EndpointURL</th>
<th data-i18n="sample.component.address">Address</th>

jsonファイルは以下のように指定可能。
/system/locales/en/translation.json

{
"sample": {
    "component": {
        "name": "Name",
        "endpointurl": "EndpointURL",
        "address": "Address"
        }
    }
}

/system/locales/ja/translation.json

{
"sample": {
    "component": {
        "name": "名前",
        "endpointurl": "エンドポイントURL",
        "address": "アドレス"
        }
    }
}

jQueryのモーダルダイアログ内のメッセージ出力を国際化とか、実際にフルReactの画面に適用してみるとか、そういう話はまたおいおい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8