【React】動的に言語を変更する【i18next】

Reactでi18nextを使って動的に言語を変更したい！

概要

今回の記事では、Reactでi18nextを使って動的に言語を変更する手順を掲載する。

仕様書

環境

• node v21.1.0
• npm 10.8.1
• react 18.3.1
• react-dom 18.3.1
• i18next 23.11.5
• react-i18next 14.1.2

手順書

インストール編と多言語対応編の2部構成です。

インストール編

プロジェクトにi18nextとreact-i18nextをインストールする。

npm install i18next react-i18next

多言語対応編

src/i18n.tsを作り、このファイルに言語に関するデータを記述する。

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const resources = {
    en: {
        translation: {
            "test": "TEST",
            "message": "Message",
        }
    },
    ja: {
        translation: {
            "test": "テスト",
            "message": "メッセージ",
        }
    }
};

const userLanguage = navigator.language || navigator.languages[0];

i18n
    .use(initReactI18next)
    .init({
        resources,
        lng: userLanguage.split('-')[0],
        fallbackLng: 'en',
        interpolation: {
            escapeValue: false
        }
    });

export default i18n;

i18n.initのlngでアクティブな言語、fallbackLngで対応してない言語が選択された場合に使用する言語を設定する。
上記の例ではlngにブラウザの言語設定を取得して言語を設定してる。

App.tsxの中で多言語対応する例。

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

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

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

    return (
        <div>
            <p>{t('test')}</p>
            <p>{t('message')}</p>
            <button onClick={() => changeLang('en')}>English</button>
            <button onClick={() => changeLang('ja')}>日本語</button>
        </div>
    );
}

export default App;

<button>をクリックすると対応した言語に切り替わる。

まとめ（感想文）

グローバルなアプリを作る時に使えるかもね！