Expoで多言語化 #reactnative

　React Native＆Expoで多言語化が以外に楽に出来たので共有します。

【必要なモジュール】
　多言語対応モジュールは②以外に色んなモジュールが紹介されてますが、i18n-jsが一番安定しているようでしたので、今回はこれを選びました。
① expo-localization：　ユーザ端末の言語と地域設定の情報取得
② i18n-js：　多言語対応

【参考サイト】
・Qiita 【React Native】react-native-localizeとi18n-jsを利用して多言語化
・Expo-API-Localization
・Expo Localization

　ほぼ上記①のサイトの方法で問題無く実現できるはずですが、expo用に書かれていなかったので、補足も含めて紹介します。またExpoはSDK48のmanagedワークフロー前提です。

手順１：上記モジュールのインストール

モジュールのインストール.

npx expo install expo-localization i18n-js

手順２：各モジュールと言語ファイルの設定
　まずはi18n-js用の設定ファイルi18n.jsを作成します。

i18n.js

import { getLocales, getCalendars } from 'expo-localization';
import { I18n } from 'i18n-js';
import ja from "./ja";
import en from "./en";

// Set the key-value pairs for the different languages you want to support.
export default i18n = new I18n({});

// Set the locale once at the beginning of your app.
i18n.locale = getLocales()[0].languageCode;

export const {
    languageTag,
    languageCode,
    textDirection,
    digitGroupingSeparator,
    decimalSeparator,
    measurementSystem,
    currencyCode,
    currencySymbol,
    regionCode,
  } = getLocales()[0];

// Set the currencySymbol once at the beginning of your app.
i18n.currencySymbol = currencySymbol;
  
export const { calendar, timeZone, uses24hourClock, firstWeekday } = getCalendars()[0];

i18n.translations = { ja, en,};
i18n.fallbacks = true;

ここで、直接i18nにlocaleを設定している方法と、一旦各定数（languageTag、currencySymbol等）に読み込んでからi18nに必要なcurrencySymbolを設定する方法を敢えて分けて書いてます。更にカレンダー情報を読み込んでexportしてます（紹介用に全部載せ状態の記載になってますので、必要な情報をピックアップして使って下さい）。最後に翻訳用の言語ファイルをtranslationsに設定しています。今回は日本語と英語用にja.jsとen.jsになります。

　次にこの言語設定ファイルを作成します。

ja.js

const URL1 = "https://exaple.com";
....
const Alert1 = "入力が完了していません！";
....
const Msg = "お知らせが届いてます"；
....
export default {
    Title1: "タイトル1", Title2: "タイトル2", .... ,
    URL_1: URL1, .... ,
    Alert_1: Alert1, .... ,
    Msg_1: Masg1, .... ,
}

en.js

const URL1 = "https://exaple.com";
....
const Alert1 = "Input not complete！";
....
const Msg = "You have a notification"；
....
export default {
    Title1: "Title1", Title2: "Title2", .... ,
    URL_1: URL1, .... ,
    Alert_1: Alert1, .... ,
    Msg_1: Masg1, .... ,
}

言語ファイルの書き方はJSONそのものなので特に注意は必要ありません。長いテキストは冒頭に定数で外出ししておくと見易く書けると思います。

手順３：アプリ本定側の設定
　最後はアプリ本体側で実際に言語を使い分ける設定です。

App.js

import React from "react";
....
import i18n, {languageTag,languageCode,textDirection,digitGroupingSeparator,decimalSeparator,measurementSystem,currencyCode,currencySymbol,regionCode,calendar,timeZone,uses24hourClock,firstWeekday} from "./i18n";

console.log("locales: "+languageTag,languageCode,textDirection,digitGroupingSeparator,decimalSeparator,measurementSystem,currencyCode,currencySymbol,regionCode,calendar,timeZone,uses24hourClock,firstWeekday);

....
alert(i18n.t("Alert_1"));
....
export default function App {
return (
    <View>
      <Text>{I18n.t("Title1")}</Text>
    </View>
  );
}

App.jsでi18nをインポートすれば、React-Navigationなどの別のスクリーファイル（例えばHomescreen.js等）などはインポート無しでそのまま使えます。該当するテキスト部分に言語ファイルで設定したKeyを使って、各テキスト部分を　i18n.t("各Key値")　のように置き換えて使います。JSXの中も同様に {I18n.t("各Key値")} でOKです。

まとめ

今回はExpoで多言語化をサクッと実現する方法を紹介しました。あまりハマりどころも無いので是非トライしてみて下さい。