自動化上級

多言語化 (i18n) の自動適用

ハードコードされた日本語文字列を i18n キーに置き換え、辞書ファイルを生成するプロンプト。

監修: 平原尚樹

株式会社BlueAI 代表取締役CEO / ソフトウェアエンジニア / プロダクトエンジニア / Google Cloud Architect / 元AIスタートアップ(Doorkel)

監修: 酒井歩乃加

早稲田大学文化構想学部卒業 / フリーランス編集者・ライター / 元マイベスト編集ディレクター / SEO対策記事・取材記事執筆

こんな課題を解決

既存のフロントエンドに英語対応を後付けする必要があるが、文字列が全コンポーネントに散在しており、手で置き換えるのは現実的でない。

プロンプト

Claude Code に入力

app/ 配下を i18n 対応してください。

## 前提
- ライブラリ: react-i18next
- 既存の文言は日本語ハードコード
- 対応言語は ja（既存）と en（新規）

## 手順
1. app/ 以下の .tsx ファイルを走査し、JSX 内の日本語テキストと aria-label/placeholder/title 属性を抽出
2. キー命名は kebab-case + 画面パスベース（例 home.hero.title）
3. ja.json と en.json を locales/ 配下に生成、en は機械翻訳のプレースホルダで埋める
4. 各コンポーネントで useTranslation() を導入し t("key") に置換
5. <Trans> が必要な箇所（変数挿入や強調）は適切に処理

## 守ること
- ロジック・条件分岐は変更しない
- 日付・通貨フォーマットは Intl API に置き換え
- ユニットテストの文字列も影響を受けるなら更新

実行結果の例

Claude Code が以下を実行します。 - 検出された文字列 142 件のレポート - locales/ja.json と locales/en.json を生成 - 主要画面 8 ファイルで t() への置換 diff - i18n provider のセットアップ追加

コツ・ポイント

全置換を一気にやらず、画面単位で PR を分けるとレビュアーが助かる
en 翻訳はネイティブチェック必須のためまずは英語のプレースホルダで
キー名は後から変更が辛いので最初に命名規則を合意する
Storybook がある場合は i18n decorator も合わせて追加させる