仕組み

Lingo.dev コンパイラーは、インテリジェントなコード分析とAI駆動の翻訳によって、ビルド時にReactアプリのローカライゼーションを自動化します。

ビルドプロセスを実行すると、コンパイラーはソースコードを変更することなく、以下のステップであなたのアプリを多言語対応にします：

1. AST分析

Lingo.dev コンパイラーは、Reactコードの抽象構文木（AST）を処理して、翻訳可能なコンテンツを決定論的に識別します。以下を分析します：

  • JSXテキストコンテンツと属性
  • Reactコンポーネント内の文字列リテラル（文字列リテラルのサポートは近日公開予定。）
  • 動的コンテンツパターン

コンパイラーはReactコンポーネントの境界を理解し、正確な翻訳のためのコンテキスト情報を維持します。

2. コンテンツ抽出

コンパイラーは以下を保持しながら翻訳可能な文字列を抽出します：

  • コンポーネント階層とコンテキスト
  • propsやstateなどのReact特有のパターン
  • コード構造とフォーマット

人間が読めるコンテンツのみが抽出されます。技術的な識別子、コードスニペット、翻訳不要な要素は自動的にフィルタリングされます。

3. フィンガープリンティングとバージョン管理

コンテンツフィンガープリントにより効率的な翻訳管理が確保されます：

  • MD5ハッシュが一意のコンテンツフィンガープリントを作成
  • バージョン管理された辞書がlingo/ディレクトリ内の変更を追跡
  • Git統合が翻訳履歴を維持
  • 差分処理が新規または変更されたコンテンツのみを翻訳

このアプローチにより、翻訳コストを最小限に抑え、ビルド間での一貫性を維持します。

4. AI翻訳

翻訳はコンテキスト理解を備えたAIモデルを通じて行われます：

  • AIモデル統合により、Lingo.devエンジンまたはサポートされているLLMプロバイダーを通じて高速で高品質な翻訳が提供されます
  • コンテキスト境界によりAIがコンポーネント間の関係を理解できるようになります
  • アプリケーション全体で一貫した用語を維持します
  • 最適なパフォーマンスのためのバッチ処理

コンパイラーはUIコンポーネント内に自然に適合する翻訳を確保するためにコンテキスト情報を送信します。

5. コード注入

翻訳はソースファイルを変更せずにビルドに注入されます：

  • ビルド時処理でローカライズされたバージョンを作成
  • Next.js、Vite、React Routerとのフレームワーク統合
  • ロケールごとの辞書読み込みによる最適化されたバンドル
  • 事前コンパイルされた翻訳によるランタイム効率

結果として、最小限のランタイムオーバーヘッドで本番環境対応の多言語Reactアプリが実現します。

フレームワーク統合

Next.js App Router

コンパイラはNext.jsと設定システムを通じて統合されます：

// next.config.js
export default lingoCompiler.next(config)(nextConfig);
  • サーバーコンポーネントはビルド時に処理されます
  • クライアントコンポーネントは最適化された翻訳バンドルを受け取ります
  • 自動ルーティングはロケールベースのURLをサポートします

React Router / Remix

Viteプラグインアーキテクチャを通じた統合：

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • サーバーサイドレンダリングはプリロードされた辞書を使用
  • クライアントサイドハイドレーションは翻訳状態を維持
  • ルートベースのコード分割は翻訳バンドルを含みます

Vite

Viteプラグインとの直接統合：

// vite.config.ts
export default lingoCompiler.vite(config)(viteConfig);
  • ホットモジュールリプレイスメントは開発中に翻訳を更新
  • ビルド最適化は最小限のプロダクションバンドルを作成
  • アセット処理は翻訳ファイルを効率的に管理します

開発ワークフロー

  1. 自然言語テキストを使用してReactコンポーネントを作成
  2. 開発サーバーを実行 - コンパイラがコンテンツを抽出して翻訳
  3. 生成されたlingo/ディレクトリで翻訳をレビュー
  4. 翻訳ファイルをバージョン管理にコミット
  5. 組み込みの多言語サポートでデプロイ

本番環境のメリット

  • ランタイムコストゼロ - 翻訳はプリコンパイルされます
  • 最適なバンドルサイズ - 使用される翻訳のみが含まれます
  • SEOフレンドリー - 適切なロケール固有のレンダリング
  • 一貫したUX - プロフェッショナルな翻訳品質

コンパイラは、元の開発ワークフローを維持しながら、サポートされる各言語向けにネイティブに構築されたように感じるプロダクションアプリを作成します。

LLMプロバイダー

オプション1. Lingo.devエンジン

Lingo.devコンパイラーは、AI翻訳エンジンとしてLingo.devエンジンを使用できます。

動的モデル選択、各言語ペアに対する異なるモデルへの自動ルーティング、自動モデルフォールバック、過去の翻訳を考慮する翻訳メモリ、およびプロジェクトのドメイン固有の用語集のサポートを提供します。無料と有料のオプションがあり、無料のHobbyティアはほとんどのプロジェクトに十分です。

認証するには、以下を実行します：

npx lingo.dev@latest login

Lingo.devエンジンをプロバイダーとして設定します。例えばNext.jsの場合：

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: "lingo.dev",
})(nextConfig);

重要な詳細。 Braveブラウザを使用している場合、またはブラウザ拡張機能が認証フローをブロックしている場合は、.envファイルにLINGODOTDEV_API_KEY環境変数を追加して手動で認証できます：

LINGODOTDEV_API_KEY=...

オプション2. 代替LLMプロバイダー

コンパイラは以下のLLMプロバイダーをサポートしています：

選択したLLMプロバイダーでアカウントを作成し、設定するためのAPIキーを取得する必要があります。

注意： コンパイラでLLMプロバイダーを使用する前に、アカウントをアクティベートし、利用規約に同意してください。すべての手順を完了するまで、LLMプロバイダーがプラットフォームの使用を制限する場合があります。手順はLLMプロバイダーごとに異なる場合があります。

選択したLLMプロバイダーを設定します。例えば、Next.jsアプリでGroqを使用する場合：

lingoCompiler.next({
  sourceLocale: "en",
  targetLocales: ["es", "fr", "de"],
  models: {
    "*:*": "groq:qwen/qwen3-32b", // GROQ
    // "*:*": "google:gemini-2.0-flash", // Google AI
    // "*:*": "openrouter:mistralai/mistral-small-24b-instruct-2501", // OpenRouter
    // "*:*": "ollama:mistral-small3.1", // Ollama
    // "*:*": "mistral:mistral-small-latest", // Mistral
  },
})(nextConfig);

設定したLLMプロバイダー用のAPIキーを環境に追加します：


# .env

GROQ_API_KEY=gsk_...
GOOGLE_API_KEY=...
OPENROUTER_API_KEY=...
MISTRAL_API_KEY=...

私たちはより多くのLLMをサポートしたいと考えています - ご相談くださいまたはプルリクエストを送信してください！

次のステップ