GitHub Copilot AgentによるVibe CodingでCMSを自作してみた
GitHub Copilot Agent（エディタ上のやつ、Coding Agentではない）を活用して自分のブログ用にCMSを作ってみたよという話です。実際に作ったものについてはこっちを見てね↓
使用したツール
- VSCode
- GitHub Copilot Agent（Proプラン）
- GPT 4.1とかClaude Sonnet 4
このあたりを使用してVibe Codingをしてみました。最近だとClaude Codeとかを使っている人が多そうですが、月に数百ドルも払う余裕がないので安いGitHub Copilotを使いました。それでも結構いけちゃうので、凄い時代になっちゃったなーと思いました。
GitHub CopilotでVibe Codingをするときの工夫
参考になるかはわかりませんが、実際にGitHub Copilotで開発してみてこれはやったほうが良さそうだぞというテクニックを書いてみます。
コーディング規約を読ませる
copilot-instructions.mdにコーディング規約を書いておくことで、生成されるコードの品質がまあまあ安定します。コーディング規約は抽象的なものではなく、具体的な指示を書いたほうが良さそうです。
できるだけGPT-4.1で頑張る
最近、GitHub Copilotに「プレミアムリクエスト」という制度が導入されて、ProプランでもClaude Sonnet 4みたいな高性能モデルは月に300回までしか使えなくなってしまいました（定額内の話）。
なので、Sonnet 4を常に使うのではなく、軽めのタスクはGPT-4.1に回すなどしてうまく使い分けると、コスト的にもバランスが取れて良さそうです。
タスクを分解する
特にGPT-4.1ではありがちなのですが、でかいタスクを一気に投げると、途中で変な方向に進んだりエラーが出たりして、結局人間の手直しが必要になることが多いです。タスクを細かく分けてあげることで、安定して正確にコードを書いてくれる印象があるのでおすすめです。
MCPを活用する
どうしてもAIの情報は最新よりは古くなってしまうので、MCPを活用して最新の情報を取得できるようにすると便利です。MCPもいろいろありますが、とりあえずContext7でも導入しとけば大丈夫だと思います。
実行が終わったら音を鳴らす
たまたまこのポストがTLに流れてきたので試してみたのですが、処理が終わったのに気づかずスマホをいじり続ける…といったことがなくなり、かなり快適になりました。これもcopilot-instructions.mdに書いておけば、自動でやってくれるようになります。好きな効果音とかを流すようにしてみても面白いかもしれません。
課題点
どうしてもコードが乱雑になる
上手い人がやればまた違うのだと思いますが、私の場合はどうしても、機能を追加していくうちにコードがどんどん散らかってしまいました。なので、新しい機能を実装する前に一度リファクタリングを挟んでおいたほうが、後々の開発もスムーズになる気がします。
設計は大事
Vibe Codingに限った話ではないですが、最初の設計や要件定義を丁寧に詰めておくほど、あとからの実装がかなり楽になるなと感じました。逆にここが曖昧だと、途中で手戻りが発生したり、想定外の実装コストがかかったりしてしんどくなってしまいます。これからの時代、設計の重要性はますます高まっていくと思うので意識していきたいなと思いました。
まとめ
こんな感じでVibe Codingをしてみました。大変なこともそれなりにありましたが、普通に開発するより圧倒的に早く開発できて「AIすげえ...」と思いました。あといろいろな投稿を見ていて、Claude Codeに毎月200ドルを払えるような人間になりたいと思いました（）
雑なプロジェクトですが、良ければリポジトリにStarをしてくれると嬉しいです！それでは！
Discussion