【React】react-i18nextで英語切り替え対応を実装する方法

はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
今回は、Reactアプリで英語／日本語の切り替え対応を実装する方法を紹介します。

Reactでアプリを作っていると、

「英語でも使えるようにしたい」
「文言をコード内にベタ書きしたくない」

と感じることはありませんか？

そんなときに役立つのが、react-i18next というライブラリです。
i18next は国際化対応（Internationalization）の定番ツールで、Reactでも簡単に導入できます。

---

🌍 i18n（国際化）とは？

i18n は “internationalization” の略で、
「i」と「n」の間に18文字あることからこのように略されています。

要するに「アプリを多言語対応させる仕組み」のことです。

たとえば：

<p>{t('welcome_message')}</p>

というように t() 関数で文言キーを呼び出すだけで、
アプリ全体の文言を簡単に切り替えられます。

---

⚙️ 環境構築とインストール

今回は Vite + React 19 環境を前提に進めます。
（すでにReact環境がある方はそのままでOKです）

まずはライブラリをインストールします。

npm install react-i18next i18next --save

---

📁 ディレクトリ構成の例

src/
 ├── i18n.js
 ├── locales/
 │    ├── en/translation.json
 │    └── ja/translation.json
 └── App.jsx

🗂 1. JSONファイルで翻訳文を定義する

まずは、翻訳用のJSONファイルを用意します。

src/locales/ja/translation.json

{
  "welcome": "ようこそ！",
  "description": "これは日本語のサンプルです。"
}

src/locales/en/translation.json

{
  "welcome": "Welcome!",
  "description": "This is a sample in English."
}

これで文言を「コードから分離して管理」できるようになります。
後から文言を修正するときにも便利ですね。

---

⚙️ 2. i18n設定ファイルを作成する

次に、Reactでi18nextを初期化する設定ファイルを作ります。

src/i18n.js

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

i18n
  .use(initReactI18next)
  .init({
    resources: {
      ja: { translation: ja },
      en: { translation: en },
    },
    lng: "ja", // 初期表示の言語
    fallbackLng: "ja", // 翻訳がない場合に使う言語
    interpolation: { escapeValue: false },
  });

export default i18n;

---

⚙️ 3. アプリに設定を読み込む

Reactアプリ全体で i18n を使えるようにします。

src/main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './i18n' // ←これを追加！

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

---

🌏 4. 言語切り替えボタンを実装する

実際にボタンで日本語⇄英語を切り替えられるようにします。

src/App.jsx

import { useTranslation } from "react-i18next";

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

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

  return (
    <div style={{ textAlign: "center", marginTop: "50px" }}>
      <h1>{t("welcome")}</h1>
      <p>{t("description")}</p>
      <div style={{ marginTop: "20px" }}>
        <button onClick={() => changeLanguage("ja")}>日本語</button>
        <button onClick={() => changeLanguage("en")} style={{ marginLeft: "10px" }}>
          English
        </button>
      </div>
    </div>
  );
}

export default App;

---

💡 実行結果

初期状態では日本語で表示され、
「English」ボタンを押すと、文言がすべて英語に切り替わります。

日本語表示	英語表示
ようこそ！ / これは日本語のサンプルです。	Welcome! / This is a sample in English.

---

🧮 よくあるエラーと対処法

エラー内容	原因	対処法
t is not a function	i18nの初期化が正しく読み込まれていない	main.jsxでimport './i18n'を追加する
切り替えが反映されない	JSONのキーが不一致	各言語でキー名を統一する
英語表示にならない	fallbackLngがja固定になっている	lngの初期値をenに変更して確認する

---

🧠 補足：翻訳ファイルを増やすには？

もし他の言語（例：フランス語）を追加したい場合は、
locales/fr/translation.json を作って以下を追記するだけです「

import fr from "./locales/fr/translation.json";

resources: {
  ja: { translation: ja },
  en: { translation: en },
  fr: { translation: fr },
},

---

🚀 まとめ

• react-i18next を使うと、Reactアプリを簡単に多言語対応できる
• 翻訳文を JSONファイルで管理 できるので、保守性が高い
• t() 関数で文言を呼び出し、i18n.changeLanguage() で切り替えるだけ

📚 参考リンク