仕組み

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

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

1. AST分析

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

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

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

2. コンテンツ抽出

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

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

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

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

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

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

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

4. AI翻訳

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

  • GROQ統合により高速で高品質な翻訳を提供
  • コンテキスト境界により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 - プロフェッショナルな翻訳品質

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

次のステップ