Reactとi18nextを利用して多言語翻訳の実装

概要

この記事は、Reactを使用してグローバルに展開したいウェブアプリケーションで多言語サポートを実装する方法を紹介します。具体的には、i18nextというライブラリを使用して、多言語対応の機能を追加します。

Reactプロジェクトの作成・必要となるパッケージのインストール

最初に、Reactプロジェクトを作成し、必要なパッケージをインストールします。以下のコマンドを実行します。

npx create-react-app react-i18next-sample

次に、i18nextに関連するパッケージをインストールします。

npm i i18next react-i18next i18next-browser-languagedetector

英語から日本語への翻訳

まず、i18nextを使用して英語から日本語への翻訳を設定します。これを行うために、以下のファイルを編集します。

このファイルでは、i18nextと関連パッケージを初期化し、英語から日本語への翻訳リソースを設定します。

src/i18n.js

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import languageDetector from 'i18next-browser-languagedetector';

i18next
    .use(initReactI18next)
    .use(languageDetector)
    .init({
        debug: true,
        fallbackLng: 'en',
        resources: {
            en: {
                translation: {
                    learn: 'Learn React',
                }
            }
        }
    });

このファイルでは、i18n.jsをインポートします。

src/index.js

import './i18n';

このファイルでは、i18nから翻訳関数を取得して、コンポーネント内で使用します。

src/App.js

import { useTranslation } from 'react-i18next';

function App() {
  const { t } = useTranslation();
  return (
    <div className="App">
      <header className="App-header">
        {/* ... */}
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          {t('learn')}
        </a>
      </header>
    </div>
  );
}

export default App;
}

descriptionの内容をi18nKeyを使って翻訳

次に、コンポーネント内でdescriptionをi18nKeyを使って翻訳します。まず、以下のコードをsrc/App.jsファイルに追加します。

src/App.js

import { useTranslation, Trans } from 'react-i18next';

<Trans i18nKey="description">
    how to use i18next
</Trans>

さらに、src/i18n.js ファイルを以下の内容に変更します。

src/i18n.js

resources: {
    en: {
        translation: {
            learn: 'Learn React',
            description: 'how to use i18next',
        },
    },
},

言語切り替えボタンの作成

最後に、言語切り替えボタンを作成します。これにより、ユーザーが言語を切り替えることができます。src/App.jsファイルに以下のコードを追加します。

src/App.js

const lngs = {
    en: { nativeName: 'English' },
    ja: { nativeName: 'Japanese' },
};

const { t, i18n } = useTranslation();

<div>
    {Object.keys(lngs).map((lng) => (
        <button
            type="submit"
            key={lng}
            onClick={() => i18n.changeLanguage(lng)}
            disabled={i18n.resolvedLanguage === lng}
        >
            {lngs[lng].nativeName}
        </button>
    ))}
</div>

さらに、src/i18n.jsファイルに以下の内容を追加します。

src/i18n.js

ja: {
    translation: {
        learn: 'Reactを学ぶ',
        description: 'i18nextの使い方',
    },
},

まとめ

これで、Reactとi18nextを使用して多言語翻訳を実装する準備が整いました。i18n.jsファイルに翻訳リソースを追加し、言語切り替えボタンを作成することで、多言語対応のReactアプリケーションを構築できます。ユーザーは簡単に言語を切り替えることができ、アプリケーションの多言語対応を実現できます。