Agentとのペアプロ：ワイヤーフレームとe2eで実現する継続的な開発
はじめに
今回は「Vibe Coding」よりもかっちりしたプロセスで
より確実で継続的にAgentに実装させる方法を検討してみました。
全体像
用意するもの
- ワイヤーフレーム
- e2eファイル（仕様が書いていればなんでも良い）
- Agent（今回はGitHub Copilot Agentにやらせています。）
プロセス
開発プロセスについて述べていきます。
Coding Flow
学びの機会を得るためのフィードバックサイクル
1. デザインとe2eファイルを元に実装させる
実行時の設定
- Agent：GitHub Copilot Agent
- モデル：Claude 3.7 Sonnet
このステップでは、ワイヤーフレームとe2eファイルを同時にAgentに提示します。
# 指示例
以下のワイヤーフレームと仕様に基づいてReactコンポーネントを実装してください
1. ワイヤーフレーム: [画像URL]
2. e2eテスト仕様: [e2eファイルのパス]
この方法の利点は、Agentが視覚的なデザインと機能仕様を同時に理解できることです。
e2eファイルにはUIの操作方法や期待される動作が記述されているため、
Agentは単なる見た目だけでなく、実際の機能やユーザーフローも理解して実装してくれます。
2. 対応内容についてレビューする ※こまめにコミット
- デザインに修正が必要な場合はここで対応
- 実装の修正を自前でする時はdeepwikiなど駆使して対応
- レビュー指示は小さな単位で行う
- 一度に大量の変更をレビューするのはコスパ悪い
- 1つの機能や1つのUIコンポーネントなど、明確な単位で区切る
- 変更をこまめにコミットする利点
- 問題が発生した時に切り戻しやすい
- 変更の意図が明確になり、後から振り返りやすい
- フィードバックのサイクルを短くできる
- 反復回数も増えるので我々のドメイン理解も進むす
レビュー結果をAgentにフィードバックする際は、具体的な修正点と理由を明確に伝えます
# 例
以下レビューです。対応してください。
- フォームの送信ボタンがワイヤーフレームではボタンが右寄せになっていますが、実装では中央寄せになっています
3. デザインを最終調整させる
初期実装を基にして、プロダクションのデザインに調整していくフェーズです。
ここでは細部のデザイン調整やアニメーション、インタラクションの改善などを行います。
4. e2e実行
最終段階として、当初設定したe2eテストを実行し、すべての機能要件が満たされているかを検証します。
もし修正が必要な場合はAgentに指示するもよし、開発者が修正してもよしです。
所感
今回はシステムに載せられる品質（e2e相当）を意識した方法を模索し
結論としては可能だなという所感を得ることができました。
特にCoding Flowの2で記載したようなベイビーステップで進める方法は
Agentが小さな修正にとどめてくれる事に加え、開発者自身もコードおよびドメインを理解する機会を増やせるので
ペアプロのような感覚がありました。
また、常に実装後のプレビューを触りながら指示出来るため、コードベースで得た所感ではなく
ユーザー価値に近い指摘が高速で回せるところも良さを感じました。
最終的に10回くらいのやり取りで1ページ（API連携は4回くらい）は実装できたので
開発速度も上げられたと思います。
まとめ
実践で得られた知見としては
-
明確な要件定義の重要性
ワイヤーフレームとe2eテストを組み合わせることで、Agentに「何を作るべきか」を明確に伝えることができ実装のズレを大幅に減らすことが可能 -
フィードバックの質と頻度
小さな変更ごとにレビューとフィードバックを行うことで、問題の早期発見と修正が可能 -
人間とAIの役割分担
この手法では、AIが実装の詳細を担当し、人間は品質管理やUXの最適化に集中できます。この役割分担により、それぞれの強みを活かした効率的な開発が可能
今後の課題
今後の課題としては、TDDを意識した開発ができておらず、後から足していく状態なので
今回のプロセスにどう組み込むか検討してみたいところです。
Discussion