AIエージェントというキーワードが盛り上がってきています。どのようなものなのでしょうか？

エージェントとは「代理人」の意味です。私の記憶が確かならばエージェントプログラムとは「自律的に（自分がとるべき行動を自分で決めて）動くプログラム」という認識です。

生成AIの登場で自律的に動けるプログラムが作れるようになってきています。すでにAIプログラムをAIに書かせるような動きもあるようです。

この記事ではシステム開発に焦点を当ててみます。AIエージェントを謳う Cline という VS Code  拡張機能を使って、私が苦手な JavaScript プログラムを書いてもらいます。こちらで細かいしていをせず、要件定義もAIに生成してもらってどこまでできるか試してみます。

結論は、初心者や慣れないジャンルの開発には Cline を導入するメリットがあります。上級者にとっては満足できないかもしれません。

Clineインストールとセットアップ

この記事では Cursor を使用しますが VS Code でも基本的には同じです。まずはアプリを開きます。

サイドバーにあるファイル一覧や検索ボタンの中から拡張機能を選択、マーケットプレイス画面からClineを検索します。上図のように出てきたらインストールします。ダウンロードとインストールは無料です。

インストール後、マーケットプレイスボタンの横にロボットのアイコンが表示されます。クリックすると上図に示す初期設定画面が現れます。表示されない場合はロボットアイコンの下にある設定（歯車アイコン）をクリックします。

この画面では生成AI（エージェント）の初期設定をします。

AIモデル (API Provider) の選択幅は広く OpenRouter や AWS Bedrock にも対応しています。

しかし Anthropic (Claude) を選択すると画像対応 (image support), キャッシュ (prompt caching), PC 操作 (computer use) といったエージェントらしい動きもしてくれます。今回はネイティブの Anthropic API をセットしました。

APIをお持ちでなければ開発者向けページからアカウントとAPIキーを発行します。

上図の画面解説を続けます。API キーの入力画面の下には "Use custom base URL" とありますが使いません。チェックを入れずにそのままにします。

モデルは最新の "Claude 3.5 sonnet" を選びます。

その下には "Custom Instructions" （追加指示）という入力欄があります。システムプロンプトの一部として特定の動きを指示することができます。私が実際に使っているプロンプトはこちらです。

- Do not omit output while generating.
- Run unit tests at the end.

一行目は「生成コードは途中で省略しないこと」、二行目は「最後に単体テストをやること」と指示しています。このままコピーしてお使いいただけます。

全て入力したら青いボタンをクリックして設定終了です。

仮想世界ビューワーを試作するためまずは要件定義を作成

苦手なフロントエンドをClineで作ろうと思う

私はマルチメディアコンテンツ一括生成サービスのゾルトラークウェブを公開しています。ゾルトラークウェブは短いリクエストから要件定義（設計書のような資料）を生成し、さらに具体的なコンテンツ（ビジネス資料、絵本、キャラ、プレゼン資料など）を自動生成します。

このアプリはテキストだけでなく画像、動画、音声も生成します。これらのファイルをスムーズにかっこよく表示するにはフロントエンド（ユーザーが操作する部分）の知識が不可欠です。しかし私はフロントエンド開発が弱いです。

そこでClineです。自分の知識のない分野について Clineに順次生成してもらい、学習しながら開発を進めてみます。

ということで、ここでは予め生成したデジタルコンテンツを表示するビューアを作りたいと思います。ただの画像表示ではなく背景と3Dキャラを表示する「仮想世界ビューア」です。

開発手順はたった2つです。「要件定義生成」と「Clineでコード生成」です。順次見ていきましょう。

要件定義などの構造化された情報はAIにとってわかりやすい

まずは要件定義書を作ります。ゾルトラークウェブにアクセスします。

そしてサイドバーから「システム開発」のカテゴリを選択、コンパイラは「MVPシステム開発提案」を選択します。

リクエストは「HDRファイルを背景、GLBファイルをキャラクターとして読み込み、仮想世界を作成するウェブアプリ」としました。

GPT, Claude, Gemini がそれぞれ要件定義を生成するので結果を ZIP でダウンロードします。スクリーンショットをとるのを忘れました。

今回は Claude の出力を使います。要件定義書には開発言語やデータベース設定などClineには不要な情報があります。そのため「タイトル」「概要」「機能要件」「必要な画面」の情報を抜粋します。

抜粋結果は下記のようになります。

# 仮想世界を作るウェブアプリ

## 概要

このウェブアプリは、HDRファイルを背景、GLBファイルをキャラクターとして読み込み、仮想世界を作成することを目的としています。

## 機能要件

1. **HDRファイルの読み込み**
   - 背景として使用するHDRファイルを読み込む
   - HDRファイルの品質と解像度を最適化する

2. **GLBファイルの読み込み**
   - キャラクターとして使用するGLBファイルを読み込む
   - GLBファイルの品質と解像度を最適化する

3. **仮想世界の表示**
   - HDRファイルを背景として表示する
   - GLBファイルを読み込んだキャラクターを表示する
   - 背景と3Dキャラクターを滑らかに表示する

4. **ユーザーインタラクション**
   - ユーザーがキャラクターを操作できるようにする
   - ユーザーがカメラ角度を変更できるようにする

5. **データ管理**
   - HDRファイルとGLBファイルの情報をデータベースに保存する
   - ファイルの更新や削除を管理する

## 必要な画面

1. **ホーム画面**
   - HDR背景と3Dキャラクターの表示
   - カメラ操作とキャラクター操作

2. **アセット管理画面**
   - HDRファイルとGLBファイルの一覧表示
   - ファイルの追加、編集、削除

この要件定義はマークダウン形式で書かれているので、見出しの頭にはシャープ (#), 各見出しは太字 (**) 表現になっています。AIはただの文章よりもフォーマット化された文章の方が理解が容易です。そのため触らずにこのままClineの入力として使います。

Clineにコード生成してもらうと時間はかかるが自分でコードを触らずに完成

プロジェクト作成

それでは開発を始めましょう。

まずプロジェクトフォルダを作ります。ここでは "space" フォルダを作ります。そしてその中に読み込ませたい3Dキャラ (*.glb) と背景ファイル (*.hdr) をサブフォルダ "resource" に入れておきます。

次に Cursor エディタを開きメニューから「ファイル」→「フォルダを開く」から space フォルダを開いておきます。下記の画像では忘れていますが、メニューから「ターミナル」→「新しいターミナル」も開いておきましょう。

始めていきましょう。Clineを開いて左下のに抜粋済みの要件定義をコピペして Enter キーを押します。

タスク分析をしてパッケージ情報を生成

動き始めます。Clineは入力に対して何をすべきか考えます。そのプロセスがサイドバーにて「タスクを分析します」と表示されます。そして具体的なステップを表示して実行します。

驚いたのは、タスク分析にて「すでにresourceフォルダにHDRファイルとGLBファイルが用意されています」と表示されています。

Clineは指示された内容についてコード生成するだけではなく、作業フォルダを覗いて現状どうなっているのか調べてからとるべきアクションをとっているようです。

そして「最初のステップとして、プロジェクトの初期設定を行います」と表示されました。開発言語は指定していませんがウェブアプリと指定しているので JavaScript の必要パッケージ（外部ライブラリ）をインストールするようです。

ここも注目ポイントです。やみくもにパッケージを入れるのではなく "package.json" というファイルを作ってどのパッケージが必要かドキュメント化してからインストールする。まさにプロジェクトを一から作っている感じです。

上図では画面右側にClineが生成した package.json の中身を緑で表示、その左には赤で何も書かれていない画面が表示されています。これは差分表示といって、旧コード（赤）と新コード（緑）の違いを表示してどこが変わったか開発者に伝えるものです。ここではゼロから作っているので赤い方には何もありません。

画面左上には消費したトークン数と Claude API のコストが表示されます。

Clineの良いところは都度停止してユーザーに了承を得ること

ここで一度動きが止まります。Clineはコード生成やコマンド実行前に一度停止し、先に進んでよいかユーザーに尋ねます。この場合は Save （保存）か Reject （拒否）かこちら側が選択するまで次の動きをしません。

これは上級者にとってはイライラするかもしれません。「全部勝手にやっておいて」とお願いしたいところです。

しかしあなたがもし初心者であれば、何をやっているのか順次表示されるのは助かるはずです。私自身、慣れない JavaScript の開発の手順がこのように誘導してもらえるのは制作過程が理解しやすいです。

この機能は賛否あるかもしれません。しかし勝手に行動されて変なコードを生成されたり、キープしておきたかったコードが消えたりといったことが防げるので必要な機能だといえます。

コード生成だけでなくコマンドも実行

ファイルを保存した後、 Cline は "npm install" コマンドを実行してよいか尋ねてきます。一部英語表記になってますが "Cline wants to execute this command" （Clineはこのコマンドを実行したい）と表示しています。

ここで "Run Command" をクリックするとインストールが始まります。先にターミナルを起動しておくことをお勧めしたのは、インストール過程を見ることができるからです。

パッケージはエラーなくインストールできたようです。次にアプリの起点になるHTMLファイルを生成します。

実はここで、中身のないファイルができておりエラーが起きています。私自身は認識していましたがこのまま Cline に任せて次に進めます。

Cline の提案に従って JavaScript ファイルも生成されるので Save ボタンをクリックして保存します。 HTML ファイルの表示エラーが赤文字で出ていますが Cline は動くのでそのままです。この後さらにファイル生成します。

結果的に "package.json," "package-lock.json," "main.html," "main.js," "vite.config.js" の5ファイルを生成しました。

ちなみにタスク分析で検出した背景ファイルと3Dモデルファイルは Clineが別途 public フォルダを作りそこに移動していました。その結果、移動元の resource フォルダは空になっていました。このようなファイル動作もやるようです。

動作チェックまでやりエラーも自動修正

一通りのコード生成後、次に Cline は「必要なファイルがすべて作成されたので、開発サーバーを起動してアプリケーションをテストします」と聞いてきます。

ここでもユーザーの承認が必要です。お手数ですが Approve （承認）をクリックします。すると "npm run dev" というコマンドを実行してテストサーバー起動と、Cline内部でHTMLファイルの読み込みによる動作確認が行われます。

プログラムによるPCの操作は本来ハッキング行為です。承認しますか？という確認がないと勝手にコンピュータを操作されることになるのでこの一言は絶対に欲しいです。そういう意味で Cline は配慮されたシステムだと評価しています。

またこの動作は Claude 3.5 Sonnet の Computer Use という機能を使っているはずです。初期設定時に Claude 以外のモデルを選択するとこのようなテストはやらないかもしれません。

上図の左側には地球儀のアイコンと小さい画面が映されています。裏でどのように動作確認されているのがわかり個人的には好きです。ただしHTMLファイルの中身がカラなので画面には何も映っていません。

404エラーが出ていると Clineは状況を認識しています。面倒なので手作業で修正したいですが、そもそもHTMLコードがないので本来どういうコードを生成したかったのか知りたい。そこで自動でエラー修正（HTMLコード生成）をお願いします。

ここからのプロセスは少し慎重になった方がいいです。Cline (Claude) がエラーと対処方法が正しく認識していればいいのですが、今のAIはまだ十分なデバッグ知識を持っていません。

上図はパッケージ修正なのですが、これは直接のエラーの原因ではありません。そのためこのコード修正はAPIの浪費になるのですが、仕方なくゴールに最終的にたどり着けるよう信じて続けます。

この間にもコード修正の承認については手動でクリックします。私のようにある程度開発経験のある人であればここで止めて、 Ctrl/Command + L キーでチャットスタイルで修正した方がお金はかかりません。

上図では JavaScript を修正していますが「まだ404エラーが発生しています」と表示されています。根本原因はHTMLコードがないことなので、エラー認識と対策がずれています。

それでも今回私は根気よく Cline を回し続けました。Clineによるコード生成も修正も Cursorの定額料金とは別にAPIを消費するのでご注意ください。

遠回りはしたが自分でコードを触らずに完成

HTMLが生成されていないことにClineもようやく気が付き生成しました。そしてエラーが消え、テストサーバーが正常起動しました。

上図左にはあらかじめ用意していた背景と3Dモデルがプレビュー表示されています。実際にブラウザ起動するとマウス操作でカメラアングルが変わり背景が移動します。目的とした仮想世界ビューアーができました。

やったことのまとめと作業時間と費用

ここまでやったことをまとめるとこうなります。

1. ゾルトラークウェブでリクエストを入力して要件定義書生成

2. 要件定義から必要部分のみを抜粋

3. 作業フォルダと背景・3Dモデルファイルを用意

4. Cursorエディタを起動してCline初期設定

5. 抜粋要件定義をコピペしてClineを起動

6. コード生成・保存・実行（テスト）・修正の承認クリックの繰り返し

改めて強調しますが、自分でコードは一切触っていません。

作業時間は 15 分、合計 API 費用は 1.26 ドルでした。最短で行けば 1 ドルいかなかったと思います。

Clineを使うときのポイントと注意点

これまでなら Google 検索で似たコードを探してコピペして、エラーが出たら原因をまたウェブで探して修正、という繰り返しをして何とか開発していました。

しかしこのやり方なら要件定義だけあればClineが下記のことを自動でやってくれます。

• 現状認識と必要ファイルの準備

• 必要なパッケージ（外部ライブラリ）をインストール

• コード生成と修正

上記の動作すべてがエージェント動作かどうかは要確認です。ある程度事前にプログラムとして組まれていて実行した可能性もあります。ただしふるまいを見るだけなら、私がかつて大学院で習ったエージェントプログラムと呼べる動きでした。

最後にClineを使うのに知っておくべきポイントをまとめたいと思います。

• 開発環境は事前準備しとくべきか

• API代金がもろかかるので燃費は悪い

• 時間はかかるが順を追って開発できる

• コンテキスト大量入力は不向きか

• 大規模開発に向いているか

開発環境は事前準備しとくべきか

今回は Windows の環境で node.js は元々入っていました。もしインストールされてなかった場合、 Clineはnode.js をインストールするのかどうか今回は検証していません。

私個人の意見としては、最低限環境構築はやっておくべきという認識です。

API代金がもろかかるので燃費は悪い

Cursor Pro で月額料金を支払っている上に Cline で API 代金を追加で支払うことには抵抗があるかもしれません。

すでに説明したように、エラー修正で遠回りをしている場合はAPI代金がかさむので怖いですよね。

その場合はClineを止めてチャット機能 (Ctrl/Command + L) で修正する方がよいです。今回はデモ的にあえてエージェント機能のみで開発しましたが、まだ完璧ではない点を強調させてください。

そのためゼロイチで最初期の構築を「順を追って」やってもらうところにClineの良さがあると考えています。

時間はかかるが順を追って開発できる

Vercel の v0 や bolt.new のようなツールも使ってみました。これらのツールでも別のテーマのアプリは作れました。本当に良い時代です。

しかしこれらのツールはノンストップでコード生成するので初心者が学習も含めて使うには「え？」となるのではないでしょうか。

だからこそ逆に順を追って承認クリックしながら進める開発は初心者におすすめの機能です。

Clineは自律的に動いてくれるのはいいですが、コード修正などは時間がかかるので上級者にとってはイライラポイントです。しかしゼロイチ開発なら多少時間はかかっても理解を進めながら開発できるのはClineの良いところでしょう。

長文プロンプト入力は不向きか

要件定義にある「アセット管理」の部分は今回実装されませんでした。アセット管理とは、単一の背景や3Dファイルだけでなく複数のファイルから選んで表示する機能です。いわゆる「着せ替えて世界を楽しむ」ような機能が欲しかったのです。

実装できなかった原因は外部ライブラリ (Three.js) が非対応なのか、 Clineが意図をくみ取らなかったのか。切り分けて考えないといけません。

上図は Cline のリポジトリから見つけたシステムプロンプトの部分です。かなり長いですね。とすると入力が長くてAIがくみ取り切れなかったのでしょうか？

Claude だとシステムプロンプトとユーザープロンプトを分けて入力できるはずですが、これ以上調べ切れていません。

長文プロンプトができないのであれば大規模開発には向かない可能性があります。

大規模開発に向いているか

今回はシンプルな機能のアプリを開発してみました。

小さい規模のアプリをちょっと作ってみる感じがClineの機能的にちょうどよい気がします。中規模や大規模の開発には向いているのでしょうか？

長文プロンプトが苦手、そしてエラー修正に遠回りすることを考えるとあまり大規模開発には向いていない感じがします。

懸念を X でポストしたところ、『AIエディタCursor完全ガイド』の著者の 木下雄一朗氏（きのぴーさん）からアドバイスをいただいたので早急に試す予定です。

これらを考慮すると、個人的な感想としてはClineは不慣れな分野の開発をサポートしてくれるツールと位置付けます。プログラミング初心者または中級者以上が普段やらない開発のサポートをClineでお願いできます。私自身 API 代金を払っても使いたいと思える拡張機能でした。

上級者であれば Cursor Composer/Agent や Cursor Tab （自動補完機能）、 Ctrl + K （部分修正）, Ctrl + L （チャット機能）の組み合わせでスムーズに開発ができる認識です。

いずれにしてもClineはポテンシャルのある拡張機能です。ぜひ使ってみてはいかがでしょうか。