AIエージェント型のVSCode拡張機能「Cline」が普通にやばかった！
アドベントカレンダーの空いているところを埋めるために３本書くこととなった😅
（これが２本目です）
Clineとは？
いきなりですが、公式のGitHubのリンクを貼っておきます。
README.mdの中から印象的な部分だけ引用しておきます。
Claude 3.5 Sonnet のエージェント コーディング機能により 、Cline は複雑なソフトウェア開発タスクを段階的に処理できます。ファイルの作成と編集、大規模なプロジェクトの調査、ブラウザーの使用、ターミナル コマンドの実行 (許可後) を可能にするツールにより、コード補完やテクニカル サポートを超えた方法で支援できます。
自律 AI スクリプトは従来、サンドボックス環境で実行されますが、この拡張機能は、すべてのファイル変更とターミナル コマンドを承認するための人間参加型 GUI を提供し、エージェント AI の可能性を探索するための安全でアクセスしやすい方法を提供します。
実際に使ってみると感じることですが、Human-in-the-Loopと呼ばれるパターンでファイルの保存やコマンド実行都度に人間の承認を求めるため、安心して使うことができます。（少し煩わしいと感じることもありますが、現時点でのAIエージェントの振る舞いとしては、妥当な内容だと思います。）
この記事で触れる内容
この記事では、Clineの実践的な利用イメージをつかんでいただくために、いくつかのケースを挙げて、それぞれごとにプロンプト内容と、出来上がったアプリのイメージを紹介します。
逆に、セットアップ方法であったり、動作原理の深掘りはしませんので、ご了承ください。
それでは、コンテンツの紹介をしていきます！
コンテンツ
-
UI設計はClineにお任せ！部員紹介アプリを構築（React）
-
画面イメージを渡して、弊社技術ノウハウサイト（Fintan）のサンプルアプリを構築（React)
-
RestAPIをSpringBootで構築
自慢することでもないですが、今回は自分では一切コードを書いておらず、全てClineに任せています！
1) UI設計はClineにお任せ！部員紹介アプリを構築（React）
まずこのアプリは以下の場所で公開しています。（リポジトリ名が超適当です。）
https://github.com/tis-abe-akira/cline02
プロンプト
README.mdの中でも紹介していますが、再掲しておきます。
（比較的大雑把な指示で作っています）
カジュアルなトーンの部員紹介のアプリを作りたいと思います。
Reactとvite, TypeScriptで作ってください。
初期段階なので、認証処理やデータの永続化処理は不要です。（後で別途追加します）
要件：
- 部員のアイコン画像、自己紹介メッセージがリストで表示される（この時長いメッセージは途中で切られるが詳細表示画面で見れる）
- 部員のアイコン画像は、ドラッグ&ドロップでアップロードできる
- リストは並べ替えることができる（ドラッグ&ドロップで）
- リストから部員をタップすると詳細を見ることができる
- 部員にタグをつけられる（職位、趣味などタグの管理ビューも別途ある）
- フローティングアクションボタンを押すとモーダルが立ち上がり部員情報を入力できる
- 自分が編集できるデータをタップすると詳細画面表示画面に編集ボタンがあり内容編集ができる
- 同様に削除も可能（削除の際にはダイアログで確認を求める）
Clineとの対話の様子
対話の様子をごく一部ですがスクショで説明します！
- 機能漏れが見つかったので修正を依頼（このようにComupter useを用いた動作確認もしてくれます）
アプリのイメージ
アプリの実行イメージを掲載します。（アニメーションGif形式です）
2) 画面イメージを渡して、弊社技術ノウハウサイトのサンプルアプリを構築（React)
このアプリは以下の場所で公開しています。(あくまでもフロントエンドだけの実装で、検索結果は固定値を返すようになっています！)
https://github.com/tis-abe-akira/cline04
プロンプト
少々長いので、GitHubを参照ください。
prompt
アプリのイメージ
アプリの実行イメージを掲載します。
少しプロンプトで指示した画面とはレイアウトが異なっています。
修正を重ねた結果当初の見た目から変化してしまっていますが、時間の関係で修正をしていません。
3) RestAPIをSpringBootで構築
このアプリは以下の場所で公開しています。
https://github.com/tis-abe-akira/projectman
プロンプト
GitHubを参照ください。アーキテクチャーやレイヤーについて少し踏み込んで指定しています。
prompt
アプリのイメージ
RestAPIの実行は地味ですが、Swagger（いまだにSwaggerって言ってしまう）での実行の様子をご覧ください。
ID以外の項目による検索も動作確認取れました。
なんとも予定調和的なテストデータですがこれも生成AIが作ってくれた内容です。（弊社の意思は含まれていません）
所感
Clineはかなり有望だと思います！
まず、プロトタイピングにはかなり有効です。
既存のコードベースの読解力はあまり試せていませんが、ここがうまくいくとメンテナンスフェーズでも有効な気がします。
使ってみて気づいたポイントを書いておきます。
- プロンプトは細く指示するか、いっそエージェントにお任せするか、どっちかに振り切った方が良さそう
- 会話が長くなってくると精度が落ちるので、新しいスレッドを立てた方が良い
- Computer useのテストは「動作確認程度」なので、現時点では手動でやった方が早そう
エンジニアでなくても、初期のプロトタイプやPoCを実施できる時代が来たと思います！