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>
  );
}

抽出の要件:

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

AIプロンプト:

Extract all hardcoded strings from React components and:

1. Replace with react-intl:
   - Use useIntl hook for dynamic strings
   - Use FormattedMessage for static text
   - Add ICU formatting for variables ({name}) and plurals ({count})

2. Structure translation keys:
   - Group by component hierarchy (components.*, pages.*)
   - Use descriptive, nested keys (header.nav.home)
   - Match component structure in JSON

3. Update locales:
   - Add all keys to src/locales/en.json
   - Maintain consistent naming across app

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 run

これにより、ソースファイルの翻訳版が作成されます:

src/locales/
  en.json    (source with extracted keys)
  es.json    (Spanish translations)
  fr.json    (French translations)
  de.json    (German translations)

検証

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

翻訳カバレッジの確認:

npx lingo.dev@latest run --frozen

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

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

// Switch locale in your app to verify translations work
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>