React Academy · レッスン

react-i18nextのセットアップ

Q: 「react-i18nextのセットアップ」で何を学びますか？

言語検出とnamespace分割を含めてi18nextをインストールし、設定します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

言語検出とnamespace分割を含めてi18nextをインストールし、設定します。

「react-i18nextのセットアップ」はCoddyKit上の無料React Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全4レッスンが含まれています。

ようこそ

このレッスンでは、言語検出と名前空間の分割を備えたreact-i18nextをインストールして設定し、Reactアプリに多言語対応を追加します。

依存関係のインストール

i18nextとreact-i18nextをインストールします。必要に応じて、自動的なロケール検出のためのi18next-browser-languagedetectorや、HTTP経由で翻訳を読み込むためのi18next-http-backendも追加します。

npm install i18next react-i18next
npm install i18next-browser-languagedetector i18next-http-backend

i18n.jsの作成

i18nextを初期化する`i18n.js`ファイルを作成します。`i18n.use(...)`を呼び出してプラグインを追加し、設定を指定した`.init({...})`を呼び出します。

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

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    resources: { en: { translation: {} }, tr: { translation: {} } },
    interpolation: { escapeValue: false },
  });

export default i18n;

main.jsxでi18nをインポートする

アプリをレンダリングする前に、i18nの初期化ファイルをインポートします。これにより、どのコンポーネントがuseTranslationを呼び出しても、i18nの準備が完了した状態になります。

import './i18n'; // must be before App
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.getElementById('root')).render(
  <StrictMode><App /></StrictMode>
);

名前空間

名前空間を使うと、翻訳を論理的なグループ（例：common、auth、dashboard）に分割できます。各名前空間は個別のJSONファイルになり、必要なときに読み込まれるため、初期バンドルサイズを削減できます。

resources: {
  en: {
    common: { save: 'Save', cancel: 'Cancel' },
    auth: { login: 'Log in', logout: 'Log out' },
  }
}

言語検出

LanguageDetectorプラグインは、ブラウザのユーザー設定（navigator.language）、localStorage、URLのクエリ文字列からユーザーの優先言語を読み取ります。初回ロード時にアクティブな言語を自動設定します。

publicフォルダーから翻訳を読み込む

翻訳を`public/locales/{lang}/{ns}.json`にJSONファイルとして保存します。バックエンドプラグインを設定して実行時に読み込むようにすると、新しい言語の追加にコード変更が不要になります。

import Backend from 'i18next-http-backend';

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

I18nextProvider（任意）

I18nextProviderはアプリをラップし、コンテキストを通じてi18nインスタンスを提供します。react-i18next v11以降とinitReactI18nextプラグインを使う場合は任意です。フックがグローバルなi18nインスタンスを直接読み取るためです。

コンポーネントで初期化を確認する

i18nextは翻訳を非同期で読み込みます。翻訳キーが表示されるのを防ぐため、テキストをレンダリングする前にuseTranslationから取得した`ready`プロパティを使うか、`i18n.isInitialized`を確認します。

const { t, ready } = useTranslation();
if (!ready) return null;

DevToolsとキーが見つからない場合の処理

開発中に`saveMissing: true`を設定すると、見つからない翻訳キーがコンソールに記録されます。これにより、未翻訳の文字列をすばやく見つけられます。

i18n.init({ saveMissing: true,
  missingKeyHandler: (lng, ns, key) => console.warn('Missing:', key) });

クイックチェック

Reactアプリをレンダリングする前に、i18nの初期化ファイルをインポートしなければならないのはなぜですか？

まとめ

i18nextとreact-i18nextをインストールし、プラグインと初期化設定を含むi18n.jsを作成して、レンダリング前にインポートします。翻訳は名前空間で整理し、http-backendを使って実行時に翻訳ファイルを読み込みます。

次のレッスン：**useTranslationフックの使用** — ハードコードされた文字列をt()の呼び出しに置き換え、JSONの翻訳ファイルを整理します。

よくある質問