バイブスだけでVScode拡張機能をリリースする
世はまさに大AI時代。
何か作りたい！というバイブスさえあれば誰でも何だって作れる時代になりました。
ちょうどCursorを色々カスタマイズしたいなーと思っていたので、試しにバイブコーディングでVScode拡張機能を作ってみます。
バイブコーディング
自然言語で指示を出すのみで開発を進めること。コードのレビューは一切せず、成果物の動作だけを見て判断する
リリースしたもの
Code Binという拡張機能を作ってみました。その名の通り、削除したコードを蓄積し、いつでも戻せるようにする機能です。Gitの「hunkを戻す」に近いことができます。
何個か前に削除したコードを戻したい！というときに、⌘+Zの連打で戻ると戻さなくていいコードも戻ってしまいその後の修正が面倒ですよね。
かといってgitのhunkを戻す機能を使おうとすると、一度エディタを出てSource Treeなどアプリケーションに移動しないといけません。（コマンドラインでgit操作してる人は別）
Code Binは削除したコードを100件までサイドバーに表示し、ワンクリックで復元できるのでエディタ内で操作を完結できます。
⌘+Z連打の副作用もアプリケーション移動の手間もカット。作業効率化に0.1%くらいは貢献するかもしれません。
AIに全てお任せする
拡張機能作成にあたり、コーディングはAIに全て任せました。READMEまで含めて全てMade by AIです。アイコンもCanvaの画像生成AIで作ったので、リリース作業以外は本当にぜーんぶAIです。エンジニアって何だっけ...？
今回はCursorでClaude-4-sonnetを使いました。
リリースまで含めて、作成にかかった時間は合計３時間くらいです。
余談ですが、VScodeの拡張機能ってwebの言語ではできなそうだと勝手に思い込んでいたのですが、普通にJSで作れました。
要件は細かく砕いて投げる
まず初めに機能要件を考えておいて、それを箇条書きで並べてプロンプトとします。これだけで最低限動くものは作ってくれるので、動作を確認しながら、修正や追加の要件をポンポンと指示していく。これの繰り返しで完成まで持っていきます。
自分とAIの間で認識の齟齬があると手戻りが多くなるので、要件を投げる時は細かく分解して、やり過ぎなくらい丁寧に説明するのがよいです。
この辺りは人に頼むときも同じですね。
機能ごとにコミットする
バイブコーディングを進める際は、何か機能ができるたびに細かくコミットを重ねていくのが良いです。
機能２を作ったら機能１が動かなくなったなんてことがよくあるので、すぐに戻せるようにしておきましょう。
機能１の時点でコミットしていないと、機能２を作ったときに機能１が破壊されて結局全部パー、半泣きで機能１からやり直すみたいなことが起こり得ます。
バイブスがあるうちにやり切る
これはバイブコーディングというより個人開発あるあるだと思うのですが、「こんなのあったら面白そうだな、作りたい！」というバイブスの灯火が消えないうちにMVPをリリースすることが大切です。
今までもアプリなど何個か個人開発してきましたが、初めはあんなに自分のアイデアに自信があったのに、日が経つごとにモチベーションが落ちてきて、だんだんと正気を取り戻してしまいます。
正気に戻る前に、最低限の機能でいいので何かしら作りきって世の中に出しちゃいましょう。出して実際に使っているうちに、もっとこうしたいなどの欲求が出てきて再びバイブスが湧いてきます。
最近はClaude Code Actionなども登場し、機能をissueとして建てておけば自分が仕事中でもAIが勝手にやってくれる時代です。うまく活用して、即日リリースくらいの勢いで取り組みたいですね！
アイデア次第で面白いことができそう
今回はシンプルな機能の拡張機能を作ってみましたが、VScode拡張はWebviewを組み込めたりサイドバーを好き放題できたりするようなので、アイデア次第でなかなか面白いことができそうだなと思いました。
作ってる人もあまりいない（筆者体感）ので、ちょっとドヤれるのも嬉しいですね。
本当にバイブスだけで出来てしまったので、ぜひ皆さんもVScode拡張をリリースしてみてください！
Discussion