こんにちは、皆さん!

今回はJavascriptでモバイル開発できるReact Nativeを便利にしてくれたExpoにおいて、一番簡単に国際化できちゃう方法を教えようと思います!

わかりやすくコードを貼り付けて解説していきますので、是非最後まで見ていってください。

Expo無しのReact Nativeでは使えませんので、気をつけてください!

必要なコードだけ見たい方はこちらから↓

必要なコード一覧

トピック


必要なパッケージのインストール

今回の方法で国際化対応を実行するためには下記の二つのパッケージが必要なります。

  • expo-localization
  • i18n-js

なお、Typescriptを利用する場合は@types/i18n-jsパッケージもインストールしてください。

それぞれの役割は下記のようになります。

expo-localization

このパッケージを使うことで、今のモバイルの設定言語を取得することができます。これはAndroidとiOSの両方で使える関数になります。

i18n-js

このパッケージを使うことで、一回だけコードを書くことで与えられた言語設定によって異なるテキストを表示することができます。


では、しっかりインストールしていきましょう。

お使いのものならどれでもいいですが、Expoは基本、Yarnで作られているので、下記のような感じでインストールできます。

yarn add expo-localization i18n-js

セットアップ

まず、expo-localizationでiOSの言語設定を入手するには下記のような関数を使います。

import * as Localization from 'expo-localization';

// 日本語の場合は'ja'
Localization.locale

次にAndroidでは下記のように言語設定を入手できます。

import * as Localization from 'expo-localization';

// 日本語の場合は'ja'
const { locale }  = await Localization.getLocalizationAsync();

次にi18n-jsの方ですが、こちらは下記のようにまず言語を設定できます。

import i18n from 'i18n-js';

// 日本語に設定する
i18n.locale = 'ja';

ルートディレクトリにlocalizationフォルダーを作りましょう。ここにそれぞれの言語のテキスト及びどの言語のテキストを繰り出すのかを決めてくれるJSファイルを入れます。

今回は日本語と英語に対応させたいので、localization/ja.jsonlocalization/en.jsonファイルをそれぞれ作ります。

{
    "welcome_message": "Welcome to this App"
}
{
    "welcome_message": "このアプリへようこそ!"
}

ここのJSファイルではi18nオブジェクトにlocaleを設定してそのi18nオブジェクトを返します。

そして、非同期であるAndroidの言語設定取得のことを考えると、下記のように関数内に入れて呼び出してからエクスポートするのがポイントになります。

import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
import { Platform } from 'react-native';

import ja from './ja.json';
import en from './en.json';

async function setup() {
    i18n.fallbacks = true;
    i18n.translations = { ja, en };
    if (Platform.OS === 'ios') {
        i18n.locale = Localization.locale;
    } else {
        const { locale }  = await Localization.getLocalizationAsync();
        i18n.locale = locale;
    }
}

setup();

export default i18n;

これでセットアップは完了になりますので、ここからはどのようにこのi18nオブジェクトを使っていくのかを見ていきましょう。


使い方

最後に適所でこの言語ごとのテキストを呼び出す方法を紹介しようと思います。

やり方は簡単で、先ほど作ったi18nオブジェクトをインポートしてきて、その t 関数を下記のように呼び出せば大丈夫です。

import i18n from './localization/i18n';

i18n.t('welcome_message');

この時のインポートのパスには気をつけてください!

この関数を例えば、localizationと同じディレクトリに入っているApp.jsで使うとしたら、下記のように使うことができます。

import React from 'react';
import { View, Text } from 'react-native';
import i18n from './localization/i18n';

export default function App() {
	return (
		<View>
			<Text>{i18n.t('welcome_message')}</Text>
		</View>
	);
}

このようにJSX内でJSを使うためには{}で囲ってあげる必要があり、そして、先ほどのi18nオブジェクトの関数で適切な言語のテキストにアクセスするのです。


必要なコード一覧

忙しい人のために、説明抜きでコードだけ載せたものも用意しました。ここまで読んでいただいた方には不要かもしれません。

{
    "welcome_message": "Welcome to this App"
}
{
    "welcome_message": "このアプリへようこそ!"
}
import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
import { Platform } from 'react-native';

import ja from './ja.json';
import en from './en.json';

async function setup() {
    i18n.fallbacks = true;
    i18n.translations = { ja, en };
    if (Platform.OS === 'ios') {
        i18n.locale = Localization.locale;
    } else {
        const { locale }  = await Localization.getLocalizationAsync();
        i18n.locale = locale;
    }
}

setup();

export default i18n;
import React from 'react';
import { View, Text } from 'react-native';
import i18n from './localization/i18n';

export default function App() {
	return (
		<View>
			<Text>{i18n.t('welcome_message')}</Text>
		</View>
	);
}

まとめ

今回はExpoで一番簡単に国際化対応する方法を紹介しました。一度必要なファイルをルートディレクトリに作ったら、それをどこでも再利用することができるため、セットアップがすごく簡単です。


皆さんの役に立つことを願います!
では、また次回まで✌
記事更新はツイッターで告知するので、ツイッターの方でもフォローお願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です