【React Native/Expo】アプリを多言語対応するためにやったこと
こんにちは。
「Fast Template」という定型文のメールやSMSの作成を素早く簡単に行えるソフトを作っています。
今回、アプリを多言語対応したためその時にやったことを書いておきます。
expo-localizationとi18nを使う
初期設定と基本的な使い方
「React Native expo localization」で検索したときに、だいたいi18nを使うというのが見つかるのでそれでやります。
この辺とか見ながら。
まずはexpo-localizationとi18n-jsを入れます。
expo install expo-localization i18n-js
で、使いやすいようにi18nの設定周りを切り出しておきます。
initI18n.ts
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
import en from './en';
import ja from './ja';
i18n.fallbacks = true;
i18n.translations = { ja, en };
i18n.locale = Localization.locale;
export default i18n
これ、どこかのサイトを参考にしたんですが、検索しなおしても見つかりませんでした。
どこだったっけ・・・。
で、あとはja用ファイルとen用ファイルを用意します。
ja.ts
const ja = {
title: 'タイトル',
}
export default ja
en.ts
const en = {
title: 'Title',
}
export default en
で、あとは使いたいか所で以下のように記述します。
i18n.t('title')
対応漏れをしないようにする
上のような基本的な使い方だと、一つ問題があります。
ja.tsとen.tsが同期がとれているかどうかが保証されません。
そこで、同期を取るためのInterfaceを作ります。
lang_if.ts
export interface langIf {
/** タイトル */
title: string,
}
で、ja.tsとen.tsはこれを使います。
ja.ts
import { langIf } from './lang_if';
const ja: langIf = {
title: 'タイトル',
}
export default ja
en.ts
import { langIf } from './lang_if';
const en: langIf = {
title: 'Title',
}
export default en
これで、対象を追加する場合はlangIfに追加することで、ja.tsとen.tsはコンパイルエラーが出て対応漏れを防ぐことができます。
名称誤りを防ぐ
もう一つi18nを使う際に問題となるのが、i18n,t("title")と指定するときに直書きになってしまっていることです。
タイポすると当然ながら表示されませんし、名前なんだったかなと確認する必要があります。
これを防ぐために、先ほどのInterfaceを使って名称解決するためだけのものを作ります。
lang.ts
import { langIf } from './lang_if';
const lang: langIf = {
title: 'title',
}
export default lang
で、i18nを実際に使用する箇所はこうします。
i18n.t(lang.title)
これでエディタの補完機能が使えるようになりました。
しかもInterfaceにちゃんとJSDocを書いておけば、カーソルを当てると何が定義されているのかも確認できます。
コメントの書き方次第ですが、「"lang.title"ってなんだっけ・・・？」となったらカーソルを当てれば確認できるわけです。
良い感じですね。
一ついけてないなぁと思うのは、lang.tsの無駄っぽい記述でしょうか。
同じものを二つ書いてるだけのファイルなので、なんとなく作るのが無駄に見えます。
少なくとも、個人開発でここまでやる必要はなかったかもしれませんね。
ただ、複数人で開発してるときなんかはミスを減らすことができるのでやる意味はありそうです。
