react-i18next + hookで多言語化する

こんにちはhiro08です。Reactアプリケーションを多言語化するときに、react-i18nextが便利です。react-i18nextは、Reactに特化したローカリゼーションフレームワークです。i18nextと一緒に使います。

今回実装するもの

enボタンとjaボタンの２つがあり、言語を切り替えられるようにします。

ドキュメント

react.i18next.com

www.i18next.com

前提

create-react-appのプロジェクトを前提としていきます。

セットアップ

今回必要なパッケージをインストールします。

$ yarn add react-i18next i18next

i18next
JavaScriptで書かれた国際化のためのフレームワークです。

react-i18next
Reactでi18nextを使いやすくするためのヘルパーライブラリです。

言語別のファイルを作成

言語別にjsonファイルを用意します。localesフォルダを作成して、jaとenフォルダを作成します。

こちらが日本語のファイル
locales/ja/translation.json

{
  "hello": "こんにちは"
}

こちらが英語のファイルです。
locales/en/translation.json

{
  "hello": "hello"
}

i18nextの設定

i18nextを設定するための、ファイルです。先程作成した２つのjsonファイルを、resourcesで読み込んでいます。
i18n.ts

import i18n from 'i18next';
import enTranslation from './locales/en/translation.json';
import jaTranslation from './locales/ja/translation.json';
import {initReactI18next} from 'react-i18next';

const resources = {
  en: {
    translation: enTranslation,
  },
  ja: {
    translation: jaTranslation,
  },
};

i18n
  .use(initReactI18next)
  .init({
    lng: 'en',
    fallbackLng: 'en',
    debug: true,

    interpolation: {
      escapeValue: false,
    },

    react: {
      wait: true,
    },
    resources: resources,
  });

export default i18n;

そして、i18n.tsをインポートします。
index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './i18n';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

言語の切り替え

こちらが言語を切り替えるコンポーネントです。useTranslationというhookのapiがあります。これを読み込んでいきます。
App.tsx

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

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

  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

  return (
    <div className="App">
      <h1>{t('hello')}</h1>
      <button onClick={() => changeLanguage('ja')}>ja</button>
      <button onClick={() => changeLanguage('en')}>en</button>
    </div>
  );
};

export default App;

この関数に、i18n.tsで設定した言語(例:ja)を指定して実行すると、言語を切り替えることができます。

const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };

これで、jaのボタンを押すと、日本語になります。

最後に

簡単にではありましたが、Reactアプリケーションを多言語化してみました。react-i18nextは簡単に多言語化することができます。なので、今後使う場面がありそうです。