こんにちは。
デザイナー兼フロントエンジニアのRomotです。
AIがずっと熱いです。AIエディタなCursorもとても強い。
最近エージェントとかあるけど実際どうなの？ということで。
ほぼ全自動で開発できないかをCursor AgentとOpenAI o1でディレクトリをMarkdown化するVSCode拡張をつくって公開してみました。
できたもの: Matomeru: ディレクトリ構造とファイル内容をMarkdown形式でまとめるVSCode拡張機能です。
https://marketplace.visualstudio.com/items?itemName=romot.matomeru
ざっくり結論
- 可能だけど、エラーのモグラ叩きや無駄なコード生成で大変なことになる
- オーバーエンジニアリングしすぎて遠回り
- コードが一瞬で増えすぎて人間の手に負えない
コーディングは1つの問題を高精度に解ければいいのではなく、
複数の依存し合う問題を連続で解いていく作業だからちょっと面倒なんだろうな……みたいな感想です。
人間とAIと
人間はこんな感じです。
- TypeScriptが一応読み書きできるフロントエンドエンジニア
- CursorはTabやChatを使っていたものの、Composer/Agentは暴走しがちで使いきれてない
- 今回はAIの間に挟まってコピペを担当
AIはこんな感じです。
- 指示・レビュワー・暴走停止役: OpenAI o1
- 実際のコードを書く役: Cursor AgentのClaude3.5 Sonnet
Cursor AgentはYOLOモード(コマンド実行可能)です。
つくるもの
実験対象となったVSCode拡張の主な機能は下記のとおりです。
- 選択したディレクトリ内のファイルを一括でMarkdown化
- ファイル名やディレクトリ構造をMarkdownの中で見やすくまとめる
- 右クリックからエディタで開く・クリップボードにコピーする・おまけでChatGPTで開ける
まずは「とにかくコードを自動生成させる」ことが主目的だったため、機能としては極めてシンプルです。
どれだけ全自動化できるかを検証。
ルール
- OpenAIのo1 が指示（命令）を生成し、 Claude3.5Sonnet（Cursor Agent） がコードを自動生成する
- コピペで人間が渡す
- 暴走や無限ループが起こったら、人間がストップかけてリストア
- o1にコードコピペして指示を仰ぐ
最終的に全自動で生成されたコードをどこまで使えるのかを検証します。
実装プロセスを4段階で振り返る
フェーズ1：序盤 ― 単純な実装
最初は「ディレクトリを再帰探索してMarkdown化する」機能を非常にシンプルに実装。
o1に上記のざっくり仕様を伝えて指示書をつくってもらいCursor Agentがコードを生成。
VSCode拡張のpackage.jsonやextension.tsなど、最低限の構成を揃えるところからスタート。
この時点ではほぼ手動でエラーを直すことなくスムーズに進み意外といけるという感触でした。
フェーズ2：前半 ― o1とSonnetが改善案を次々に提案
シンプルな機能が完成すると、Cursor Agentが「もっと良い設計あるぞ」「テスト書きまくろう」「UX微妙じゃない？」と改善案を自動で提案。
o1が「じゃあそれもやってみよう」と指示を出すと、AIが一気に大量のコードを生成してリファクタリングを行う。
しかし、別のフォルダ構造との衝突やメソッド重複によるエラーが頻発。
AIがどんどん仕様を追加して勝手に作り込んでいる」状態になり、コードがあっという間に肥大化。
例: ディレクトリ探索ロジックを拡張 → 同時にキャッシュ機能や設定管理を追加 → いつの間にかsettings.jsonを編集し始める → 実際の挙動を確認するとエラー続出 … のループ
特にまじめにテストを作り込みすぎ、モックができず死亡しがちでした。
フェーズ3：中盤 ― 怒涛のコード量
改善案を次々に取り込みすぎた結果、コード量が膨大に。
その分、コードレビューも困難に。どこで何をしているか分からなくなり、現場猫で適当にヨシ！してしまう。
LLM自身もエラーを修正しきれない状況。
1回のコミットでこれである。
なぜかGitリポジトリの管理まわりまで手を出し始め、.gitignoreを意図せず書き換える上にpushするなど、トラブル発生。
- 約1日かけて全自動実装を走らせただけでAPI使用量がそこそこ膨れ上がる。
約$62相当を費やした計算になりました……。
フェーズ4：後半 ― 人間とo1によるリセット＆シンプル化
どうにもならないのでルール違反でちょっとだけ介入。
もう一旦すべて捨てて、シンプルに作り直して！ とo1に指示したところ、
「今までの実装を無視して」とか強硬なことを言い出す。
Cursor Agentくんはしぶしぶめにリセットするが、また膨れ上がる。
「過去の実装を無視して、最小限の機能だけもう一回作り直して」と最初から作り直しに。
- 結果的には、「暴走した大規模実装」と「最小限で構成し直した実装」の2つが生成される形に。
でもなんだかんだでできました！
コミットログ:
https://github.com/romot-co/matomeru/commits/main/
実験中に起こったあれこれ
親切心？から勝手に仕様を変える
わりと起こる。ひどい。
.gitignoreの変更ミス...
全自動の流れでVSCode拡張を修正する際、.gitignoreで除外されなくなる。
しかも勝手にpushした。
どうでもいいファイルしかなかったものの、とても怖い。
VSCode拡張のドキュメントは無視する
ウェブ読めたりdocにできますが、基本忘れます。
実験中に起こったすごいなーなこと
アイコンは勝手につくる
SVGで勝手に生成して、PNGに勝手に変換するようpackage.jsonに設定
git操作やVSCode Marketplaceへのパブリッシュまでできる
セキュリティリスクとの兼ね合いですが、すごい。
まとめ
横で勝手につくってくれるのはすごいです。
自動開発への期待も高まります。
それでも今はまだ実用的ではないかもです。
しかし進化が超速すぎるので、すぐ状況は変わりそうです。
もし同様のチャレンジをされた方がいれば、ぜひ経験談をシェアしていただけると嬉しいです！
この記事が少しでも「AIを活用した自動開発」のヒントになれば幸いです。
よければ使ってみてください。
VSCode拡張: https://marketplace.visualstudio.com/items?itemName=romot.matomeru
リポジトリ: https://github.com/romot-co/matomeru/