Reactで多言語対応を実装する方法

Reactで多言語対応を実装する方法

Reactで多言語対応を実装する方法として、react-i18nextライブラリを使用するのが一般的です。
以下に、react-i18nextを使った多言語対応の例をTypeScriptで示します。

ライブラリのインストール

# npm
npm install react-i18next i18next

# yarn
yarn add react-i18next i18next

プロジェクト構成

以下のようなファイル構成を前提とします。

/src
  /locales
/en
  translation.json
/ja
  translation.json
  /components
SampleComponent.tsx
  i18n.ts

言語ファイルの作成

src/locales/en/translation.json:

{
  "welcome": "Welcome"
}

src/locales/ja/translation.json:

{
  "welcome": "ようこそ"
}

i18n設定の作成 (src/i18n.ts)

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

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: enTranslation,
    },
    ja: {
      translation: jaTranslation,
    },
  },
  lng: 'en', // 初期言語
  fallbackLng: 'en',
  interpolation: {
    escapeValue: false, // ReactではXSS対策がされているためエスケープは不要
  },
});

export default i18n;

コンポーネントの作成 (src/components/MyComponent.tsx)

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

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

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => changeLanguage('en')}>English</button>
      <button onClick={() => changeLanguage('ja')}>日本語</button>
    </div>
  );
};

export default MyComponent;