React 多言語対応

メッセージを一か所で管理する目的で react-i18next による多言語対応を行う。

https://react.i18next.com/

まずインストールする。

npm install react-i18next i18next --save

i18n.ts というファイルを作り、メッセージを定義する。
キーは日本語でもいいが、私はコード内に日本語が混ざるのが好きではないため英語で定義する。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

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

const resources = {
    en: {
        translation: {
            "Required": "Required.",
            "MaxLength": "Max length: {{length}}.",
        }
    },
    ja: {
        translation: {
            "Required": "必須入力です。",
            "MaxLength": "{{length}} 文字以内で入力してください。",
        }
    }
};

i18n
    .use(initReactI18next)
    .init({
        resources,
        lng: "ja",
        debug: false,
        interpolation: {
            escapeValue: false,
        }
    });

export default i18n;

このファイルを index.tsx で読み込んでおく。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'messages/i18n';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

呼び出し側は t(キー名) で呼び出す。値を埋め込む場合は t(キー名, 埋め込む値) とする。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

export const useValidate = () => {
    const [name, setName] = useState('');
    const [nameError, setNameError] = useState('');
    const { t } = useTranslation();

    const handleChange = (event: any) => {
        switch (event.target.name) {
            case 'name':
                if (event.target.value.length === 0) {
                    setNameError(t("Required"));
                } else if (event.target.value.length > 255) {
                    setNameError(t("MaxLength", { length: 255 }));
                } else {
                    setNameError('');
                }
                setName(event.target.value);
                break;
            default:
                console.log('key not found');
                break;
        }
    };

    return [name, nameError, handleChange];
};