多言語対応（i18n）をClaudeと実装する

多言語対応は「やろうと思ったら意外と大変だった」の典型です。翻訳ファイルの管理、コンポーネントの修正、ルーティングの変更……。Claude Codeを使えば、この面倒な作業を一気に効率化できます。

まずプロジェクト全体を把握させる

最初のステップは、Claude Codeに現在のプロジェクト構成を理解させることです。ターミナルで次のように依頼してみましょう。

# Claude Codeへのプロンプト例
「このNext.jsプロジェクトにnext-intlを使った多言語対応（日本語・英語）を追加してください。
現在のsrc/app配下のコンポーネントをスキャンして、ハードコードされた文字列を洗い出し、
翻訳キーに置き換える計画を立ててから実装してください。」

ポイントは「計画を立ててから実装」と伝えることです。いきなりコードを書かせるより、変更ファイルの一覧を確認してから進められるため、意図しない修正を防げます。

※プロンプト: AIへの指示文。Claude Codeへの指示の質がそのまま出力の質に影響する。

翻訳ファイルの自動生成と管理

Claude Codeはコンポーネント内のテキストを読み取り、翻訳JSONファイルを自動生成するのが得意です。たとえば既存のコンポーネントを渡して翻訳キーを抽出させると、以下のようなファイルを生成してくれます。

{
  "common": {
    "submit": "送信する",
    "cancel": "キャンセル",
    "loading": "読み込み中..."
  },
  "auth": {
    "login": "ログイン",
    "logout": "ログアウト",
    "welcome": "{name}さん、ようこそ"
  }
}

プレースホルダー（{name} など）も文脈を読んで適切に設定してくれる点が便利です。

コンポーネントの一括置換を任せる

翻訳ファイルができたら、コンポーネント側の修正も依頼しましょう。

// Claude Codeが修正後に生成するコンポーネント例
import { useTranslations } from 'next-intl';

export function AuthButton() {
  const t = useTranslations('auth');
  return <button>{t('login')}</button>;
}

「src/components配下のすべてのコンポーネントを同じパターンで修正して」と指示するだけで、複数ファイルを一括で書き換えてくれます。手作業では見落としが発生しがちな繰り返し作業を安全に任せられるのは大きなメリットです。

i18n対応は地道な作業ですが、Claude Codeに構造的に依頼することで、セットアップから翻訳キーの抽出・コンポーネント修正まで、驚くほどスムーズに進められます。ぜひ試してみてください。