Open1

【React】多言語対応調査

React
i18next
多言語対応
MygMyg

多言語対応調査

ライブラリ

react-i18next

  • Reactで多言語対応を実装する方法として、react-i18nextライブラリを使用することが多い
  • i18nextをベースとしたReact/React Native用の国際化フレームワークである

ライセンス

MIT License

実装方法

  1. ライブラリのインストール
  • 下記のコマンドで、i18nextの依存関係をインストールする。
    npm install i18next react-i18next
    i18next:^22.5.1
    react-i18next:^15.0.1
  1. 設定ファイルの作成
  • 例として、src/i18n ディレクトリ配下にconfig.tsファイルを作成する。
// src/i18n/config.ts
import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';

i18n.use(initReactI18next).init({
 fallbackLng: 'en', // デフォルトの言語を設定
 reaturnEmptyString: false, // 空文字での定義を許可に
 resources: {} // 翻訳ファイルを設定する
});

export default i18n;
  1. 翻訳ファイルの作成
  • src/i18n/locales/に英語と日本語用の翻訳ファイルをそれぞれ作成する。
// src/i18n/locales/en/hoge.json
{
 "hoge": "Hoge",
 "huga": "Fuga",
 "a": {
  "aa": "Aa",
  "aaa": "Aaa",
 }
}

// src/i18n/locales/ja/hoge.json
{
 "hoge": "ほげ",
 "huga": "ふが",
 "a": {
  "aa": "ああ",
  "aaa": "あああ",
 }
}
  1. 設定ファイルで翻訳ファイルを読み込む
// src/i18n/config.ts
import { initReactI18next } from 'react-i18next';
import i18n from 'i18next';
import hoge_en from './locales/en/hoge.json'
import hoge_ja from './locales/ja/hoge.json'

i18n.use(initReactI18next).init({
 fallbackLng: 'en', // デフォルトの言語を設定
 reaturnEmptyString: false, // 空文字での定義を許可に
 resources: {
  // 辞書情報
  // 用意した翻訳ファイルを読み込む
  en: {
   hoge: hoge_en,
  },
  ja: {
   hoge: hoge_ja
  },
 } // 翻訳ファイルを設定する
});

export default i18n;
  1. index.tsで設定ファイルを読み込む
import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';

// import i18n (needs to be bundled ;))
import './i18n';

const root = createRoot(document.getElementById('root'))
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  1. tsconfig.jsonに設定を追加する。
// TypeScriptはデフォルトでJSONファイルの型検証をサポートしていないため、下記設定でJSONファイルの読み込みを許可する
"resolveJsonModule": true
  1. コンポーネントで文言の設定を行う。
import { useTranslation } from 'react-i18next';

const AaaComponent = () => {
 const { t } = useTranslation(['hoge']); // 使用する翻訳ファイルを設定する。

…
<div className="flex justify-center space-x-2">
　<Button onClick={stopSound}>{t('hoge.hoge')}</Button> //翻訳ファイルで設定した文言 
</div>

上記のような記載を行うことで、デフォルトに設定した言語(この例では英語が適用される。)

言語切替

  1. 切り替えボタンの追加
  • アプリ起動後は、config.tsで設定したデフォルトの言語が適用されるが、ユーザーによって言語を変えたい場合もあるため、言語切替機能を作成する。
import { useTranslation } from 'react-i18next';
...
type Resource {
 [key: string]: {
  nativeName: string;
 }
}

const lngs: Resource = {
 en: { nativeName: 'English' },
 ja: { nativeName: 'Japanese' },
};
...

const AaaComponent = () => {
 const { i18n } = useTranslation();

…
return(
 // 下記のような感じで言語切替ボタンを設置し、changeLanguage関数で言語を切り替える。
 {Object.keys(lngs).map(lng => (
   <button key={lng} type="button" onClick={() => i18n.changeLanguage(lng)}>
     {lngs[lng].nativeName}
   </button>
  ))}
)

翻訳キーを自動で抽出する

実装方法

  1. 関連プラグインをインストールする。
    npm i --save-dev babel-plugin-i18next-extract @babel/cli @babel/preset-react @babel/preset-typescript

  2. babel.config.tsファイルを作成する。

  • locales: 外部JSONに書き出す言語の定義
  • outputPath: 抽出された翻訳キーを書き出すファイルの指定
  • discardOldKeys: ビルド時に既存のキー(メッセージ)が見つからない場合に、それらを破棄するかどうかのフラグ
  • keySeparator:
  • キーを分割するために使用したい文字列の設定方法。デフォルトは'.'
  • キーを分割したくない場合やキーをそのまま値として使用したい場合は、nullに設定する。
  • 英文を翻訳キーにしているときに有効な設定。
  • 今回は翻訳ファイルを複数作成できるようにするため、':'でネームスペースとキーを分割する。
// src/i18n/babel.config.json
{
  "presets": ["@babel/preset-typescript", "@babel/preset-react"],
  "plugins": [
    [
      "i18next-extract",
      {
        "locales": ["en", "ja"],
　　　"keySeparator": ':',
        "outputPath": "./src/i18n/locales/{{locale}}/{{ns}}.json",
        "discardOldKeys": false,
      }
    ]
  ];
  return {
    presents,
    plugins
  }
}
  1. package.jsonに設定を加える。
// package.json
{
"scripts": {
  ...
  "i18next-extract": "babel --config-file ./src/i18n/babel.conifg.ts" './src/**/*.{js,jsx,ts,tsx}'"
},
  1. コンポーネントに翻訳キーを設定
import { useTranslation } from 'react-i18next';

const AaaComponent = () => {
 const { t } = useTranslation(['hoge', 'fuga']); // 使用する翻訳ファイルを配列で設定する。今回'fuga'は使わないため、記載しなくても良い

…
<div className="flex justify-center space-x-2">
　<Button onClick={stopSound}>{t('hoge:ふが')}</Button> // 使用する設定ファイルとキー名を':'で区切って記載する。 
</div>
  1. コマンドを実行
    npm run i18next-extractを実行するとbabel.config.tsのoutputPathで指定したパスにファイルが作成される。ファイル名は、':'の前のネームスペースが適用される。
//hoge.json
{
 "ほげ": ""
}
  1. 翻訳ファイルに翻訳を追加する。
    npm run i18next-extractを実行すると、英語と日本語それぞれの翻訳ファイルが作成されるため、それぞれに翻訳を追加する。