CursorからClineを使ってプログラミングをやってもらってみる

#AI
#Cursor
森亮介
2025.01.31
Clineは、VSCodeなどのIDE上やCLIで動作する自律型のAIコーディングエージェントです。複雑なソフトウェア開発タスクを段階的に処理する能力を持っています。

界隈では話題になっているようですね。
主な機能として、以下が挙げられています。
ファイルの作成・編集: プロジェクト内のファイルを直接作成・編集し、リンターやコンパイラのエラーを監視しながら、欠落しているインポートや構文エラーなどの問題を自動的に修正します。
ターミナルコマンドの実行: ユーザーの許可を得て、ターミナルコマンドを実行し、その出力を監視します。これにより、ファイル編集後の開発サーバーの問題に対応することが可能です。
ブラウザの使用: ウェブ開発タスクにおいて、ヘッドレスブラウザを起動し、クリック、入力、スクロール、スクリーンショットのキャプチャ、コンソールログの取得などを行い、ランタイムエラーや視覚的なバグを修正します。
モデルコンテキストプロトコル（MCP）の活用: MCPを使用して新しいツールを作成し、自身の機能を拡張することができます。
Clineは、OpenRouter、Anthropic、OpenAI、Google Gemini、AWS Bedrock、Azure、GCP VertexなどのAPIプロバイダーをサポートしており、OpenAI互換のAPIやローカルモデルを使用することも可能です
 導入する今回はCursorというVSCodeをベースにしたエディタを使います。ちなみにCursorもAI機能がエディタに内蔵されており、AIによるコード生成、編集、デバッグ支援など、多彩な機能を備えています。
ClineはPluginとして提供されているのでインストールしていきます。
Cursorで新規ウィンドウを開き、表示->拡張機能をクリックします。

左側にペインが表示されるので、検索欄にclineと入力します。saoudrizwanが発行者のものが見つかると思うので、これをインストールします、

あとはエディタ側でインストールしてくれます。
 設定するインストール後、左ペインにClineが追加されているので、クリックします。
ここで使いたいAPIプロバイダーを選択し、各プロバイダーから発行されたAPIキーを入力して保存します。
今回はOpenAIを選択しました。
 カスタム指示
Clineのメニューに歯車アイコンがありますが、これをクリックすると更なる設定ができます。
Custom　instructions は動作や出力を特定のタスクやプロジェクトに合わせて調整するためのガイドラインやルールのセットです。
リクエスト毎に送られるシステムプロンプトの最後に追加されます。
コード生成、修正後にはユニットテストを実行して、やりとりは日本語で、このコーディング規約にする　などですかね。
 動作させてみる
メニューのプラスアイコンをクリックしてタスクを起動できます。
Auto-approveという設定項目がありますが、これはAIエージェントが特定の操作をユーザーの確認なしに自動的に実行できるようにする設定です。

有効にすると、AIがユーザーの確認なしにファイルの編集やコマンドの実行を行うという事なので、初めて実行する今回はオフのままにします。
 PlanClineにはplanとactという2つのモードがありました。
planは、タスクの実行前に、AIが詳細な計画を立てることで、コードの構造や実装手順を明確にしてくれます。
ブラウザで動作するAIチャットアプリケーションを作って
を入力して実行したら、
このように指定したAIのモデルからの返答が返ってきます。
また、トークンの使用量、コンテキストウィンドウ、APIの料金も表示されます。
AIから聞かれていることもあるので、さらにやり取りを行ってみます。
他に要望や、足りていないことなどをやりとりしていって、最終的に
計画の部分は作成してもらえました。
 Actactは、AIがユーザーの指示に基づき、即座にコードの実装や修正を行います。
planが終わったあと、"toggle to Act mode"を行ってください　と言っていたので、エディタのplanの横のactボタンを押してみます。
まずは、プロジェクトディレクトリと基本的なファイルを作成します
となり、実際にファイルの作成を行なってくれます。
Saveボタンを押すと、次のコードの作成へ進んでいくようです。
必要なライブラリのインストールも行なってくれます。
一旦必要なファイルを作成してもらったあと、アプリケーションの起動をして確認するフェーズへと移されました。
Run Commandを押すと、サーバーを起動するコマンドが実行されます。

コマンドはエディタのターミナルで実行されます。
最後はブラウザで確認するコマンドが提示され、これで頼んだタスクは一旦完了のようです。
 修正をお願いしてみる
実際にアプリを動かしてみましたが、チャットぼっとからの返信が返ってきませんでした。
ブラウザのコンソールを見てみると、クロスオリジンのエラーが出ていたので、これを直せるか聞いてみます。
修正の手順を提示してきたので、actモードで実行してみます。
リアルタイムで修正箇所がエディタで表示されます。
修正後、再度実行しましたが、まだエラーが出ていました。
今回はサーバー側でもエラーがログとして表示されていたため、Clineがファイルの修正を自動的に行なってくれましたね。
エンドポイントが無いというエラーだったので、ここを修正したようです。
まだエラーになりますけどね。
基本的にはトライアンドエラーを繰り返す感じで使っていくのでしょうか。
planを立てながら段階的に改善していくことができるので、いきなり全部を解決するより、その都度修正していくのが現実的なのでしょう。
サーバー側の処理はモックにして　みたいな修正もあっという間にやってくれました。
普段はほとんどコードを書きませんが、
こういうことをやりたい　という指示を出せばAIが計画を立て、コードを生成してくれるので手間は省ける
エラーが出たら解析して修正を提示してくれる
ターミナル操作や環境設定を助けてくれる
都度コードの説明などをするようにできる
このようなことが良いなと感じた。
今後はさらに高機能になっていくでしょうが、

最初はプログラミングの学習、作業用のスクリプトなど簡単なことから初めていくのがいいかもしれません。
今回のような単純なアプリでも結構なやり取りが発生しますので、APIにかかる料金には注意が必要ですね。
この記事でかかった料金は
$3.5534　でした。