アルファ
Lingo.dev Compiler は現在アルファ版です。動作はまだ安定しておらず、本番利用は推奨されません。APIはリリースごとに変更される可能性があります。
Lingo.dev Compiler は、Reactアプリケーション向けの無料のオープンソースなビルド時翻訳システムです。JSX内の翻訳対象テキストを検出し、コンポーネント全体のコンテキストを踏まえてAI翻訳を生成し、ビルド時にロケールごとのバンドルへ埋め込みます。ソースコードはそのまま。手動で翻訳キーファイルを管理したり、実行時に別途辞書を読み込んだりする必要はありません。
実際の動作を見る: Xでのライブデモ
導入前と導入後#
// Your code - unchanged
export function Welcome() {
return <h1>Welcome to our app</h1>;
}
// Renders "Bienvenido a nuestra aplicacion" in Spanishコードの変更は不要です。翻訳はコンパイル時に確定し、ロケールごとに最適化されたバンドルが生成されます。
従来のi18nライブラリとの違い#
| 従来のi18nライブラリ | Lingo.dev Compiler | |
|---|---|---|
| 翻訳管理 | 手動 - キーファイルを作成・管理する | 自動 - CompilerがJSXから翻訳対象の文字列を抽出 |
| 必要なコード変更 | すべての文字列をt()呼び出しで囲む | 不要 - 通常どおりJSXを書くだけ |
| 翻訳の読み込み方法 | 実行時に別の辞書ファイルを読み込む | ビルド時にロケールごとのバンドルへ埋め込む |
| 翻訳ソース | 手動または外部TMS | コンポーネント全体のコンテキストを踏まえたAI生成 |
| 辞書の取得 | 実行時に翻訳ファイルをフェッチまたはインポート | 別途フェッチ不要 - 翻訳はバンドルに含まれる |
ビルドパイプライン#
AST解析
CompilerはBabelを使ってReactコードを抽象構文木（AST）へ変換します。テキストノード、文字列属性（alt、aria-label、placeholder）、テンプレート式など、翻訳可能なコンテンツを特定します。
コンテンツ抽出
翻訳対象の各文字列には、安定したハッシュベースの識別子が付与されます。Compilerは、コンポーネントのコンテキスト、リッチテキスト構造（ネストされた<strong>、<em>）、補間プレースホルダーを保持します。メタデータは.lingo/metadata.jsonに保存されます。
翻訳生成
開発環境では、擬似翻訳器が即座に疑似翻訳を生成します（API呼び出しは不要）。CIでは、設定されたLLMプロバイダーが、ファイル位置、周囲の要素、補間の意味情報を含むコンポーネント全体のコンテキストをもとに実際の翻訳を生成します。翻訳されるのは新規または変更された文字列のみで、Compilerはコンテンツハッシュを使って変更のない文字列をスキップします。
コード注入
翻訳ルックアップがJSXに注入されます。Compilerは、埋め込まれた辞書に対する軽量なハッシュベースのルックアップ呼び出しを各ロケール向けに追加します。ソースコードが書き換えられることはありません。
バンドル最適化
ロケールごとのバンドルが生成されます。各コンポーネントで使われる翻訳だけが含まれ、デッドコード削除とツリーシェイキングによってバンドルは最小限に保たれます。
対応フレームワーク#
| フレームワーク | 統合方法 |
|---|---|
| Next.js (App Router) | withLingo()設定ラッパー - RSC、Webpack、Turbopackに対応 |
| Vite + React | lingoCompilerPlugin - HMRをフルサポートするViteプラグイン |
主な機能#
- デフォルトで自動 -
'use i18n'ディレクティブモードを有効にしない限り、JSX内のすべてのテキストが翻訳対象になります - 辞書フェッチ不要 - 翻訳はロケールごとのバンドルに埋め込まれるため、別ファイルの読み込みは不要です
- ビルドモード - 開発では擬似翻訳器、CIでは実翻訳、本番ではキャッシュのみ
- 手動オーバーライド - より細かく制御できる
data-lingo-override属性 - カスタムロケールリゾルバー - 独自のロケール検出と永続化を実装可能
- 自動複数形処理 - 複数形に対応したICU MessageFormatをサポート
- 開発ツール - 擬似翻訳器とブラウザ内翻訳エディター
