チーム名　カフェイン駆動開発

作品名 DocMate

ドキュメントを「探して読む」時間をなくし、VS Code上で理解・実行まで完結させるAIドキュメントアシスタント

1. プロダクト概要

どんな「本当に欲しい」に着目したか

Web開発者が日常的に感じている課題は、「APIの使い方を理解するまでの距離の長さ」です。

MDNなどの公式ドキュメントは信頼できる情報源ですが、

• 何を検索すればよいか分からない
• 英語の長文を読むのに時間がかかる
• 説明を理解しても、すぐに試せる環境がない
• エディタとブラウザを何度も行き来してしまう

といった負担が存在します。

DocMateは、「ドキュメントを読むこと」そのものではなく、

“必要な情報を、いまの開発文脈の中で、すぐ理解し試したい”

という開発者の本質的なニーズに着目しました。

---

どんなアプローチで「本当に欲しい」を実現しましたか？

DocMateは、MDNドキュメントを起点として、

1. キーワードやコードから関連ドキュメントを検索
2. 本文を取得しMarkdownとして整理
3. Gemini AIが日本語要約と実行可能なサンプルコードを生成
4. VS CodeのWebview上で、説明・例・実行環境を一体化して表示

という一連の流れをエディタ内で完結させました。

これにより、開発者はブラウザを開くことなく、

理解 → 検証 → 実装

の流れを途切れずに進めることができます。

---

2. プロダクトの機能

🔍 Explain（シンボル単位の解説）

エディタ上でクラス名やメソッド名を右クリックすることで、関連するドキュメントを検索し、

• 日本語要約
• 複数のサンプルコード
• 原文ドキュメントへのリンク

を表示します。

📄 Explain File（ファイル構造の理解）

Explorer上でファイルを右クリックすると、

• ファイルの構造
• 使用されているAPI
• 依存関係の概要

をAIが解析し、全体像を短時間で把握できる形で提示します。

🧪 Interactive Examples（実行可能サンプル）

生成されたサンプルコードはWebview内で編集・実行可能です。

• HTML / CSS
• React
• Vue
• ターミナル系言語

など、言語に応じた実行方法を自動で切り替えます。

⚡ キャッシュ機構

一度取得したドキュメントはURL単位でキャッシュされ、 再表示時は高速に結果を表示します。

---

3. 使い方・デモ

基本的な使い方

▶ シンボルを解説する

1. VS Codeエディタ上で関数やAPI名を右クリック
2. 「DocMate: Explain」を選択
3. Webviewパネルに要約とサンプルが表示される

mp4.mp4

▶ ファイル構造を理解する

1. Explorerでファイルを右クリック
2. 「DocMate: AIで構造と依存関係を解説」を選択

Extension_Development_Host_extension.ts_-_kc3hack2026_-_Visual_Studio_Code_2026-02-21_23-21-44.mp4

動作イメージ

• 要約は日本語で表示
• 各サンプルはセル形式で表示
• 「Run」ボタンでその場で実行可能

---

4. 技術面でのこだわり

📘 ドキュメント解析パイプライン

DocMateは単なるAI要約ツールではなく、

1. キーワードからドキュメントを検索
2. HTMLを取得しMarkdownへ変換
3. Geminiが日本語要約とサンプルコードを生成
4. VS Code Webviewへ反映

という段階的な処理パイプラインを構築しています。

jsdom や turndown を用いてドキュメント構造を崩さずにテキスト化し、 AIが理解しやすい形に整形してから要約処理を行っています。

---

🤖 Geminiとの構造化連携

Geminiには自然文ではなく、

• summary
• examples（title / description / code）

というJSON形式での出力を強制しています。

これにより、

• Webviewへの即時描画
• 実行可能サンプル生成
• キャッシュ保存

が可能になっています。

さらに、AI出力にありがちな

• 不正なエスケープ
• JSON崩れ
• Unicode問題

を補正する独自パーサを実装し、安定した動作を実現しました。

---

🧪 Webview Sandbox実行基盤

DocMateではWebview内に独自のsandbox環境を構築しています。

• iframeベースの安全な実行
• React / Vue CDNの動的読み込み
• 自動セル生成UI

これにより、説明文の中に含まれるサンプルコードを その場で編集・実行できる体験を提供しています。

---

🔁 フォールバック設計

Gemini APIが直接利用できない場合でも、

• プロキシサーバー経由でAI処理を実行

できる設計を採用しています。

これにより、API制限やネットワーク環境に依存しない 柔軟な運用が可能です。

---

5. UI/UX面でのこだわり

🧭 学習の流れを崩さない情報設計

DocMateの画面構成は、開発者の思考順序に合わせて設計されています。

1. 要約（まず理解）
2. 原文リンク（根拠を確認）
3. 実行可能サンプル（実験して理解）

これにより、ブラウザとエディタを行き来する必要がなくなります。

---

🎨 VS Codeネイティブな見た目

WebviewではVS Codeのテーマ変数を使用し、

• ダークテーマ
• ライトテーマ
• カスタムテーマ

でも違和感なく溶け込むUIを実現しました。

---

🧪 “読む”から“触る”への転換

サンプルコードは静的な表示ではなく、

• 編集可能なセル形式
• Runボタンによる即時実行
• 出力の折りたたみ表示

を備えています。

これにより、ドキュメントが「読むもの」から 「試しながら理解するもの」へと変化します。

---

6. 将来の展望

🧱 AIによるドキュメント自動生成

現在は外部ドキュメントの理解支援が中心ですが、 将来的には以下の機能を追加予定です。

• JavaDoc / TSDoc形式のコメント自動生成

---

🌍 対応ソースの拡張

今後は、

• npm公式Docs
• フレームワーク公式サイト
• 社内ドキュメント

など、複数の知識ソースへ対応する予定です。

---

🧠 プロジェクト理解の高度化

将来的には、

• リポジトリ全体の依存関係解析
• コンテキストを考慮したExplain
• コードレビュー支援

など、より高度なAI開発支援ツールへの進化を目指しています。