開発ツール - Lingo.dev Compiler

@lingo.dev/compilerは、開発ワークフローを高速化し、開発中のAPIコストを削減する開発ツールを提供します。

疑似翻訳機能

疑似翻訳機能は、API呼び出しなしで即座に偽の翻訳を生成します。

有効化

{
  dev: {
    usePseudotranslator: true,
  }
}

機能

視覚的なマーカーを使用してテキストを変換します。

元のテキスト:

Welcome to our app

疑似翻訳後:

[!!! Ẃëļċöṁë ẗö öüř äþþ !!!]

メリット:

即座のフィードバック — API呼び出し不要、待ち時間なし
翻訳可能なテキストの可視化 — 翻訳される箇所を正確に確認
可変長のテスト — 疑似翻訳は約30%長くなり、レイアウトの問題を明らかにします
コストゼロ — APIクレジットを消費しません

仕組み

疑似翻訳機能は以下を実行します。

マーカーの追加([!!!と!!!])
文字をアクセント付き文字に置換(a → ä、e → ë)
テキスト長を約30%延長
補間の保持({name}は{name}のまま)
HTML構造の維持

補間を含む例:

<p>Hello {name}, you have {count} items</p>
// Becomes: [!!! Ḧëļļö {name}, ÿöü ḧävë {count} ïẗëṁṡ !!!]

使用タイミング

開発中:

初期セットアップと統合
可変テキスト長でのレイアウトテスト
翻訳問題のデバッグ
UIの迅速な反復開発

使用すべきでない場合:

実際の翻訳品質のレビュー
ロケール固有のフォーマットのテスト
デプロイ前の最終QA

実際の翻訳のために無効化

{
  dev: {
    usePseudotranslator: false,
  }
}

開発サーバーを再起動して、設定されたLLMプロバイダーを使用した実際の翻訳を生成します。

翻訳サーバー

翻訳サーバーは、開発中のオンデマンド翻訳生成を処理します。

仕組み

npm run devを実行すると:

コンパイラがローカルHTTPサーバーを起動します
サーバーが利用可能なポート(60000-60099)を自動検出します
アプリがサーバーに翻訳をリクエストします
サーバーが翻訳を生成します(疑似翻訳または実翻訳)
翻訳は.lingo/metadata.jsonにキャッシュされます

設定

{
  dev: {
    translationServerStartPort: 60000, // Starting port
    translationServerUrl: "http://localhost:60000", // Custom URL (advanced)
  }
}

ポート範囲: サーバーは利用可能なポートが見つかるまで、60000から60099のポートを順次試行します。

手動起動(上級者向け)

翻訳サーバーを手動で起動できます:

npx @lingo.dev/compiler translate-server \
  --port 60000 \
  --config ./lingo.config.json

これは以下の場合に便利です:

ビルドプロセスとは別に翻訳サーバーを実行する
翻訳の問題をデバッグする
カスタムCI/CDワークフロー

WebSocketサポート

翻訳サーバーは、開発ウィジェットとのリアルタイム通信のためにWebSocketをサポートしています。

翻訳が更新されると、サーバーはWebSocket経由で接続されたクライアントに変更をプッシュします。

開発ウィジェット

開発ウィジェットは、翻訳をリアルタイムで編集するためのブラウザ内オーバーレイです。

機能

ブラウザ内で翻訳を編集 — ファイルを編集する必要がありません
コンテキストを確認 — ソーステキスト、コンポーネントの場所を表示
リアルタイム更新 — WebSocket経由で変更が即座に適用されます
ロケール切り替え — 異なるロケールを素早くテスト

有効化

{
  dev: {
    enableWidget: true, // Coming soon
  }
}

ステータス: 開発ウィジェットは現在積極的に開発中であり、将来のリリースで利用可能になります。

動作の仕組み

キーボードショートカット(例: Cmd+Shift+L)を押します
ウィジェットオーバーレイが表示されます
翻訳されたテキストをクリックして編集します
特定のロケールの翻訳を変更します
保存—変更がWebSocket経由で同期されます
翻訳が.lingo/metadata.jsonで即座に更新されます

開発ワークフロー

推奨セットアップ

1. 初期セットアップ:

{
  dev: {
    usePseudotranslator: true, // Fast feedback
  }
}

npm run devを実行すると、疑似翻訳が即座に表示されます。

2. レイアウトテスト:

疑似翻訳によりレイアウトの問題が明らかになります:

テキストのオーバーフロー
切り捨てられたラベル
位置ずれした要素
不適切なレスポンシブブレークポイント

実際の翻訳に投資する前にレイアウトの問題を修正します。

3. 実際の翻訳のレビュー:

{
  dev: {
    usePseudotranslator: false,
  }
}

実際の翻訳を生成して品質をレビューします。テスト項目:

翻訳の正確性
トーンと丁寧さ
技術用語の処理
ブランド名の保持

4. 微調整:

精密な制御にはdata-lingo-overrideを使用します:

<h1 data-lingo-override={{ es: "Bienvenido", de: "Willkommen" }}>
  Welcome
</h1>

5. 本番ビルド:

{
  buildMode: "cache-only",
}

事前生成された翻訳を使用して、高速で確定的なビルドを実現します。

デバッグ

翻訳サーバーの確認

翻訳サーバーはコンソールにログを出力します:

[lingo] Translation server started on port 60001
[lingo] Pseudotranslator: enabled
[lingo] Watching for changes...

メタデータファイルの確認

.lingo/metadata.jsonを検査してキャッシュされた翻訳を確認します:

{
  "translations": {
    "abc123": {
      "source": "Welcome to our app",
      "locales": {
        "es": "[!!! Ẃëļċöṁë ẗö öüř äþþ !!!]",
        "de": "[!!! Ẃëļċöṁë ẗö öüř äþþ !!!]"
      }
    }
  }
}

疑似翻訳機能を無効にすると、代わりに実際の翻訳が表示されます。

ポートの競合

ポート60000-60099がすべて使用中の場合:

{
  dev: {
    translationServerStartPort: 61000, // Use different range
  }
}

または、これらのポートを使用しているプロセスを手動で停止します：

# Find process using port 60000
lsof -i :60000

# Kill process
kill -9 <PID>

パフォーマンスのヒント

疑似翻訳は高速です—開発時にはデフォルトで使用してください。

実際の翻訳は低速です—品質を確認する必要がある場合にのみ使用してください：

初回の翻訳生成：APIレイテンシが適用されます
以降のビルド：翻訳はキャッシュされ、高速です

翻訳サーバーは軽量です—メモリとCPU使用量は最小限です。

よくある質問

翻訳サーバーを手動で起動する必要がありますか？ いいえ。npm run devを実行すると自動的に起動します。

本番環境で疑似翻訳を使用できますか？ いいえ。疑似翻訳は開発専用です。本番ビルドでは常に.lingo/metadata.jsonからの実際の翻訳を使用します。

開発ウィジェットがまだ利用できないのはなぜですか？ 現在、積極的に開発中です。更新情報についてはGitHubリリースをフォローしてください。

疑似翻訳をカスタマイズできますか？ 現在はできません。疑似翻訳は、翻訳可能なテキストを視覚化するために最適化された固定アルゴリズムを使用しています。

疑似翻訳はすべての文字セットで機能しますか？ はい。疑似翻訳は、絵文字、CJK文字、RTL言語を含むUnicodeを正しく処理します。

次のステップ

プロジェクト構造 — .lingo/ディレクトリの理解
ビルドモード — 開発環境と本番環境の最適化
ベストプラクティス — 推奨される開発ワークフロー