💭

100%バイブコーディングでAIエージェント組み込みアプリを作ってみた

に公開
AIエージェント
Vibe Coding
tech

はじめに

https://github.com/nnsi/ai-assistant-scheduler
冬休みの宿題として、予定を入力するとAIエージェントが良い感じの補足情報を検索して教えてくれるカレンダーを作ってみました。手書きのコードが1文字もない、全てClaude Codeに任せた100%バイブコーディングです。

ちなみに1/1~1/2は旅行に出かけており、ほぼスマホからClaude Code on the Webでの開発となっています。

技術スタック

  • フロントエンド: TypeScript/React
  • バックエンド: TypeScript/Hono/Drizzle/Mastra
  • インフラ: Cloudflare Workers/D1/KV/Terraform

基本的には最悪私が読んで指示を出せるからということで得意な言語やライブラリ/フレームワークを選択していますが、Terraformに関しては完全に任せっきりでした。GUIをぽちぽちしたくないという理由だけでIaCのコードを生成してもらいましたが、私に勘所が全く無い状態でも数回のやりとりでインフラリソースが作成されてかなり驚いています。

API設計

Claude Codeには初期段階で以下のように依頼しました:

  • クリーンアーキテクチャ
  • Package by Feature
  • class利用禁止・関数型風

それぞれ「分割しやすさ」「捨てやすさ」「テストのしやすさ」が、全てAI生成と相性が良いと考えて選択しました。バイブコーディングで開発を進めていく場合、AIが自分で間違いに気付きやすい仕組みを作ることが重要だと考えています。

結果的に小さいアプリケーションにも関わらずファイル数がやたら多いですが、AIに全てを任せるのであればこれくらい細かく刻んだ方が修正による影響範囲も小さく済み、特に並列で機能開発を行う際に有利に進められるなと思いました。

画面設計

Presentational/Container Componentに分割してテストしやすくしようね、くらいを伝えただけで後は全部Claude Codeがよしなに作ってくれました。すごいですね。

今回はAIエージェントを組み込んだアプリを作りたい、が主目的だったのでここは深いこと考えてないです…。

進め方

  1. initial commit
    1. Planモードで「カレンダーに予定を入れたらAIが情報補完してくれるアプリを作りたい。私にインタビューしながら要件定義を進めて」みたいな感じでざっくり設計を進め、要件定義書を作成
    2. 要件定義書→API設計・画面設計・インフラ設計書を作成
    3. 各設計書からタスクリストを作成
  2. impl
    1. タスクリストを全部完了させて、と伝える
    2. できた
  3. アプリケーションをWebに公開しても問題ないように整えていく（認証、セキュリティ周り）
  4. APIキーを刺して動作確認、プロンプト調整したり
  5. 手動で行う必要があるWeb公開用のタスクリストをぽちぽち埋めていく
  6. CI/CDを試行錯誤しながら進めて完了

セッション毎に日記を書かせているので、興味がある方は日記を読んでいただくとより細かいところが把握出来るかもしれません。

やっておくと良かったこと

Claude Code on the Webの中でテスト/動作確認が完結するように作っていく

APIのユニットテスト/結合テストもそうですが、やはり直接curlを叩いての動作確認やフロントエンドまで含めたE2EテストもClaude Code on the Webで行えるようになると一気に任せられる範囲が広がります。

今回のアプリでは、認証をバイパスしてcurlを叩けるようにしたりテストではオンメモリのDBを利用したりなどの工夫を行っています。

Skills/SubagentsをどんどんClaude Code自身に作らせていく

今回はセッション毎に日記を書いてもらっていたので、たびたび日記を振り返らせてSkillsやSubagentsを作らせていました。Claude Code自身が必要だと思ったSkillsやSubagentsを作るので、人間が用意するよりも効率的なものが作れていそうな気がします。

Claude Codeの拡張機能は他にもCommandやHooks、Pluginなどが存在し何をどの拡張機能に配置するべきかは良く使い込まないと判断が難しいです。その辺もClaude Codeに任せることで、最適解に近い形で拡張機能を利用出来るようになるのではないでしょうか。

レビューは役割分担をさせ、他のエージェントも混ぜる

初期段階ではローカル開発環境でCodex MCPを導入し、レビューをCodexにもお願いするようにしています。Claude Codeにもレビューもしつつ、結果を統合した上で私もレビュー内容をチェックし何を修正するべきかを依頼しています。今回はセキュリティレビュアーをSubagentsとして用意しましたが、割とどうでも良いことをセキュリティリスク高として伝えてくる場合があるのでここはまだ人間が判断した方が効率的かもしれません。

雑多な気付き

Commitをフックにテストを走らせた方が良い

機能追加やリファクタを行う分には何も言わなくてもテスト/型チェックまで含めて実行してくれがちですが、細かい修正を依頼すると毎回忘れがちです（含む、人間も）。この辺は仕組みで通らないものはコミットしない、としておくべきでした。

この辺も頼んだらやってくれるので、面倒くさがらずに依頼します。あとで。

API使用料が思ったより安かった

アプリで利用するAIエージェントのモデルはGemini 2.5 Flashを使っていますが、アプリが完成してからプロンプトの調整で結構叩いていてもまだ$3にも到達していません。今回は会社の学習支援制度を用いてそれなりにOpenRouterのクレジットを購入しているのですが、もっとチャレンジ出来そうな感じです。

おわりに

AIに作らせやすい設計を考えながら開発していくことで、100%バイブコーディングでも継続的に開発が出来るアプリケーション開発を行うことが出来ました。また、副次的な効果でClaude Code on the Webによる機能開発も安心して行えるようになりました。

そして、「AIに作らせやすく、バグを発見しやすく、拡張しやすい設計をする」ことが安心してバイブコーディングを行うために重要で、ここに関しては今までのエンジニアとしての経験が生きているなと感じました。今年は個人でたくさん新規開発を行い、設計スキルをより磨いていきたいと思います。

Discussion