VS Code + Cline で ”Devin 風”開発を行う方法① - 準備編
「AI だけでアプリが完成する」そんな話題で注目を集めているのが、「Devin」です。しかし現実的には、完全自動というよりも「人間と AI が役割を分担して開発を進める」スタイルが主流になりつつあります。
そこで気になるのが
- この”Devin 風”の開発は、自分の環境でも再現できるのか？
という点です。本シリーズでは、VS Code と Cline (クライン) という拡張機能を使用して、実際に「AI がコードを書き、テストし、修正する」開発ループを構築してみます。
今回はまず下準備として、「開発を行うための環境」を構築します。
この記事で使用している実行環境は以下のようになっています。
- VS Code (Windows 版)・・・バージョン 1.114.0
- Cline・・・バージョン 2.13.0
- npm・・・バージョン 11.5.1
今回の記事を作成するにあたり、以下の講座で勉強させていただきました。Devin と Slack、GitHub を連携させて、サンプルの商品管理アプリを Devin を使用して機能追加していく過程をハンズオン形式で学習できます。Slack を使用して Devin に指示を行い、成果物は GitHub にプルリクエストとして保存されます。
Udemy
完全自律型AIエージェント「Devin」完全入門!AIエンジニアを雇い生成AIを活用した次世代の開発手法を学ぼう！
さらに Cline の使い方については、以下の講座で勉強させていただきました。Cline と無料版の Google Gemini API などを使用して、プロンプトだけで Python と Flask を使用した家計簿アプリを作成する方法をハンズオン形式で学習できます。
Udemy
Cline(旧ClaudeDev)/Roo Code(旧Roo Cline)で始めるAI駆動開発入門
Cline のインストール
※ 記事作成 (2026/4/6) 時点の画面でご説明しています。ご覧いただく時点によっては画面構成が変わっている可能性があります。
まずは VS Code の Cline 拡張機能をインストールします。VS Code の左側にある「拡張機能」ボタンをクリックして、マーケットプレースの検索欄に「cline」と入力します。表示された拡張機能から「Cline」を選択してインストールします。途中作成者を信頼するか問い合わせるダイアログが表示されたら「はい」を選択してインストールを許可します。
インストールが完了したら、左側にある Cline アイコンをクリックして操作画面を表示して、下側にある「Login to Cline」ボタンをクリックします。
外部の Web サイトを開いていいか確認するダイアログが表示されたら「開く」ボタンを押します。
Cline のログイン (登録) 画面が表示されたらユーザー登録を行います。Google アカウントなどで登録すると簡単かもしれません。
ユーザー登録が成功したら「Authorize」ボタンを押します。
エディタを開くかどうか聞かれますので「Visual Studio Code を開く」ボタンを押します。
VS Code に戻ると Cline の認証結果を VS Code で開いていいか聞かれますので、「開く」ボタンを押します。
VS Code 側の認証も成功すると左側に以下のような画面が表示されますので、「Run in terminal」ボタンを押すか、VS Code のターミナル画面で「npm i -g cline」と入力します。この処理は初回起動時のみ行います。(この操作は省略できます。CLI (コマンドライン操作) や「Kanban」と呼ばれる機能を使用する場合に必要です。)
表示されているダイアログを「x」ボタンで閉じると以下の画面が表示されますので、「Auto approve:」の位置をクリックします。
以下の画面が表示されますので、「Execute all commands」と「Enable notifications」以外の項目をすべてチェックします。
以下の画面の位置をクリックして、API 設定画面を開きます。
表示された設定画面で、以下の手順で設定していきます。
- API Provider 欄で「Cline」を選択 (デフォルトで選択されています。)
- Model 欄で「Free」タブを選択
- モデル候補から「bytedance/speed-2-0-pro」を選択
- 「Use different models...」のチェックが外れていることを確認
- 「Done」ボタンで設定を保存します。
最後に日本語化設定を行います。
- Cline 画面の上部にある「Settings」ボタンを押します。
- 左側にある「General Settings」ボタンを押します。
- Preferred Language 欄のドロップダウンから「japanese - 日本語」を選択
- 「Done」ボタンで設定を保存します。
以上で基本的な設定は完了です。次のセクションでは動作確認のため、実際に何か作成してみます。
サンプルアプリの自動作成
AI エージェントの定番とも言える、家計簿アプリを自動で作成してみます。何か適当なフォルダを作成してから、VS Code で開いておきます。
Cline 画面の下側にある「Plan」ボタンを選択します。表示された入力欄に「グラフ付きの家計簿アプリを作成してください。」などと入力して、リターンキーを押すか入力欄の右下にある「送信ボタン (紙飛行機マーク)」を押すと、アプリを作成するために必要なプランの作成が始まります。
プランの作成が完了したら、隣にある「Act」ボタンを押すと実際の作成処理が開始されます。
少し待つと以下のような画面になり、アプリの作成が完了します。
アプリの動作確認を行うために「Live Server」拡張機能をインストールします。
VS Code のエクスプローラー画面を表示して、自動で作成された「index.html」ファイルを右クリックして表示されたメニューから「Open with Live Server」を選択します。
ブラウザが起動して、作成されたアプリが表示されます。
その他
基本的な使い方は分かりましたので、それ以外にも Cline で実行可能な機能をご紹介します。
・Cline のおもな機能
Cline でできる主な機能は以下の通りです。詳しくは こちら のリンクをご参照ください。
- 各種モデルの選択
Claude、ChatGPT、Gemini などの外部の推論モデルを使用可能。ローカル環境での実行も可能 (別途「LM Studio」、「Ollama」などのアプリをインストールする必要があります。) - ファイルの操作
コードベース内のファイルの作成や削除、編集が可能 - コマンド実行
npm、git、シェルコマンドやスラッシュコマンドなどの実行 - ブラウザの起動
ブラウザを起動して、Web アプリの E2E テスト、スクリーンショットの取得などが可能 - 外部ツールとの接続
MCP サーバーを使用して、データベース、API、ドキュメント参照などが可能 - コマンドラインからの実行
Cline CLI を使用して、ヘッドレス自動化、CI / CD パイプライン、シェルワークフローなどの実行が可能 - 複数エージェントの使用
ブラウザ上で動作する「Kanban」という機能を使用して、複数の AI エージェントとの協調動作 (オーケストレーション) が可能
まとめ
今回の記事では、VS Code と Cline を組み合わせて”Devin 風”の開発を行うための環境構築と、簡単なアプリの自動生成までを行いました。
過去にはフローチャートや UML などからコードを生成するような試みもありましたが、自然言語でアプリを構築できるのは非常に画期的です。
実際に試してみると分かる通り、AI が単にコードを生成するだけでなく、「計画 (Plan) → 実行 (Act) → 修正」という一連の開発ループを回せる点が、従来の AI によるコード補完との大きな違いです。これはまさに、話題の Devin が実現している開発スタイルの「エッセンス」と言えるでしょう。
一方で、完全に任せきりにするのではなく、「何を作るのかを人間が定義し、AI が実装を担う」という役割分担が現実的であり、実用的でもあります。Cline を使えば、このような開発スタイルを特別な環境なしで手元の VS Code 上に再現できるため、AI エージェント開発の入門としても非常に有効です。
次回は、より実践的な開発フローや、Kanban 機能を活用した複数エージェントの連携など、さらに“Devin 風”な使い方について掘り下げていきます。
今回は以上になります。よろしかったらお試しください。
