i18nextでReactアプリを多言語対応する方法

作成日 2025.02.06
React
React

Reactアプリにi18nextを導入し、多言語対応を実現するための方法をステップバイステップで解説します。基本的なセットアップから高度なカスタマイズまでを網羅します。

1. i18nextのインストール
2. i18nextの基本設定
3. 翻訳ファイルの準備
4. アプリ全体にi18nextを適用
5. 翻訳テキストの表示
6. 言語切り替え機能の実装
7. 言語検出機能の活用
8. 動的ロードで翻訳ファイルを最適化
9. コンポーネントごとのスコープ設定
10. テスト環境でのセットアップ
11. 高度なカスタマイズ
12. まとめ

i18nextのインストール

i18nextとReact用の統合パッケージのインストール。

// 必要なパッケージをインストール
npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

i18nextの基本設定

i18nextを初期化し、Reactアプリに統合する準備を行います。

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false,
    },
  });

export default i18n;

翻訳ファイルの準備

翻訳テキストを含むJSONファイルを作成します。

// public/locales/en/translation.json
{
  "welcome": "Welcome to our application",
  "description": "This is a multi-language app"
}

// public/locales/ja/translation.json
{
  "welcome": "アプリケーションへようこそ",
  "description": "これは多言語対応のアプリです"
}

アプリ全体にi18nextを適用

I18nextProviderを使用してアプリ全体に翻訳機能を適用します。

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

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

翻訳テキストの表示

useTranslationフックを使用してコンポーネントで翻訳を表示します。

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

function App() {
  const { t } = useTranslation();

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
    </div>
  );
}

export default App;

言語切り替え機能の実装

ボタンを使ってアプリ内で言語を切り替える機能を追加します。

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

function App() {
  const { t, i18n } = useTranslation();

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

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

export default App;

言語検出機能の活用

ユーザーのブラウザ設定に基づいて自動的に言語を選択する機能を有効にします。

i18n.init({
  fallbackLng: 'en',
  detection: {
    order: ['queryString', 'cookie', 'localStorage', 'navigator', 'htmlTag'],
    caches: ['cookie'],
  },
});

動的ロードで翻訳ファイルを最適化

i18next-http-backendを使い、必要な翻訳ファイルを動的にロードします。

import Backend from 'i18next-http-backend';

i18n.use(Backend).init({
  backend: {
    loadPath: '/locales/{{lng}}/translation.json',
  },
});

コンポーネントごとのスコープ設定

特定のコンポーネントでのみ必要な翻訳スコープを使用します。

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

function MyComponent() {
  const { t } = useTranslation('namespace1');

  return <p>{t('key')}</p>;
}

テスト環境でのセットアップ

テスト環境でi18nextを使用するための設定。

i18n.init({
  lng: 'cimode',
  resources: {},
});

高度なカスタマイズ

i18nextでカスタムフォーマットやプラグインを利用する方法。

i18n.init({
  interpolation: {
    format: (value, format) => {
      if (format === 'uppercase') return value.toUpperCase();
      return value;
    },
  },
});