Reactで簡単に多言語対応する方法は?react-i18nextの使い方

はじめに

こんにちは。フロントエンドエンジニアのKimuraです。

アトラスが展開する大会事業サービスConfitは、国内大会のみではなく、国際大会でも数多くご利用いただいています。このため、各種画面は日本語のみでなく英語表示にも対応しています。

React上の多言語対応ライブラリとしては、react-i18nextがよく取り上げられるかと思います。アトラスでも、react-i18nextを利用して多言語対応を実装しています。 本記事では、react-i18nextの基本的な利用方法と、Jestによるテスト実装をご紹介いたします。
なおテストについては、公式がJest + Enzymeを利用したサンプルコードを公開しています。本記事ではそちらを参考に、React Testing Libraryを使用していきます。

利用技術

React

Create React Appを利用したTypeScriptプロジェクト上で実装を進めていきます。プロジェクトは下記のコマンドを利用して生成しています。

react-i18next

i18nextのReact用ライブラリです。
i18nextは多言語対応ライブラリであり、react-i18nextではAPIとしてReact Hooksが提供されています。

Jest

Create React Appにデフォルトとして採用されているテスティングライブラリです。

React Testing Library

Testing Libraryが提供するReactコンポーネント用テスティングライブラリです。こちらもCreate React Appにデフォルトとして採用されています。
類似ライブラリにEnzymeがあります。

react-i18nextの利用方法

今回は、useTranslationを利用してメッセージを取得する方法を扱います。

インストール

まずは、関連するnpmパッケージをインストールします。

メッセージjson作成

言語ごとに、メッセージを定義したjsonファイルを作成します。今回は例として、日本語と英語の定義を用意します。

初期化

メッセージ取得を利用する前に、初期化を実装したi18n.tsを作成します。

本記事は、React Suspenseを利用する前提の実装となります。利用しない場合は、初期化時に追加設定が必要となります。

作成したi18n.tsindex.tsx内に読み込みます。これにより初期化が実行され、コンポーネント内でuseTranslationを利用可能となります。

コンポーネント作成

実際にメッセージを取得するコンポーネントを作成します。

上記のコンポーネントは、<div>内にreact-i18next経由で取得した文字列を表示します。
メッセージキーをtに渡すことで、jsonファイルに定義されたメッセージが返却されます。json上の階層は.で表現されています。

App.tsx内に<TestComponent>を配置して、表示を確認してみます。

この状態で開発サーバを立ち上げると、<TestComponent>が画面表示されます。

コンポーネントキャプチャ

言語切替実装

デフォルトの日本語表示から、英語表示に切り替えるボタンを実装していきます。

画面を確認すると、jaenのボタンが追加されています。これらを押下することにより、<TestComponent>の表示言語が切り替わります。

言語切替ボタンキャプチャ

テスト

最後に、JestとReact Testing Libraryを利用してテストを実装します。

モック実装が存在しない場合、実行時に警告が表示されます。react-i18nextの初期化処理が行われていないため、useTranslation()などAPIのインスタンスが取得できないことが原因です。
なお、上記のモックはtの引数をそのまま返却しています。json定義したメッセージは、コンポーネント上に表示されません。
メッセージが表示されているかを確認するため、getByTextにメッセージキー(test.messageなど)を引き渡します。これにより、任意のメッセージが出力対象となっているか検証可能となります。

下記のコマンドで、テストを実行します。

最後に

react-i18next + Jest による多言語対応の実装方法、いかがでしたでしょうか。

グローバル化が進む昨今、多言語対応サービスも数多く存在しております。アトラスでも引き続き、国内外のお客様にご利用いただけるサービスを目指していきたいと思います。

この記事を書いた人