claude code を使って vscode 拡張機能を作ってみた体験談・備忘録です。
アイデアだけ伝えてほぼ全部AIに丸投げしていて、筆者は要所要所で方針決定したくらいです。
他のAIツールは比較できるほど使っていないので、claude code で自分用のツールを作るとこんな感じ、という話だけになっています。
目次
概要
vscode vim のように、vscode 上に vim ライクな操作を実現する拡張機能を claude code に作らせてみました。
neovim をメインで使っていたけれどもAI関連では vscode の方が使い勝手が良く、切り替えが非常に手間になっていた問題を解決しようとしたものです。
機能の詳細は別記事にまとめているので、ここでは開発体験についてまとめます。
リンク先の記事で使っている GIF も、AIに作ってもらったツールで編集しました。
リポジトリはこちら。
１日２時間 * ２週間くらいでこのくらいのものが作れています。
大まかな流れ
ある程度具体的な手順を残しておきます。
- 「vim っぽい拡張機能作って」で投げてみる
- ドキュメントを作らせる
- CI 整備
- init.vim からイシューを作らせる
- イシューの対応を丸投げ
- 気になったところのイシューを新規作成して対応
各工程でこまめに git commit を行うことは意識しました。
それぞれの詳細
1. 「vim っぽい拡張機能作って」で投げてみる
これだけで、vscode 拡張機能の雛形ができてしまいました。
モードの概念、hjklでの移動といった基本的なところに絞って実装してくれています。
2. ドキュメントを作らせる
README や、念のために経緯を記した文書、アーキテクチャに関する文書を作成させました。
アーキテクチャは mermaid を使ってわかりやすく書いてくれました。
「動作機序に関する文書を作って」
「経緯にあたる部分は history.md に分けて」
「README にアーキテクチャの情報が入っているから architecture.md に入れて」
といった指示をしています。
architecture.mdがとても良い感じです。ただし、これは指示するまで作ってくれませんでした。
(↓のような図も mermaid で書いてくれる)
3. CI 整備
CI の整備も、claude code に投げました。
「イシューテンプレートを作って」「自動テストを作って」「CIを整備して」といった指示で作らせています。
イシューテンプレートに入力欄を作れること、事前に読んで置くべき資料を提示できることを初めて知りました。
(バグ報告テンプレート)
(下二つが参考文書)
テストケースも丸投げですが、可読性も良いです。
vim なので、テストケースがほとんど "バッファ、カーソル位置、入力コマンド、期待される結果" という組になり、わかりやすかったです。
CLIでのテストしか作っておらず、追って vscode の UI でのテストも追加する必要がありますが、
自分用の機能なのでそこは後回しにしました。
4. init.vim からイシューを作らせる
自分の init.vim (vim の設定ファイル) を渡して「今使っている vim に操作感を近づけたい」という指示を出すと、１３個のイシュー（うち１つは管理用のイシュー）を作成してくれました。
タグもAIが作ってくれたものです。
ウィンドウ分割・タブ移動を重視したコマンド群の実装、vim プラグインの使い勝手を vscode に持ち込むイシューが作成されました。
5. イシューの対応を丸投げ
「#1 の対応をしましょう」とかで丸投げしました。
mcp サーバは使っておらず、claude code が gh コマンドなどでイシューの内容を読み取って対応してくれました。
何をしたいかが曖昧な部分や、選択肢が複数あるのでどれかを選ばないといけない部分は選択肢を出してくれます。
6. 気になったところのイシューを新規作成して対応
バグ報告、機能追加、改善要望をイシューテンプレートから作って、「#~ の対応をしましょう」で対応させる流れで進めました。
気になったところをとりあえずメモ書きしておいたのですが、メモを読ませればいい感じにイシューにまとめ直してくれるのでとてもありがたかったです。
「独自にターミナルモードを実装する？」というメモから、画像のような立派なイシューを立ててくれました。
「.vsix ファイルを作成、導入する手順を作成しましょう」で .vsix (拡張機能のパッケージ)を作らせた時には、CIへの組み込みも一緒にやってくれました。
使ってみて感じた強みと注意点
強み
強み1: 抽象的な指示をいい感じに処理してくれる
結構曖昧な指示からでも適切に意図を汲んでくれます。感覚的に指示した時にも感覚と合致するものを作ってくれる、という意味でいい感じに処理してくれます。
「ctrl+enter でAI呼び出しをしているが、使いにくいから別のキーにしたい」という指示で、vscode や mac で使われている組み合わせを調べ、右手だけ、左手だけで打てるコマンドの候補を出してくれます。
強み2: コードの品質が高い
１年くらい前に使っていたAIエージェントだと明らかに無駄なコードやチグハグなコードが多かった印象ですが、今回はぱっと見でわかるほどの問題点はなさそうな感じです。
vscode + vim という組み合わせが比較的やりやすいという側面はありますが。
強み3: 記録文書の作成がラク
かなり強い点だと感じています。
人の手で作成すると、大事なのはわかっていてもどうしても大変で、労力に対して効果が見合っていないように感じることが多かったです。
しかしAIに記録を作らせると手間がかからないので、コスパに優れた作業になります。
README や設計資料だけでなく、github のイシューや git コメントまで、とりあえずいい感じに作ってくれるのでとてもラクです。
注意点
注意点1: AIを疑う姿勢を持つ
大量のコードが生成されたり、指示していない関連文書の修正・CIの修正までやってくれたりすることがあります。
問題のあるコードがないかどうか、意図していない変更がないかどうかのチェックは必要でした。
意図を汲んでいい感じに作ってくれるとはいえ限界はあるので、過信はしないようにしましょう。
AIが作ってくれる自動テストがローカルの CLI で実行可能なもの中心になるので、手動テストが必要なものがないか念押ししたり、github actions に載せた時に失敗しないか確認したりといった点は注意した方が良いです。
AIが保持できるコンテクストにも限界があるので、古い指示が無視されることもあります。
注意点2: 知らないものは実装できない
全くというわけではないですが、知らないものは実装しないままになりがちだと思います。
AIも指示された部分に絞って対応してくるので、指示されていないものは気にしません。
今回のケースだと、CI関連のものは「自動テストを作って」「CIの仕組みを整備して」といった指示で作らせています。他に便利な仕組みがあったとしても無視されるような指示ですね。
「プロジェクト管理として必要なものを作って」の指示があれば作ってくれるでしょうが、そういう指示が有効だという知識は必要になるでしょう。
「管理できなくなる可能性が高いので設計文書から作りましょう」と開始段階で言ってくれることは稀だと思います。
注意点3: 確認に時間をかけるのを恐れない
AIに任せると、ちょっとのプロンプトで大量のコードや文章が生成されます。
プロンプトの段階でイメージしていた作業量を大きく超えたり、AIの作業速度に合わせようとしてしまったり、さっさと次の機能まで実装してしまいたくなったりということが起こります。
そうして確認が甘いまま進めてしまいたくなる場面が多々ありました。
ただ、落ち着いて考えてみると、１人日かけるつもりだった作業が１時間でできてしまうなら、確認に６時間かけてもお釣りがきます。
自分にはない視点を持ち込んでくれることも多々あるので、じっくり確認して無駄になることも少ないと思います。
こういった価値観を持って、じっくり確認することを恐れない方が良さそうです。
感想
ほぼ完全にAI頼りで作ってしまえました。
自分で編集するとAIのコンテクストが崩れるかなぁとも思いましたが、ファイルをスキャンして「あなたが編集したんですね」と理解して対応してくれます。
自分用のツールを作るのは本当に簡単になりました。
これだけ簡単に vscode のカスタマイズができるとなると、みんな独自にカスタマイズしていくんだろうな...
AIで自分用にカスタマイズする前提のツールが増えてくるんだろうか、と思ったリもしました。
また、そんなにガチガチではないですが、CIを整備して開発するという点でも良い経験になりました。
入力欄付きのテンプレートがわかりやすかったので、真似していきたいです。
きちんとした開発を目指す、またはそのための勉強としてAIを使う場合は、そういう指示をAIに渡すこと、時間をかけて理解しながら進むことが重要かなと感じました。