i18n-js と expo-localization を利用して、多言語対応を行う2021/11/02

i18n-js と expo-localization を利用して、多言語対応を行う

React Native のアプリで、複数言語に対応する方法のメモです。

基本的には i18n-js というパッケージを使うことで、端末に設定されている言語設定に応じて表示するテキストを切り替えることができます。

複数言語に対応しておくことは、世界中からアプリを使ってもらえる可能性が増えるので積極的に進めておきたいです。 テキストを言語の数用意することが大変になりますが、実装自体は簡単なので時間見つけて対応しておくと良いです。

概要

  • ドキュメント
  • インストール
  • 実装
  • テキストの用意

ドキュメント

https://github.com/fnando/i18n-js

https://docs.expo.dev/versions/latest/sdk/localization/

インストール

必要なパッケージをインストールします。
expo-localization は端末に設定されている言語設定を取得するために利用します。

expo install i18n-js expo-localization

TypeScript の場合は型情報もインストールしておきましょう。

npm install --save-dev @types/i18n-js

実装

簡単に実装の例を紹介します。

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

~~~

i18n.translations = {
  en: { welcome: 'Hello' },
  ja: { welcome: 'こんにちは' },
};
i18n.locale = Localization.locale;

~~~

      <Text style={styles.text}>
        {i18n.t('welcome')}
      </Text>

i18n に対して言語ごとのテキスト情報を定義した上で、使用する言語の種類を設定します。 使用する言語については、端末に設定されている言語を expo-localization にて取得して反映します。

使用言語の設定はアプリの中で 1度だけ行えばいいので、それぞれの画面で用意するよりも共通化して置けると便利です。 テキストの用意もまとめて書いておくと、追加・変更などの運用時も快適になります。

確認の際は、シミュレータなどで設定から端末の言語設定を変更することで確認ができます。

テキストの用意

i18nを共通化すると以下のようにできます。これを必要な画面で import して利用します。

import { locale } from "expo-localization";
import i18n from "i18n-js";

import { translations } from "./translations";

// Set the key-value pairs for the different languages you want to support.
i18n.translations = translations;

// Set the locale once at the beginning of your app.
i18n.locale = locale;

// When a value is missing from a language it'll fallback to another language with the key present.
i18n.fallbacks = true;

export { i18n };

テキストを別ファイル translations として用意すると以下のようになります。 ついでにテキストの型定義を用意しておくと、定義漏れを発見できるのでおすすめです。

type TextDefinition = {
  drawer: {
    policy: string;
    reviewRequest: string;
    licenses: string;
  };
  placeholder: string;
};

type Translations = {
  en: TextDefinition;
  ja: TextDefinition;
};

export const translations: Translations = {
  en: {
    drawer: {
      policy: "privacy policy",
      reviewRequest: "Please cooperate with the review",
      licenses: "licenses",
    },
    placeholder:
      "Enter it and tap the button below to enlarge it on the screen.",
  },
  ja: {
    drawer: {
      policy: "プライバシーポリシー",
      reviewRequest: "レビューにご協力ください",
      licenses: "ライセンス",
    },
    placeholder: "入力して下のボタンをタップすると、画面に大きく表示できます。",
  },
};

テキストはオブジェクトで定義できるので、入れ子にしてスコープのように設定できます。画面ごとや機能ごとにスコープを用意するような形で定義するのも良いですね。

おわりに

多言語対応は少しめんどくさいですが、便利なパッケージを使えば簡単に実装できます。

日本語以外についても用意しておくことで海外のユーザーが使ってくれますし、対応しておいて損はありません。

アプリ自体の多言語対応ができたら、ストア情報やLPについても多言語対応しておきたいですね。その辺りのやり方も後日紹介する予定です。

  • このエントリーをはてなブックマークに追加