国際化(i18n)
国際化(i18n)とは
国際化(internationalization)は、アプリを特定の言語や地域に依存しない作りにする設計のことです。i と n の間に18文字あることから i18n と略されます。あわせて、実際に特定の地域向けの翻訳や調整を行うことをローカライゼーション(l10n)と呼びます。
「あとから多言語化」は改修範囲が全画面に及ぶ大工事になりがちです。将来の可能性があるなら、最初から i18n を意識した作りにしておくのが安全です。
翻訳の外部化
i18n の基本は、文言をコードに直接書かず、キーで参照することです。
// 翻訳リソース(言語ごとのJSON)
// ja.json: { "greeting": "こんにちは、{name}さん" }
// en.json: { "greeting": "Hello, {name}" }
t('greeting', { name: 'Tanaka' });
// 言語設定に応じて適切な文言が返る
[[JavaScript]] では i18next などのライブラリが定番です。文言に変数を埋め込むほか、複数形の扱い(英語は 1 item / 2 items と変化する)など、言語ごとの文法差も翻訳リソース側で吸収します。
文言以外も変わる
多言語対応は翻訳だけでは終わりません。
| 項目 | 例 |
|---|---|
| 日付・時刻 | 2026/07/27(日本)と 07/27/2026(米国) |
| 数値・通貨 | 1,234.56 と 1.234,56(ドイツ) |
| 文字方向 | アラビア語・ヘブライ語は右から左(RTL) |
| レイアウト | ドイツ語は単語が長く、ボタンからはみ出しがち |
日付や数値の整形は、ブラウザ標準の Intl API(Intl.DateTimeFormat / Intl.NumberFormat)がロケールに応じた形式へ変換してくれます。自前で整形ロジックを書かないのが鉄則です。
初学者向けポイント
- [[HTML]] の
lang属性(<html lang="ja">)は正しく設定しましょう。読み上げソフトの発音や翻訳機能に影響し、[[Webアクセシビリティ]] の基本でもあります - 言語ごとにURLを分ける場合(
/ja/…と/en/…など)は、検索エンジンへ対応関係を伝える設計が必要です([[SEOの技術基礎]] 参照) - 「文言をハードコードしない」だけでも、将来の多言語化コストは大きく下がります
関連技術とのつながり
- [[JavaScript]] — i18nextやIntl APIなど実装の中心
- [[HTML]] — lang属性による言語の明示
- [[Webアクセシビリティ]] — 言語の明示は読み上げ環境への配慮でもある
- [[SEOの技術基礎]] — 多言語ページと検索エンジンの橋渡し
- [[文字コードと文字化け]] — 多言語対応の前提。まず全層をUTF-8へ揃える
Q: i18nという略語の由来はどれ?
- [x] internationalizationのiとnの間に18文字あるから
- [ ] 18か国語に対応する規格だから
- [ ] 1998年に策定された規格だから
解説: internationalizationの最初のiと最後のnの間に18文字あることからi18nと略されます。
Q: 翻訳の外部化の説明として正しいのはどれ?
- [ ] 翻訳会社にコードごと送ること
- [x] 文言をコードに直接書かず、キーで翻訳リソースを参照すること
- [ ] ブラウザの自動翻訳機能に任せること
解説: 文言を言語ごとのリソースファイルに分離し、コードからはキーで参照するのがi18nの基本です。
Q: ロケールに応じた日付・数値の整形に使うブラウザ標準APIはどれ?
- [ ] JSON API
- [ ] Fetch API
- [x] Intl API
解説: Intl.DateTimeFormatやIntl.NumberFormatが地域ごとの形式への変換を担います。自前実装は避けましょう。