VSCodeのフォークであるCursorに機能拡張ClineをインストールしてAIエージェント機能によるwebアプリ開発自動化について検証してみました。やったことの概要は以下の通りです。
- アプリケーションの仕様書を書く（たった10行程度）
- Clineに仕様書を共有し開発を依頼する
- AIエージェントから実行を提案される内容についてひたすら許可する
- わずか30分程度でローカルDBに任意のクエリを発行するアプリの動作確認まで完了
Clineに開発依頼を行った内容
以下の内容で開発仕様についてテキストにまとめました。（ユーザ名とパスワード以外はそのまま）
ちなみにローカルのMySQLサーバ導入とDB、テーブル作成までは前回の作業ですでに実施済でした。
以下の仕様でwebアプリケーションを開発したい
・WebアプリケーションのUIにクエリ入力フィールドを持ち、クエリを入力することができる
・クエリ入力フィールドの下にクエリ実行ボタンを配置し、クエリ実行ボタンを押すと画面上下部にクエリ結果を返す
・すでにローカル環境にはmysqlサーバが起動しておりDBへの接続は以下のパラメータで行うことができる
・接続先DB名: dev_db001
・接続ユーザ: <ユーザ名>
・パスワード: <パスワード>
・開発フレームワークはstreamlitを採用する
・プロジェクトディレクトリ: Cursor基準ディレクトリ配下に’MyQueryPad001’という名前で作成する
上記の内容で開発してwebブラウザでアプリを起動してほしい。以下Clineからのプロンプトと発行を求められたコマンドをそのまま掲載
提示される各プロンプトについて内容を確認しながらもひたすら実行許可やSaveボタンを押し続けました。コーディングが自動で行われ、Cursorからターミナルコマンドなども自動発行されます。
動作確認を実施
上記が完了すると自動的にブラウザが立ち上がりアプリの実行が可能になります。（実際には2回自動的に起動しました。1度目の起動後エージェントが改善の自己修正を行い、その後2回目として自動起動が行われました。）下記に動作確認結果についていくつかの画面の内容を共有します。
DB一覧を表示
show databases;
テーブル一覧を表示
show tables;
テーブル定義を表示
desc VBRP;
VBRPの件数を表示
select count(*) from VBRP;
VBRPからランダムに100件取得
SELECT *
FROM VBRP
ORDER BY RAND()
LIMIT 100;
わざとデタラメなコマンドを発行したところエラーメッセージが表示された
さらに、Clineによる本開発記録をドキュメントとして残すように依頼を実施
今回の開発記録をHTMLでキュメント作成するよう依頼を行いました。依頼プロンプトは以下の通りです。
無事起動と動作確認を行うことができた。
本アプリのClineへの仕様提示と開発依頼から起動完了までのやりとりを記録に残して技術サイトのコンテンツとして公開したい。
HTML形式で書き起こしてくほしい。
以下が自動作成された開発記録HTMLファイル（ユーザ名パスワード等は一部改変済）
そして、Gitにもcommitを依頼
以下のプロンプトにより指示を行った
本プロジェクトをgitにcommitしておきたい
まとめ
- これまでのアプリ開発と比べ生産性が劇的ということば以上に劇的なレベルで向上できる可能性を実感
- 精度高い仕様書を仕上げて一気にClineのエージェントで形にするのと、動作を確認しながら小刻みなアジャイル改善を繰り返す方法のどちらが開発精度や効率が上がるかは今後の検証課題であると感じられた（テスト駆動開発へのトライについても面白みがありそう）
- AIエージェントによりOSに直接コマンドを発行したりブラウザの操作をすることができるので、外部システムとの連携も見込める
- Cline単体また、Seleniumなどと組み合わせたテストの効率化や自動化なども興味深いテーマになりうることを実感