reactのライトな多言語化ならi18nextを使おう - 言語認識ライブラリ,ネスト翻訳も利用

ライブラリの追加

# npm
$ npm install i18next --save
​
# yarn
$ yarn add i18next

CDNで読み込みたい場合は、以下URLで貼ります。

<script src="https://unpkg.com/i18next/i18next.js"></script>

多言語jsonデータを、言語の分だけ作成

src/locals/ja/translation.json , src/locals/en/translation.json など、分かりやすく保存しておく)

{
    "change_public_view": "公開ビューを確認",
    "upload_wallpaper": "背景画像をアップロード",
    "edit": "編集",
    "save": "保存",
    "loading": "ロード中",
...
}

i18next.js

import i18next from 'i18next';
// 先程作成したjson多言語データをインポートする。パスは環境に合わせて
import enLocalesTranslationJson from './locals/en/translation'
import jaLocalesTranslationJson from './locals/ja/translation'

i18next
    .init({
        fallbackLng: 'ja',
        debug: true,
        resources: {
            en: {
                translation: enLocalesTranslationJson
            },
            ja: {
                translation: jaLocalesTranslationJson
            }
        }
    });

export default i18next;

因みに本当に多言語化対象のワードが少なければ、jsonファイルをインポートせず、直接

resources: {
    ja: {
      translation: {
        "hello": "こんにちは"
      }
    }
  }

のようにしてもいい。

あとは、作成したi18next.jsをインポートして、翻訳関数 t()を利用してレンダリングすればいいだけ。

render(){
  return(
    <div>
            {i18next.t('save')}    // 保存、save...
            ...
    </div>
  )
}

そもそも i18next って。。。

なんなの。ということで。あまり深く考えたことなかった。。。

マルチなフレームワークで動く、javascrip製多言語化ライブラリ。

https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9iS6Wm2hynS5H9Gj7j%2F-L9iS7LlT2W7wFtJH-2n%2F-L9iSBP9U65-bHJBRSDv%2Fi18next-ecosystem.jpg?generation=1523345318122913&alt=media

  • キャッシュの最適化
  • ユーザーの言語推定

のためのAPIも提供してくれる。

言語推定には、サーバー側で認識するならAccept-Languageヘッダーを確認したり、クライアント側で確認するならwindow.navigator.languagesでブラウザ設定を確認したりする(["ja", "en-US", "en"]とか返ってくる)わけですが、そういうのを勝手良くやってくれる・・・

ということなので、

言語推定してみる

さっき作ったi18next.jsを拡張?する。

今回はブラウザアプリをつくっているので、

github.com

を使おうと思う。これで、ブラウザの設定言語や、htmlタグ、cookie、URLのパラメータ等から言語を推定できる。

それぞれの優先順位を定めてinit関数の中で渡す事もできる。デフォルトは order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag']の順。 デフォルトで認識するURLのパラメータは 'lng'となっているが、もちろんおなじようにオプションで'locale'などに変更することもできる。

react naitive用・・・とか他にも言語推定ライブラリあります。こちらを参照。 

$ yarn add "i18next-browser-languagedetector"
import i18next from 'i18next';
import LngDetector from 'i18next-browser-languagedetector';


import enLocalesTranslationJson from './locals/en/translation'
import jaLocalesTranslationJson from './locals/ja/translation'

i18next
    .use(LngDetector)
    .init({
        fallbackLng: 'ja',
        debug: true,
        resources: {
            en: {
                translation: enLocalesTranslationJson
            },
            ja: {
                translation: jaLocalesTranslationJson
            }
        }
    });

export default i18next;

手動で言語を変える

i18next.changeLanguage(lng);

という関数が提供されてます。

動的な翻訳 - 変数を埋め込みたい(Interpolation)

n通の未読メッセージがあります。みたいなことをしたい時。

多言語データjsonファイルを{{こうする}}。

{
    "notification_message": "{{number}} 通の未読メッセージがあります。"
}

そして呼び出し時に、変数をキーつきで渡してあげる。

i18next.t('notification_message', { number: 120 });

ネストした翻訳

"{privacy_policy_page}を確認してください"
"Please check {privacy policy_page}"

みたいなとき。

英和で翻訳場所が異なるため、翻訳の内部に翻訳変数を入れたい。

そんなときは

"terms": 'Terms',
"legal_text": 'Please check $t(terms)."

とすればいい。

$t(キー)でネストが実行される。

おすすめの本です。react初心者だけど、とりあえずこれ読んで開発できてる。

React開発 現場の教科書

React開発 現場の教科書