NuxSaaS の国際化（i18n）

このドキュメントでは、NuxSaaS がどのように多言語対応を実現しているか、その設計思想について説明します。

NuxSaaS の多言語対応の仕組み

NuxSaaS では、@nuxtjs/i18n モジュールを利用してアプリケーションの国際化を実現しています。主な設定は nuxt.config.ts と app/i18n/i18n.config.ts ファイルで管理されています。

主な設定ポイント

• ロケールの定義:
  対応言語は nuxt.config.ts の locales 配列で定義します。各ロケールには code、ISO 識別子、表示名が含まれます。例:

  const locales = [
    { code: 'en', iso: 'en-US', name: 'English' },
    { code: 'zh-CN', iso: 'zh-CN', name: '简体中文' },
    { code: 'ja', iso: 'ja-JP', name: '日本語' },
    { code: 'fr', iso: 'fr-FR', name: 'Français' }
  ]

• デフォルトおよびフォールバックロケール:
  英語（en）がデフォルトロケールとして設定されています。フォールバックや未翻訳警告は、ユーザー体験を損なわないよう無効化されています。

• メッセージの整理:
  すべてのグローバル翻訳メッセージは app/i18n/ ディレクトリにまとめられています。メイン設定ファイル i18n.config.ts では、各言語ごとにグローバル翻訳とバリデーションメッセージ（例：Zod のバリデーションエラー）を統合しています。

  const messages = {
    'en': { ...zodEn, ...global.en },
    'zh-CN': { ...zodZhCN, ...global['zh-CN'] },
    'ja': { ...zodJa, ...global.ja },
    'fr': { ...zodFr, ...global.fr }
  }

• ページ・コンポーネント単位の翻訳:
  複雑なページやコンポーネントでは、<i18n src="./i18n.json"></i18n> ブロックを使って、翻訳をスコープ化できます。これにより、翻訳ファイルのモジュール化と保守性が向上します。

• ロケール対応ルーティング:
  アプリケーションはロケール対応ルーティングを採用しており、URL に選択した言語が反映されます（例：/ja/、/zh-CN/）。リンク生成には useLocalePath() composable を利用します。

• 新しい言語の追加方法:

  新しい言語を追加するには:

  1. nuxt.config.ts の locales 配列にロケールを追加します。
  2. 新しい言語用の翻訳ファイルを app/i18n/ に作成または更新します。
  3. すべての i18n.json ファイルに新言語のメッセージを追加します。

  VS Code で "en": { を検索:

このアプローチの理由

• 拡張性: 言語や機能ごとに翻訳を整理することで、より多くの言語やコントリビューターに対応しやすくなります。
• 保守性: 設定の一元化と翻訳ファイルのモジュール化により、他の部分に影響を与えずに翻訳の追加や更新が容易です。
• ユーザー体験: ロケール対応ルーティングとシームレスな言語切り替えにより、世界中のユーザーに一貫した直感的な体験を提供します。
• バリデーションの一貫性: Zod などのバリデーションメッセージも統合することで、すべてのユーザー向けフィードバックがローカライズされ、アクセシビリティとプロフェッショナリズムが向上します。
• パフォーマンス: 必要な翻訳ファイルのみを読み込むため、アプリケーションの効率性が保たれます。