【あいじゅうはちえぬ】

i18n(国際化) とは?

💡 ソフトウェアを「世界対応」にする設計
📌 このページのポイント
国際化(i18n)のしくみ アプリ本体 UI・ロジックは 1つだけ t("greeting") 🇯🇵 日本語 ja.json 🇺🇸 English en.json 🇨🇳 中文 zh.json 🇪🇸 Español es.json 「こんにちは」 "Hello" "你好" "Hola" コードを変えずに言語ファイルの切替だけで多言語対応する
国際化(i18n)のイメージ
ひよこ ひよこ

l10nと何が違うの?

ペンギン先生 ペンギン先生

i18nは「多言語対応できる仕組みを作ること」、l10nは「実際に各言語に翻訳すること」。i18nはエンジニアの仕事(文字列を外部ファイルに出す、日付フォーマットを切り替え可能にする)、l10nは翻訳者の仕事(日本語や中国語への翻訳)。i18nがちゃんとしていないとl10nが困難になるよ

ひよこ ひよこ

どうやって実装する?

ペンギン先生 ペンギン先生

①コード内のハードコードされた文字列をキーに置き換え(t('hello')のように)、②言語ごとのJSONファイル(en.json、ja.json)に翻訳を格納、③ブラウザの言語設定やURLで言語を切り替え。i18nextやreact-intlなどのライブラリが翻訳の読み込みと切り替えを自動でやってくれるよ

ひよこ ひよこ

文字列以外に何を気にする?

ペンギン先生 ペンギン先生

①日付フォーマット(米国: 03/24/2026、日本: 2026/03/24)、②数値(米国: 1,000.50、ドイツ: 1.000,50)、③通貨($、¥、€)、④複数形(英語: 1 item / 2 items)、⑤RTL言語(アラビア語、ヘブライ語はレイアウトが右から左)、⑥文字列の長さ(ドイツ語は英語の1.3倍長い)。Intl APIフォーマット処理ができるよ

ひよこ ひよこ

後から対応するのは大変?

ペンギン先生 ペンギン先生

非常に大変。ハードコードされた文字列を全部見つけ出して置き換える作業が膨大。UIレイアウトも言語によってテキスト長が変わるから崩れる。最初からi18nの仕組みを入れておくコストは小さいから、海外展開の可能性が少しでもあるなら初期段階で入れておくのが鉄則だよ

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「i18n」って出てきたら「ソフトウェアを多言語対応にする設計」と思えればだいたいOK!
📖 おまけ:英語の意味
「Internationalization」 = 国際化
💬 iとnの間に18文字あるからi18n。数字を挟む略記法はNumeronymと呼ぶよ
← 用語集にもどる