<h2 id="%E5%89%8D%E6%8F%90" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E5%89%8D%E6%8F%90" aria-hidden="true"></a> 前提</h2>
<p data-line="2" class="code-line">以下の状態から開始。</p>
<ul data-line="4" class="code-line">
<li data-line="4" class="code-line">VS Code拡張を実装したことはなく、「あーなんかTypeScriptで書けるらしいよね」くらいの知識</li>
<li data-line="5" class="code-line">TypeScript自体は普通に書ける</li>
</ul>
<h2 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" data-line="7" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" aria-hidden="true"></a> 作ったもの</h2>
<p data-line="9" class="code-line">VS Codeで今開いているすべてのファイルを、相対パスでクリップボードにコピーする拡張機能。<br>
Claude Codeを使うときや、コードレビューでコミュニケーションを取る際に、こういう機能が欲しいと思っていたため。<br>
（着想はGitHub Copilot Chatの Add Context -&gt; Open Editors から得た。）</p>
<p data-line="13" class="code-line">成果物はこちら。</p>
<ul data-line="15" class="code-line">
<li data-line="15" class="code-line"><a href="https://github.com/suzukenz/vscode-copy-open-editors" target="_blank" rel="nofollow noopener noreferrer">GitHubリポジトリ</a></li>
<li data-line="16" class="code-line"><a href="https://marketplace.visualstudio.com/items?itemName=suzukenz.copy-open-editors" target="_blank" rel="nofollow noopener noreferrer">VS Code Marketplace</a></li>
</ul>
<h2 id="%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%84%E3%83%BC%E3%83%AB" data-line="18" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%A3%E3%81%9F%E3%83%84%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 使ったツール</h2>
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">VS Code (できたものを見る用)</li>
<li data-line="21" class="code-line">Claude Code</li>
<li data-line="22" class="code-line">ChatGPT (Plusプラン)</li>
</ul>
<h2 id="vibe-coding%E3%81%AE%E6%B5%81%E3%82%8C" data-line="24" class="code-line">
<a class="header-anchor-link" href="#vibe-coding%E3%81%AE%E6%B5%81%E3%82%8C" aria-hidden="true"></a> Vibe Codingの流れ</h2>
<h3 id="1.-vs-code%E6%8B%A1%E5%BC%B5%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%AF%E3%81%98%E3%82%81%E6%96%B9%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B%EF%BC%88ai%E3%81%AB%E8%81%9E%E3%81%8F%EF%BC%89" data-line="26" class="code-line">
<a class="header-anchor-link" href="#1.-vs-code%E6%8B%A1%E5%BC%B5%E9%96%8B%E7%99%BA%E3%81%AE%E3%81%AF%E3%81%98%E3%82%81%E6%96%B9%E3%82%92%E8%AA%BF%E3%81%B9%E3%82%8B%EF%BC%88ai%E3%81%AB%E8%81%9E%E3%81%8F%EF%BC%89" aria-hidden="true"></a> 1. VS Code拡張開発のはじめ方を調べる（AIに聞く）</h3>
<p data-line="28" class="code-line">以下をChatGPT o3に聞いて、前提知識として頭に入れた。</p>
<ul data-line="30" class="code-line">
<li data-line="30" class="code-line">リポジトリ名、プロジェクト名のアイデア（命名ルールはあるか、デファクトはあるか）</li>
<li data-line="31" class="code-line">VS Code拡張でもテストは書けるかどうか</li>
<li data-line="32" class="code-line">（もうすでに忘れたけど）なんかコマンド一発でプロジェクトを作れること</li>
</ul>
<h3 id="2.-%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E6%9B%B8%E3%82%92%E4%BD%9C%E3%82%8B" data-line="34" class="code-line">
<a class="header-anchor-link" href="#2.-%E8%A6%81%E4%BB%B6%E5%AE%9A%E7%BE%A9%E6%9B%B8%E3%82%92%E4%BD%9C%E3%82%8B" aria-hidden="true"></a> 2. 要件定義書を作る</h3>
<p data-line="36" class="code-line">o3に以下のような流れで要件定義書(markdown)を作成してもらい、気に入らないところは手で微修正した。</p>
<ol data-line="38" class="code-line">
<li data-line="38" class="code-line">「こういう課題があって」「こういう機能を作りたい」「こうやったらできると思っている」「率直に意見をくれ」 と o3 に投げる</li>
<li data-line="39" class="code-line">(VS Code拡張を作るのが初めてなので当然疑問点があり、) 質問しながら会話の中で方針を固めていく。
<ul data-line="40" class="code-line">
<li data-line="40" class="code-line">例えば今回は VSCode QuickPick の機能を自分は知らなくて、o3 のおかげで初めてそれを使う方針案が出てきた。</li>
</ul>
</li>
<li data-line="41" class="code-line">方針が固まったら、「要件定義書の叩き台を完全なMarkdownファイルとして出力して」とお願いする。</li>
<li data-line="42" class="code-line">手で直した方が早い部分は手で微修正して完成させる。</li>
</ol>
<p data-line="44" class="code-line">ちなみに成果物は<a href="https://github.com/suzukenz/vscode-copy-open-editors/blob/main/docs/project-brief.md" target="_blank" rel="nofollow noopener noreferrer">こちら</a>。</p>
<h3 id="3.-coding%E9%96%8B%E5%A7%8B" data-line="46" class="code-line">
<a class="header-anchor-link" href="#3.-coding%E9%96%8B%E5%A7%8B" aria-hidden="true"></a> 3. Coding開始</h3>
<ol data-line="48" class="code-line">
<li data-line="48" class="code-line">事前に「VS Code拡張開発のはじめ方」を調べていたので、それをClaude Codeに依頼。</li>
<li data-line="49" class="code-line">Claude Codeに上記の「要件定義書を理解して」と依頼。</li>
<li data-line="50" class="code-line">あとは要件定義書に基づいて実装してもらう</li>
<li data-line="51" class="code-line">途中で、うまくいかないことや学びがあったらプロジェクトの CLAUDE.md に追記していく
<ul data-line="52" class="code-line">
<li data-line="52" class="code-line">例えば、最初は実装後にコンパイルやリントをしてくれず、エラーが出てしまっていたので、自動で行うようにルールを追記した。</li>
</ul>
</li>
<li data-line="53" class="code-line">CIとかテストもよしなに指示しながら実装してもらった。（テストは癖があって何度かハマった）
<ul data-line="54" class="code-line">
<li data-line="54" class="code-line">(当然だけど)うまくいったところで都度、セーブポイント的にcommitすると良い感じだった。</li>
</ul>
</li>
</ol>
<h3 id="4.-publish" data-line="56" class="code-line">
<a class="header-anchor-link" href="#4.-publish" aria-hidden="true"></a> 4. Publish</h3>
<p data-line="58" class="code-line">完成してテストも通ったら、VS Code MarketplaceにPublishした。Publishの仕方も o3 と o4 に聞きながら進めた。(Claude Codeを使わなかったのはコスト節約のため)</p>
<p data-line="60" class="code-line">アイコンもChat GPTに作ってもらった。</p>
<h2 id="%E6%84%9F%E6%83%B3" data-line="62" class="code-line">
<a class="header-anchor-link" href="#%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 感想</h2>
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line">自分も知識がなくて、ネット上にもそれほど情報がない部分はやはりハマるパターンがあった。今回だとテストの部分。
<ul data-line="65" class="code-line">
<li data-line="65" class="code-line">Claude Codeにテスト実行させると、VS Code拡張テストの場合標準出力エラーが良く出るので失敗したと見なされて、めちゃくちゃにされることがあってハマった。</li>
</ul>
</li>
<li data-line="66" class="code-line">逆に、事前知識がほぼ無かったにもかかわらず「とりあえず動くもの」は10分くらいですぐに完成した。ここで良しとするか、品質を担保するためにもう少し踏ん張るかのところで、エンジニアの介入余地があるんだろうなと思った。</li>
<li data-line="67" class="code-line">（まあそうだよねって感じw）</li>
</ul>
<p data-line="69" class="code-line">おわり</p>


Vibe CodingでVSCode拡張を作った時にやったこと

1. VS Code拡張開発のはじめ方を調べる（AIに聞く）

Discussion