Vol. 01
2026.04.10
2026.03.04 ZENN // TECH

"Vibe Coderのための「コード翻訳レンズ」をClaude×Geminiで1日で作った話"

ORIGIN: ZENN.DEV READ ORIGINAL

Introduction: AI生成コードの「解読の壁」を突破するRosetta Lens構想

今GeminiにDeep Researchさせてるんだけどさ、内容は「初心者（俺）がAIの書いたコードの保守性がわからないので、コードの再翻訳をしてくれるレビューソフトの有無」なんだよね。Claudeとの朝のブレストから始まったこのプロジェクト、名前は「Rosetta Lens」に決めた。

DeepResearchの結果によれば、AIが書いたコードを人間が理解できる形に再翻訳するツールの空白地帯を発見。
今は「AIすごい！動いた！」のハネムーン期だけど、半年後には「誰も読めない負債」が爆増するはず。

特に自分みたいにコードが書けない人が増える時代、自分自身がユーザー像だからペインは本物だと思う。GeminiとClaudeと一緒に（窓は別だが）議論を重ねた結果、既存ツールにはない「非破壊で文脈を理解した仮想レイヤー翻訳」というコンセプトに辿り着いた。

対象読者は、AI生成コードのブラックボックス化に悩む全ての「Vibe Coder」たちだ。

Struggle: Decoration APIによる描画の限界と文字幅の壁

開発はClaude Codeに実装を任せ、Geminiにレビューを依頼する分業体制で進めた。フェーズ1の足場組みからフェーズ2の描画テストへ。当初はVS CodeのDecoration APIを使い、英語の識別子を透明化して、その上に日本語を重畳表示する「没入モード」を目指していた。

しかし、ここで大きな技術的困難に直面した。等幅フォント環境において日本語（全角）と英語（半角）のレンダリング幅が一致せず、データ保存あたりの表示が激しくダブってしまう。fetchUserAuthenticationCredentialsのような長い識別子では、after.marginによる微調整も虚しく、視認性が著しく低下した。

実際の表示はこんな状態になった：

フェーズ2の動作確認スクリーンショット。日本語と英語が部分的に重なっている

ClaudeとGeminiとの会話でも、この「物理的な限界」が最大の懸念となった。

Insight: 対訳モードへのピボットとFlashモデルの採用

詰まっていたところに、Geminiから「UI描画モードを根本から見直すべき」という提言が入った。Decoration APIの「重ね書き」に固執せず、VS Code標準のInlay Hints APIへ移行する——英語の横に日本語をルビのように添える「対訳モード」だ。これで文字の重なりは数学的にゼロになる。

あわせてモデルの選定も見直した。「Gemini 2.5 Proより3.0 Flashの方が応答速度とコスト面で良くない？」とGeminiに相談したところ、回答は「大正解」。IDE拡張機能においてレイテンシは命だし、Gemini Flashの速度なら、ファイルを開いた瞬間に非同期で翻訳を完了できる。

これにより：

// Before（Decoration API・没入モード）
// 文字が重なってぐちゃぐちゃになる

// After（Inlay Hints API・対訳モード）
const user ユーザー取得 = await fetchUser ユーザー取得 ('user-123');

まさに「正鵠を射る」発見だった。

既存ツールとの比較を整理するとこうなる：

比較項目 既存の翻訳拡張機能 既存のAIリファクタツール Rosetta Lens（仮想レイヤー）
文脈理解 低（単なる辞書引き） 高（AST/LLM連携） 高（LSP/AST/LLM連携）
安全性 高（非破壊的） 低（破壊的置換） 最高（Read-Only表示のみ）
学習効果 低（都度ホバーが必要） 低（英語を学べない） 高（英語と日本語を瞬時にトグル）

Solution: Inlay Hints APIとSQLiteキャッシュによる堅牢な実装

最終的に、Gemini 3 Flash（gemini-3-flash-preview）をエンジンに据え、Inlay Hints APIによる非破壊的な翻訳表示を実装した。APIコストを最小化するため、L1（LRUメモリキャッシュ）とL2（SQLite永続化キャッシュ）の2層構造を導入。これにより、2回目以降のファイル展開は「ゼロレイテンシ」を実現した。

// Inlay Hints APIを用いた非破壊的翻訳の核心部
vscode.languages.registerInlayHintsProvider(selector, {
  provideInlayHints(document, range) {
    const symbols = getCachedSymbols(document.uri);
    return symbols.map(s => {
      const hint = new vscode.InlayHint(s.location.range.start, ` ${s.translation}`);
      hint.tooltip = new vscode.MarkdownString(`**${s.original}** の翻訳: ${s.translation} 🔍 Rosetta Lens`);
      return hint;
    });
  }
});

元の英語コードを1バイトも書き換えることなく、エディタ上に文脈を汲み取った日本語を重畳できるようになった。X-Rayホバーで元の英語も確認できる「Rosetta Lens 0.1.0」が完成した。

完成後の動作はこんな感じ：

フェーズ6の動作確認スクリーンショット。英語の前に日本語がルビのように並んでいる

使い方

前提条件

インストール

VS Code Marketplace（公開準備中）からインストール予定。現在はGitHubから直接インストールできる：

  1. GitHubリリースページから rosetta-lens-0.1.0.vsix をダウンロード
  2. 以下のコマンドでインストール：
code --install-extension rosetta-lens-0.1.0.vsix

セットアップ

  1. Ctrl+,（Mac: Cmd+,）で設定を開く
  2. rosettaLens で検索
  3. Gemini Api Key に取得したAPIキーを貼り付ける
{
  "rosettaLens.geminiApiKey": "AIza...",
  "rosettaLens.geminiModel": "gemini-3-flash-preview"
}

基本的な使い方

  1. TypeScript / JavaScript / Python ファイルを開く
  2. Ctrl+Shift+L（Mac: Cmd+Shift+L）でトグル
  3. 識別子の前に日本語翻訳がルビのように表示される
  4. 識別子にホバーすると元の英語名と翻訳の根拠が表示される（X-Ray Hover）
  5. もう一度 Ctrl+Shift+L で元の英語表示に戻る

キャッシュについて

  • 一度翻訳した結果はSQLiteにキャッシュされる（デフォルト7日間）
  • 2回目以降はAPIを呼ばずにゼロレイテンシで表示
  • キャッシュをクリアしたい場合は Ctrl+Shift+P → Rosetta Lens: Clear Cache

注意事項

  • VS Codeの editor.inlayHints.enabled が有効になっていることを確認（デフォルトはON）
  • 対応言語：TypeScript / JavaScript / Python（初期リリース）
  • APIキーはVS Code設定に保存されるためGitには上がらない

まとめ・今後

「コードは書けるけど読めない」Vibe Coder向けのツールを、Claude × Geminiの分業体制で1日でゼロから完成させた。

開発で気づいたのは、AIツールの役割分担が自然に生まれること。Geminiがリスクヘッジと提言、Claude Codeが実装、Claudeが設計とレビューという流れが気持ちよくはまった。

今後の展開としては：

  • VS Code Marketplace への正式公開
  • 没入モード（英語を完全に隠すモード）の実装
  • カスタム辞書（ドメイン固有語の登録）機能
  • JetBrains IDE対応

APIキーは自分で用意する必要があるけど、Gemini無料枠で十分動く。ぜひ試してみてほしい。

感想・バグ報告・機能要望はコメントか GitHub Issues へ！

この記事自体、チャットログをAIで変換して生成しています。開発の全ログは別途公開予定。

BACK TO WRITING