react-i18nextでReactアプリの国際化対応の基本

react-i18next

もくじ

🌏react-i18nextとは?

react-i18nexti18nextをベースにしたReact用の国際化対応ライブラリーです。 本記事ではreact-i18nextを使った国際化対応(Internationalization) の基本について紹介しています。ソースコードにはTypeScriptを用いています。

📕翻訳ファイルの用意

まずは何はともあれ翻訳ファイルを用意します。 今回のReactアプリは日本語と英語に対応するものとします。

/* ja.json*/

{
  "translation": {
    "javascript": {
      "async": "非同期"
    },
    "ruby": {
      "blackMagic": "黒魔術"
    },
    "functionalLanguage": "関数型言語"
  }
}
/* en.json*/
{
  "translation": {
    "javascript": {
      "async": "Asynchronously"
    },
    "ruby": {
      "blackMagic": "The Black Magic"
    },
    "functionalLanguage": "Functional Languages"
  }
}

🍊i18nextのインスタンスを作る

上記で用意した翻訳ファイルを元にして、i18nextのインスタンスを作ります。

import * as i18next from 'i18next';
import * as LanguageDetector from 'i18next-browser-languagedetector';
import resources from 'i18n/locales';

export default i18next
    .use(LanguageDetector)
    .init({
        resources,
        fallbackLng: 'ja',
        whitelist: ['en', 'ja'],
        debug: true,
        react: {
            wait: true,
        },
    });

オプションの簡単な説明です。

resources
これを元に翻訳を行うリソースです
fallbackLng
ユーザーの言語に対応できない時のフォールバック用言語を指定します
whitelist
許可する言語を記述します
debug
コンソールにログを出力します
wait
Reactコンポーネントがレンダリングされる前にresourcesの全てのネームスペースをロードする

🍅I18nextProviderでReactのContainerをラップする

上記で作ったi18nextのインスタンスをI18nextProviderにpropsとして渡します。

import React from 'react'
import ReactDOM from 'react-dom'

import i18n from 'i18n/index'
import {I18nextProvider} from 'react-i18next';

import I18nSampleComponent from 'components/I18nSampleComponent'

ReactDOM.render(
    <div>
        <I18nextProvider i18n={i18n}>
            <I18nSampleComponent />
        </I18nextProvider>
    </div>
    ,
    document.querySelector('#i18n-root')
);

🍄translate()を使って、I18nextProvideでラップされたコンポーネントで翻訳できるようにする

translate()を使うことで、I18nextProvideでラップされたコンポーネントで翻訳ができるようになります。 React Componentにtranslate()を経由することでPropsにt()という関数が渡されてきます。翻訳はt()を行います。

import React from 'react';
import {translate} from 'react-i18next';

interface IProps {
    i18n: Object
    t: Function
}

const I18nSampleComponent = (props: IProps) => (
    <ul>
        <li>{props.t('javascript.async')}</li>
        <li>{props.t('ruby.blackMagic')}</li>
        <li>{props.t('functionalLanguage')}</li>
    </ul>
);

export default translate()(I18nSampleComponent);

🍜翻訳結果

ブラウザの言語設定を変えて、Reactコンポーネントをレンダリングしてみます。 正常にテキストが翻訳され、i18n (Internationalization) 対応が行えていることを確認できました。

日本語の翻訳結果

react-i18next 日本語翻訳結果

英語の翻訳結果

react-i18next 英語翻訳結果

🕹サンプルのダウンロード

最後に今回作った簡単なダウンロード用のサンプルを置いておきます。 読んでいただきありがとうございました。

🎮サンプルダウンロード

サンプルの動かし方

# yarn install
# yarn run start
# Open http://localhost:8888

📖参照

  • このエントリーをはてなブックマークに追加