随時更新していきます。

背景

作成しているReact Nativeアプリの参考情報にi18nとあって何かわからなかった。国際化対応（Internationalization）の略。似たようものにはk8s(kubernetes)やa11y(accessibility)がある。

起点とした情報

developer.mozilla.org

そもそもこの記法はなに

numeronym（ヌメロニム）というらしい。

ja.wikipedia.org

www.w3.org

一般的な国際化

要件の例

文字セット(通常はUnicode)
測定単位(通貨、°C/°F, km/マイル、など)
日時フォーマット
キーボードレイアウト
テキストの方向

developer.mozilla.org

考えるべきタイミング

設計段階。 W3のDocumentにはこうある。

(Think back to the Y2K effort and trying to "undo" two-character year fields that were built on the assumption of "19xx").

www.w3.org

具体的にはどうするか、今作成しているアプリで考える。

大枠

今作成しているアプリで一番メインとなる国際化は表記言語の国際化（≒英語化）が必要となる予定。ターゲットユーザーの利用言語が日本語、英語、あとはヨーロッパ圏が多いと思われるが基本的には日英対応で問題ないと思われる。

技術をもとに考える

使っている技術はReact（React Native）なので、npmよりi18n用のライブラリ「ex-react-native-i18n」をインストールして利用する。

github.com

なお、React Nativeでのi18n対応はExpoを使うときに注意が必要そう。私は『実践Expo』を参考にしていたため最初からex-react-native-i18nを利用していたから良かったが、react-native-i18nを使おうとすると問題が出る模様。

qiita.com

実装（ソースコード上にどう落とし込めばよいのか）

やり方の一部を記す。プロジェクトルートを仮にmyappとする。./myapp/src/i18n を作成する。このときのsrcには、すでにjsファイルが存在するようなファイル構成を想定している。

日英対応の場合、日本語表記の記載されているファイル、英語表記用ファイル

./myapp/src/i18n/index.js
./myapp/src/i18n/en.json
./myapp/src/i18n/ja.json

en.json

{
  "Root": {
    "notification": "New notification",
    "message": "foo"
  },
  "Home": {
    "title": "Feed",
    "noPosts": "bar"
  },
  ...
}

ja.jsonはこれを日本語にしたもの（省略）。

index.js

import I18n from 'ex-react-native-i18n';

const ja = require('./ja.json');
const en = require('./en.json');

I18n.fallbacks = true;
I18n.defaultLocale = 'ja';
I18n.translations = {
  ja,
  en,
};

export default I18n;

このindex.jsを各所で読み込んで適応させていく形です。上記のコードはこちら（『実践Expo』の公開レポジトリ）を引用させていただいています。具体的な適応のさせ方は、上記レポジトリで確認をお願いします。

github.com

参考にさせていただいたので書籍のリンクもはっておきますね。実際のアプリを作るときに、国際化対応を恥じてとした「何を気にすべきか」の基礎が掲載されています。

www.amazon.co.jp

自分の場合を考えてみて感じたこと

簡単な言語対応くらいであればそんなにコストなくあとから追加できるのではないかと思った。急ぐのであれば、先に優先すべき地域の言語で実装して、あとから後回しにした言語をi18n対応として加えることも可能だと思う。

国際化対応を学習するための教材

www.i18nguy.com

上述のMDNの国際化対応のページで紹介されています。

swchrm logs

妄想技術録

ソフトウェアの国際化対応についての覚書【随時更新】

背景