【React】react-i18nextの使用方法

2022/07/21

reactで一番有名な翻訳ライブラリであるreact-i18nextの使い方を簡単にまとめてみました。

サンプルのリポジトリも公開しているので、参考になれば幸いです。 https://github.com/highbridge326/react-i18n-example

react-i18next

導入

パッケージをインストールします。

$ yarn add react-i18next i18next

i18nインスタンスの構築を行います（このとき辞書内容も一緒に登録します）。文字列はコンポーネント内でuseTranslationからのt関数を使って、翻訳することができます。

App.tsx

import React from 'react';
import i18n from 'i18next';
import { useTranslation, initReactI18next } from 'react-i18next';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    // the translations
    // (tip move them in a JSON file and import them,
    // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
    resources: {
      en: {
        translation: {
          'Welcome to React': 'Welcome to React and react-i18next',
        },
      },
    },
    lng: 'en', // if you're using a language detector, do not define the lng option
    fallbackLng: 'en',

    interpolation: {
      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    },
  });

const App: React.FC = () => {
  const { t } = useTranslation();

  return <h2>{t('Welcome to React')}</h2>;
};

export default App;

この状態でアプリを立ち上げると

react-i18next-image1

Welcome to ReactがWelcome to React and react-i18nextへ変換されています。

言語切り替え

さっきはen → enへの変換でしたが、en → jaへの変換も試してみます。 i18n構築時に日本語辞書を登録します。

App.tsx

...
    resources: {
      en: {
        translation: {
          'Welcome to React': 'Welcome to React and react-i18next',
        },
      },
      ja: {
        translation: {
          'Welcome to React': 'Reactとreact-i18nextへようこそ',
        },
      },
    },
    lng: 'en', // if you're using a language detector, do not define the lng option
...

言語の切り替えはi18nインスタンスのchangeLanguageメソッドを使用します。

App.tsx

const App: React.FC = () => {
  const { t } = useTranslation();
  const onClickChangeLanguage = () => {
    i18n.changeLanguage(i18n.language === 'en' ? 'ja' : 'en');
  };

  return (
    <div>
      <h2>{t('Welcome to React')}</h2>
      <button onClick={onClickChangeLanguage}>
        {i18n.language === 'en' ? 'ja' : 'en'}
      </button>
    </div>
  );
};

export default App;

react-i18next-image2

ボタンを押すと言語が切り替わります。

翻訳ファイルの使用

上記の例では翻訳辞書をi18nにハードコードしていますが、通常は翻訳情報は別ファイルで管理すると思います。

i18nextはjsonファイルをimportして登録することが可能です。

en.json

{
  "Welcome to React": "Welcome to React and react-i18next"
}

ja.json

{
  "Welcome to React": "Reactとreact-i18nextへようこそ"
}

App.tsx

import ja from './locale/ja.json';
import en from './locale/en.json';

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    // the translations
    // (tip move them in a JSON file and import them,
    // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
    resources: {
      en: {
        translation: en,
      },
      ja: {
        translation: ja,
      },
    },
    lng: 'en', // if you're using a language detector, do not define the lng option
    fallbackLng: 'en',

    interpolation: {
      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    },
  });

i18next-parserで翻訳ファイルを自動生成

翻訳ファイルを一つ一つ自分で用意するのは面倒くさいですよね。そこでi18next-parserを使用して翻訳ファイルのたたき台を自動生成したいと思います。

i18next-parserのインストール

shell

$ yarn add -D i18next-parser

i18next-parser用の設定ファイルを用意します。

i18next-parser.config.js

module.exports = {
  locales: ['en', 'ja'],
  sort: true,
  createOldCatalogs: false,
  output: 'src/locale/$LOCALE.json',
  lexers: {
    tsx: ['JsxLexer'],
  },
  input: "src/**/*.tsx",
}

この設定ではsrc/**/*.tsxのファイルからt('Welcome to React')のようなコードを収集して、locale配下に翻訳ファイルをoutputします。（その際、すでに翻訳ファイルがある場合はいい感じにmergeしてくれます）

例えば、tsxファイルにt('Welcome to React')がある場合、i18next-parserコマンドで

shell

$ npx i18next-parser

以下のjsonファイルがそれぞれ作成されます。

src/locale/en.json

{
  "Welcome to React": ""
}

src/locale/ja.json

{
  "Welcome to React": ""
}

あとはそれぞれのファイルで翻訳を記載していくだけになります。

おまけ：翻訳先が空文字のときにkey名を表示する

例えば、上記のように"Welcome to React"の翻訳先が""だと空文字に翻訳されてしまいますが、翻訳先が""でも言語がenの場合はWelcome to Reactをそのまま表示してほしい時があると思います。

その場合は、以下のようにi18nオプションのreturnEmptyStringをfalseにすることで、翻訳先が空文字のときにkey名（上記の例だと"Welcome to React"）を代わりに表示してくれるようになります。

App.tsx

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    // the translations
    // (tip move them in a JSON file and import them,
    // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
    resources: {
      en: {
        translation: en,
      },
      ja: {
        translation: ja,
      },
    },
    lng: 'en', // if you're using a language detector, do not define the lng option
    fallbackLng: 'en',
    returnEmptyString: false, // <= ここを追加

    interpolation: {
      escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
    },
  });

Mitsuru Takahashi

京都市内にてフリーランスエンジニアとして活動しています。

detail

Profile

Mitsuru Takahashi

京都市内にてフリーランスエンジニアとして活動しています。

detail