AIによるi18nキーの抽出

既存のReactアプリを多言語対応にするには、ハードコードされた文字列を見つけて翻訳キーに置き換えるという、時に退屈なプロセスが必要です。

Lingo.dev CLIは、Cursor、GitHub CopilotなどのAI搭載IDEとシームレスに連携し、Reactコンポーネントから翻訳可能なコンテンツの抽出を自動化します。

以下で説明する概念は、どのような技術スタックにも適用できますが、シンプルさを保ち、アイデアを示すために、例としてhello worldのReactアプリを使用します。

前提条件

キーを抽出する前に、Reactアプリで基本的な国際化をセットアップしてください。完全なセットアップ手順については、react-intlのドキュメントを参照してください。

技術スタックに合わせた国際化セットアップを行った後、プロジェクトには以下が含まれているはずです：

アプリ内で言語を動的に切り替える機能
翻訳ファイルを整理するための基本的なプロジェクト構造

セットアッププロセス

Lingo.dev CLIをインストールして設定する：

npx lingo.dev@latest init

空のソースファイルを作成する：

mkdir -p src/locales
echo '{}' > src/locales/en.json

i18n.jsonを設定する：

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

AIによるキーの抽出

Reactコンポーネントを選択し、AI IDEを使用してハードコードされた文字列を抽出します：

抽出前：

function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our platform</h2>
      <p>Start your journey with us today</p>
      <button>Get started</button>
    </div>
  );
}

抽出の要件：

ハードコードされた文字列をreact-intlのフックとコンポーネントに置き換える
変数と複数形にはICUフォーマットを使用する
コンポーネント構成に基づいて階層的にキーを構造化する
すべてのキーをソースJSONファイルに追加する
一貫した命名規則を維持する

AIプロンプト：

Reactコンポーネントからすべてのハードコードされた文字列を抽出し、以下を行ってください：

1. react-intlで置き換える：
   - 動的な文字列にはuseIntlフックを使用
   - 静的なテキストにはFormattedMessageを使用
   - 変数({name})と複数形({count})にはICUフォーマットを追加

2. 翻訳キーの構造化：
   - コンポーネント階層でグループ化(components.*, pages.*)
   - 説明的でネストされたキーを使用(header.nav.home)
   - JSONでコンポーネント構造に合わせる

3. ロケールの更新：
   - すべてのキーをsrc/locales/en.jsonに追加
   - アプリ全体で一貫した命名を維持

AI抽出後：

import { useIntl } from "react-intl";

function WelcomeCard() {
  const intl = useIntl();

  return (
    <div className="card">
      <h2>{intl.formatMessage({ id: "welcome.title" })}</h2>
      <p>{intl.formatMessage({ id: "welcome.description" })}</p>
      <button>{intl.formatMessage({ id: "welcome.getStarted" })}</button>
    </div>
  );
}

生成されたen.json：

{
  "welcome.title": "Welcome to our platform",
  "welcome.description": "Start your journey with us today",
  "welcome.getStarted": "Get started"
}

バッチ処理

複数のコンポーネントの場合、すべてのファイルを選択し、同じ包括的なプロンプトを使用してください。Cursor、GitHub Copilotなどの AI IDE は、複数のファイルを同時に処理し、アプリケーション全体で一貫したキー命名を維持することができます。

翻訳の生成

AI IDEがキーを抽出したら、翻訳を生成します：

npx lingo.dev@latest i18n

これにより、ソースファイルの翻訳バージョンが作成されます：

src/locales/
  en.json    (抽出されたキーを含むソース)
  es.json    (スペイン語翻訳)
  fr.json    (フランス語翻訳)
  de.json    (ドイツ語翻訳)

検証

抽出後、セットアップを確認します：

翻訳カバレッジの確認：

npx lingo.dev@latest i18n --frozen

このコマンドは、翻訳が不足している場合に失敗し、完全なカバレッジを確保します。

異なるロケールでのテスト：

// アプリでロケールを切り替えて翻訳が機能することを確認
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>