「Reactで多言語対応したいけど、設定が難しそう」
「翻訳切り替えってどうやるの？」と悩む方は少なくありません。
実は、i18nextというライブラリを使えば、Reactアプリに簡単に翻訳機能を追加できます。
この記事では、導入方法から画面の切り替え、翻訳ファイルの作成、初期設定までを丁寧に解説します。
コード付きの完全解説で、初心者の方でも今日からすぐに多言語アプリの第一歩を踏み出せる構成です。
多言語対応が必要な理由
なぜ今、Reactアプリに翻訳機能が求められるのか？
結論：グローバル対応とユーザビリティ向上のためです。
多言語対応の需要は、次のような場面で急速に増えています。
- 海外ユーザー向けサービスの展開
- インバウンド需要のある観光・教育・EC分野
- 海外出身の社員・顧客向けの社内・業務システム
- 日本語話者以外にも使ってほしいブログやポートフォリオ
たとえば観光庁の発表では、訪日外国人向けサイトやアプリの整備を「言語障壁の除去」として強く推奨しています
（参考：https://www.mlit.go.jp/kankocho/shisaku/kankochi/kankochi_torikumi.html）。
Reactでも、ライブラリを使えば簡単に翻訳機能が追加できるため、今から学んでおく価値は非常に高いです。
i18nextとは何か？
i18nextの特徴と導入メリット
結論：i18nextは翻訳対応を簡単にする専用ライブラリです。
i18nextは、以下のような特長を持っています。
- 翻訳ファイルをJSON形式で管理できる
- 動的に言語を切り替え可能
- コンポーネントごとの遅延読み込みも対応
- 複数言語に同時対応可能
React専用の拡張であるreact-i18nextを使えば、翻訳関数（t関数）をコンポーネント内で直接使用可能になります。
導入コマンドは以下です。
npm install i18next react-i18next i18next-browser-languagedetector
翻訳ファイルの準備と構成
翻訳データのフォルダ設計と内容
結論：言語別にフォルダを分け、key-value形式で管理します。
以下のようにフォルダを構成します：
src/
├── locales/
│ ├── en/
│ │ └── translation.json
│ └── ja/
│ └── translation.json
たとえばen/translation.jsonは以下のようになります。
{
"greeting": "Hello",
"description": "This is a multilingual app."
}
ja/translation.jsonは次のようになります。
{
"greeting": "こんにちは",
"description": "これは多言語対応アプリです。"
}
i18nextの初期設定と使い方
初期化コードとReactとの統合
結論：i18nextを設定し、アプリ全体に翻訳機能を提供します。
i18n.jsというファイルを用意し、以下のように記述します。
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import en from './locales/en/translation.json';
import ja from './locales/ja/translation.json';
i18n
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: {
en: { translation: en },
ja: { translation: ja },
},
fallbackLng: 'ja',
interpolation: { escapeValue: false },
});
export default i18n;
Appの最上位でi18nファイルを読み込みます。
import './i18n';
function App() {
return <Home />;
}
コンポーネントでの翻訳切り替え
t関数とuseTranslationの活用
結論：useTranslationフックで翻訳文を呼び出し、動的に切り替えが可能です。
import { useTranslation } from 'react-i18next';
function Home() {
const { t, i18n } = useTranslation();
const changeLang = (lng) => {
i18n.changeLanguage(lng);
};
return (
<div>
<h1>{t('greeting')}</h1>
<p>{t('description')}</p>
<button onClick={() => changeLang('en')}>English</button>
<button onClick={() => changeLang('ja')}>日本語</button>
</div>
);
}
これだけで、リアルタイムに言語を切り替えられるReactアプリが完成します。
より実用的な改善方法
発展的な多言語対応テクニック
以下のような追加設定で、より実践的に使えます：
- URLに言語コードを含める（例：/en/home）
- 言語ごとの日時・通貨表示（Intl API）
- 翻訳文の複数ファイル分割
- 翻訳ファイルの非同期読み込み（Lazy loading）
完成形コードまとめ
i18n.js
（前述の初期化コード）
App.js
import React from 'react';
import './i18n';
import Home from './Home';
function App() {
return <Home />;
}
export default App;
Home.js
（前述の翻訳切り替えコード）
まとめ
本記事では、Reactとi18nextを用いて多言語対応のアプリを簡単に作る方法を紹介しました。
重要なポイント：
- i18nextを使えば誰でも簡単に翻訳機能を追加可能
- JSONで管理するため、更新・管理がしやすい
t関数とuseTranslationで直感的に切り替えが可能
世界中のユーザーに使ってもらうためにも、多言語対応の技術をこの機会に習得してみてください。
関連リンク：
Japanese 
English