今回はVisual Studio CodeやCursorといったコードエディタの拡張機能として使えるAIエージェント「Cline」をご紹介します。
目次
はじめに
システム開発の現場でもAI活用が浸透しており、コーディング作業を支援するツールが多く登場しています。AIモデルの高性能化や多様化によって開発生産性の向上がさらに期待できるようになってきました。
今回ご紹介するClineは、AIによる高度なコーディング支援を実現するアシスタントツールで、Visual Studio Codeなどのエディタに組み込んで簡単に利用できます。Clineの特長や既存のAI搭載エディタとの違いを解説し、簡単な機能の使い方を紹介していきます。
Clineとは
Clineは、開発作業の補完や提案を行うAI機能を提供するオープンソースのツールで、Visual Studio Codeなどのコードエディタの拡張機能として提供されています。
ClineはAIエージェント型の拡張機能で、コード作成・修正からターミナルコマンド実行、ブラウザ操作までエディタ内で自律的に遂行します。プロンプトで与えられたタスクを自動的に実行→修正を繰り返し、これをタスクが完了するまで繰り返します。
機能実装に必要なコードを提案したり、テストやデプロイのコマンドを提示したりして、開発者が少ない作業で進められるようにサポートする仕組みが備わっており、対話形式で問いかけるだけで具体案を提案してくれるため、開発者のアシスタントのように働いて開発効率の向上に貢献します。
Clineの特長
広範囲の開発作業を支援
Clineは開発作業におけるアシスタントとして振舞うことを目指して作られています。Clineの支援機能はコード生成にとどまらず、仕様や実装方法の計画段階からの相談に応じてくれます。そのため、複雑な仕組みを持つ場合や大規模なプロジェクトにも対応が可能です。
また、計画した内容やコードの状態などのプロジェクトの状況は、Clineによって把握されているため、円滑に作業工程を進められます。Clineは細かい指示が与えられなくても、それまでの対話から状況を総合的に判断することができ、適切な結果を導き出します。
AIモデル選択の自由化
Clineは、AIモデルを通じて具体的な操作を導き出し、IDEに反映させる仲介役を担います。Cline自体にはAIモデルは含まれませんが、外部で提供される様々なLLMプロバイダーと連携できる汎用的な接点を持っています。例えば、OpenAIやAnthropic、Googleなどが提供するLLMのAPIと接続が可能で、その中の任意のAIモデルを選択できます。
AIモデルはClineのエンジン部分にあたり、その性能によって提案力や精度が左右されます。AIサービス側ではAIモデルの改良が日々続けられており、多くのバージョンが登場してきています。Clineでは新しいAIモデルを簡単に試用できるため、開発環境を変更することなく、さらなる生産性向上が望めます。また、AIサービスの利用量やコストが可視化されており、使用状況の把握が容易です。
機能拡張
ClineではIDEを越えて外部の仕組みと簡単に連携できる拡張機構が備わっています。MCP（Model Context Protocol）と呼ばれる接続方法を持つ拡張機能であれば、Clineを通じてAIモデルから利用できるようになります。例えば、GitHubやNotionの操作、気象情報サービスからのデータ取得、ブラウザやデータベースの操作などがClineから扱えます。その他、自前の拡張機能を作成して連携させることも可能です。
CursorやGitHub Copilotとの違い
ClineのようにAIをベースにしたアシスタントツールとして、CursorやGitHub Copilotが有名です。いずれも開発者の作業効率を高めるツールですが、機能などに違いがあります。
CursorはAIアシスタント機能を備えたコードエディタで、コード生成や補完を行いコーディング作業を支援します。なお、使用されるAIモデルはいくつかの種類の中から選ぶことはできますが、利用回数などの制約がCursorの方で決められている点がClineとは異なります。Clineを扱う場合は、AIモデルの提供サービス側の価格や制約に従います。また、CursorはBYOK（Bring Your Own Key）に対応しているので、自前で用意したAPIキーを設定することもできますが、使用できる機能に制限があります。
GitHub Copilotは、AIによるコーディング支援を行うVisual Studio Codeの拡張機能です。Visual StudioやJetBrains IDEなどのIDEにも対応しています。エディタではコーディング中のコード補完、チャットウィンドウでは対話形式によるコードのレビューや質問が可能で、コーディング支援に重点が置かれています。また、現在プレビュー版として公開されている「GitHub Copilot Agent Mode」を使用してAIエージェントとしても使用できます。使用されるAIモデルはGitHub Copilotに組み込まれているほか、こちらもBYOKに対応しています。
Clineを使ってみよう
ここからはClineの使い方を紹介していきます。なお、以降ではVisual Studio Codeを使って進めていきます。
Clineの導入方法
まずはVisual Studio Codeを開き、「拡張機能」を選び「cline」で検索します。検索結果に下図のような拡張機能が出てきたら「インストール」ボタンを押してインストールしましょう。
インストールができると、左のメニューにClineのアイコンが追加されるので、選択してみましょう。
「Get Started for Free」を選ぶとブラウザが開くので、画面に従ってアカウント登録を進めていきます。GoogleアカウントかGitHubアカウントのいずれかを連携することで登録ができます。
アカウントを連携させたら、Visual Studio Codeを再起動しましょう。Clineのメニューアイコンを選択して下図のようなウィンドウが表示されていればインストール完了です。
AIモデルの選択
今回はAIモデルにGoogle Geminiを使用します。Googleアカウントにログインしてから、Google AI Studioにアクセスしましょう。ダッシュボードが表示されたら、「Get API Key」をクリックします。
APIキーが生成されるので、「コピー」ボタンをクリックしてクリップボードに保存しましょう。
Visual Studio Codeに戻り、Clineのウィンドウから歯車のアイコンを選び、設定画面に進みます。AIモデルのAPIキー設定画面に移るので、API Providerで「Google Gemini」を選び、Gemini API Keyに先ほどコピーしたAPIキーを貼り付けましょう。
続けて、左に並んでいるアイコンの中にある歯車アイコンを選び、Preferred Languageを「日本語」に変更しましょう。
最後に「Save」をクリックして設定を保存します。
アプリケーションの作成
準備ができたらClineの機能を試していきましょう。Clineのウィンドウのチャット欄に指示内容を記述します。
まずは、簡単にHello Worldを表示するHTMLの作成を依頼します。
Clineさん！Clineディレクトリに「hello-world」という新しいプロジェクトフォルダを作成して、大きな青い文字で「Hello World」と書かれたシンプルなWebページを作るのを手伝ってもらえませんか？開発環境はWindowsです。
チャット欄で依頼を送信すると下記のように作成が始まります。都度、適用の可否を選べるボタンが表示されるので、承諾していきます。
作成がリアルタイムで進行し、Clineのウィンドウに処理内容が記述されていきます。
次に、ページにアニメーションを付ける依頼をしてみましょう。
Hello Worldの文字をフェードインさせるアニメーションを追加してください。
最後に、ログインフォームの追加を依頼してみましょう。
index.htmlにログインフォームを追加し、下記の機能を追加してください。
・メールアドレスとパスワードでログインできる
・ログインに成功するとマイページに遷移される
・ログインフォームには入力チェックを設ける
・メールアドレスとパスワードはデータベースで管理する予定
最終的に書き出されるHTMLは下記になります。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
.fade-in {
opacity: 0;
animation: fadeIn 2s forwards;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<h1 class="fade-in" style="color: blue; font-size: 60px;">Hello World</h1>
<form id="loginForm">
<div>
<label for="email">メールアドレス:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">ログイン</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
if (!email || !password) {
alert('メールアドレスとパスワードを入力してください。');
return;
}
// ログイン成功したらmypage.htmlにリダイレクト
window.location.href = 'mypage.html';
});
</script>
</body>
</html>以上のように、Clineではコーディングをしなくても、対話形式で開発作業を進めていくことができます。
さいごに
今回は、開発作業をサポートするAIアシスタントツール「Cline」を紹介しました。AIアシスタントツールを使うことで、これまでの開発の進め方が一変しましたが、Clineではより多くのことをAIに任せられるようになりました。Visual Studio Codeの利用者であれば、Open AIやGoogle GeminiなどのAIモデルと紐づけるだけですぐに使い始められます。個人から企業規模まで幅広く対応できるツールなので、興味のある方は新しい開発体験を試してみてください。
メシウスでは様々なWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。