国際化 (i18n) とローカライゼーション

目次

• 概要
• 使用場面
• クイックスタート
• リファレンスガイド
• ベストプラクティス

概要

アプリケーションに国際化とローカライゼーションを実装するための包括的なガイドです。メッセージ翻訳、複数形、日付/時刻/数値フォーマット、RTL言語、および一般的な i18n ライブラリの統合をカバーしています。

使用場面

• 多言語アプリケーションの構築
• 国際ユーザーのサポート
• 言語切り替え機能の実装
• 異なるロケールでの日付、時刻、数値のフォーマット
• RTL (右から左) 言語のサポート
• 翻訳文字列の抽出と管理
• 複数形ルールの実装
• 翻訳ワークフローのセットアップ

クイックスタート

最小限の実装例:

// i18n.ts
import i18next from "i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";

await i18next
  .use(Backend)
  .use(LanguageDetector)
  .init({
    fallbackLng: "en",
    debug: process.env.NODE_ENV === "development",

    interpolation: {
      escapeValue: false, // React already escapes
    },

    backend: {
      loadPath: "/locales/{{lng}}/{{ns}}.json",
    },

    detection: {
      order: ["querystring", "cookie", "localStorage", "navigator"],
      caches: ["localStorage", "cookie"],
    },
  });
// ... (see reference guides for full implementation)

リファレンスガイド

references/ ディレクトリの詳細な実装:

ガイド	内容
i18next (JavaScript/TypeScript)	i18next (JavaScript/TypeScript)
React-Intl (Format.js)	React-Intl (Format.js)
Python i18n (gettext)	Python i18n (gettext)
日付と時刻のフォーマット	日付と時刻のフォーマット
数値と通貨のフォーマット	数値と通貨のフォーマット
複数形ルール	複数形ルール
RTL (右から左) 言語サポート	RTL (右から左) 言語サポート
翻訳管理	翻訳管理
ロケール検出	ロケール検出
サーバーサイド i18n	サーバーサイド i18n

ベストプラクティス

✅ すべきこと

• ユーザーに見える文字列をすべて翻訳ファイルに抽出する
• 複雑なメッセージに ICU メッセージフォーマットを使用する
• 各言語で正しく複数形をサポートする
• ロケール対応の日付/時刻/数値フォーマットを使用する
• アラビア語、ヘブライ語など RTL 言語をサポートする
• フォールバック言語を提供する (通常は英語)
• 翻訳を整理するために名前空間を使用する
• 疑似ローカライゼーション (ääçćëńţś) でテストする
• ロケール設定を保存する (cookie、localStorage)
• 本番環境では専門の翻訳者を使用する
• 翻訳管理ワークフローを実装する
• 動的なロケール切り替えをサポートする
• 翻訳メモリツールを使用する

❌ すべきでないこと

• コード内にユーザーに見える文字列をハードコードする
• 翻訳された文字列を連結する
• 英語の文法ルールがすべての言語に適用されると仮定する
• すべての言語に汎用複数形 (one/many) を使用する
• テキスト拡張を忘れる (ドイツ語は約 30% 長い)
• 日付/時刻をロケール固有のフォーマットで保存する
• 言語を表すのに国旗を使用する (国旗 ≠ 言語)
• コンテキストなしに技術用語を翻訳する
• 翻訳キーと UI 文字列を混在させる
• alt テキスト、タイトル、プレースホルダーの翻訳を忘れる
• 左から右へのレイアウトを仮定する