VS Code + Cline + ChatGPTで開発をワンストップ化する
はじめに
本記事で伝えたいことはシンプルです。
ChatGPTで設計やレビュー観点を整理し、Clineで既存コードを見ながら実装する。
つまり、ChatGPTを「考える場」、Clineを「VS Code上で手を動かすエージェント」として使い分けることで、上流工程から運用までの流れをVS Code上でかなり効率化できます。
AIを使った開発は、かなり身近になってきました。
ただ、実際にはまだ以下のような使い方も多いと思います。
- ChatGPTに質問する
- 回答をコピーする
- VS Codeに貼り付ける
- エラーが出たらまた聞く
これでも便利ですが、開発はコードを書く作業だけではありません。
要件整理、設計、実装、テスト、レビュー、ドキュメント作成、運用確認まで含めて開発です。
本記事では、VS Code、Cline、ChatGPTを組み合わせて、上流工程から運用までを一つの流れで進める方法について書きます。
Clineとは
Clineは、VS Code上で使えるAIコーディングエージェントです。
通常のチャットAIと違い、エディタ上のファイルを確認したり、必要に応じてファイル編集やコマンド実行を行えます。
そのため、単にコードを生成するだけではなく、既存コードを見ながら修正する作業に向いています。
なお、本記事でいうChatGPTは、Clineの裏側で動くモデルそのものではなく、ブラウザやアプリ上で利用するChatGPTを指しています。
そのため、本記事ではモデルとしてのGPTとClineを横並びに比較するのではなく、設計やレビュー観点を整理するChatGPTと、VS Code上で実装を進めるClineという役割で整理しています。
ChatGPTとClineの使い分け
自分の中では、ChatGPTとClineは以下のように使い分けるのがよいと感じています。
| 工程 | 使うもの | 役割 |
|---|---|---|
| 要件整理 | ChatGPT | 論点整理、仕様のたたき台作成 |
| 設計 | ChatGPT | 考慮漏れやリスクの洗い出し |
| 実装 | Cline | 既存コードを見ながら修正 |
| テスト | ChatGPT + Cline | 観点整理とテストコード作成 |
| レビュー | ChatGPT | レビュー観点の事前確認 |
| ドキュメント | ChatGPT + Cline | 説明文作成、リポジトリ内へのMarkdown配置 |
| 運用 | ChatGPT + Cline | ログ確認、調査結果の整理 |
ChatGPTは考える場、ClineはVS Code上で手を動かすエージェントというイメージです。
上流工程での使い方
上流工程では、まずChatGPTに要件を整理してもらいます。
以下の要件をもとに、API仕様のたたき台を作ってください。
- ユーザーがリソースを作成できる
- リソースには名前、種別、URL、更新間隔を持たせる
- 名前には文字数制限がある
- 参照中のリソースは削除できない
出力内容:
- 機能概要
- エンドポイント
- リクエスト項目
- バリデーション
- 異常系
- テスト観点
これにより、いきなり実装に入るのではなく、仕様のたたき台を作れます。
AIの出力をそのまま採用するのではなく、人間がレビューして調整する前提で使うのが重要です。
設計工程での使い方
設計では、ChatGPTにレビュー観点を出してもらいます。
以下のAPI設計について、考慮漏れがないかレビューしてください。
観点:
- DB設計
- バリデーション
- 権限制御
- 削除制御
- 既存APIとの整合性
- 運用影響
たとえば、以下のような観点を確認できます。
- 更新不可にすべき項目はないか
- 削除時に参照チェックが必要か
- エラーコードは既存仕様と合っているか
- 一覧取得時の検索条件は十分か
- 運用時に困る仕様になっていないか
自分だけで設計していると見落としやすい観点を、事前に洗い出せるのが便利です。
実装工程での使い方
実装ではClineを使います。
Clineには、できるだけ具体的に依頼します。
悪い例です。
この機能を実装して
これだと範囲が広すぎて、期待と違う修正になる可能性があります。
良い例です。
既存の類似実装を参考にして、新しいリソースのcreate処理を追加してください。
条件:
- 既存の共通クラスを使う
- 既存の命名規則に合わせる
- 既存のテスト構成に合わせる
- 今回は正常系のみ追加する
- 不要なリファクタリングはしない
このように条件を明確にすると、Clineが既存コードに合わせて作業しやすくなります。
Clineのメリット
Clineの大きなメリットは、単発のコード生成ではなく、リポジトリ全体を見ながら修正できることです。
大きなGitHubリポジトリでは、1つの修正でも複数ファイルに影響することがあります。
たとえば以下のような作業です。
- 既存実装の調査
- 類似コードの確認
- 共通処理の利用
- importの修正
- テストコードの追加
- lintやテストの実行
- エラー箇所の再修正
-
docs/配下へのMarkdownドキュメント作成
Clineはコードベースを確認しながら作業できるため、膨大なGitHubリポジトリでも既存の実装パターンに合わせた修正がしやすいです。
これはかなり実用的だと感じました。
また、Clineは利用するAIモデルやAPI Providerを選べます。
そのため、社内でAPIを用意し、社内サーバや社内のAPI Gateway経由でモデルに接続する構成にすれば、通信経路やログ管理を社内統制下に置きやすくなります。
もちろん、実際に利用する場合は社内のセキュリティルールや情報管理ルールに従う必要があります。
ただ、外部サービスに直接コードを送るのではなく、社内で管理されたAPI経由にできる選択肢がある点は、企業利用では大きなメリットだと思います。
テスト工程での使い方
テストでは、まずChatGPTに観点を出してもらいます。
以下のcreate APIについて、正常系、準正常系、異常系のテスト観点を出してください。
条件:
- 名前に文字数制限がある
- 種別は決められた値のみ許可する
- URLはhttp/httpsのみ許可する
- 必須項目が不足している場合はエラーにする
その後、Clineに実装を依頼します。
上記のうち、正常系のテストだけを既存pytestの形式に合わせて追加してください。
ポイントは、観点整理と実装を分けることです。
いきなりテストコードを書かせるよりも、先に観点を整理した方が品質が安定します。
レビュー工程での使い方
レビュー前には、ChatGPTにセルフレビューを依頼します。
以下の差分について、レビュー前に確認すべき観点を出してください。
観点:
- 仕様との整合性
- 既存実装との整合性
- テスト不足
- エラー処理
- セキュリティ
- 運用影響
これにより、レビューに出す前に自分で修正できる箇所を見つけやすくなります。
また、実際にチームで運用前のレビューをしてみたところ、AIを使って事前に観点整理やセルフレビューを行っていたことで、ほとんど大きなズレや修正はありませんでした。
もちろん細かい表現や実装方針の確認はありましたが、仕様の方向性やテスト観点について大きく手戻りすることは少なく、レビュー前の準備としてかなり有効だと感じました。
ドキュメント作成での使い方
実装が終わったら、ChatGPTに説明文を作ってもらいます。
以下の実装内容をもとに、社内ドキュメントに貼る説明文を作ってください。
含める内容:
- 概要
- 追加した処理
- 主なバリデーション
- テスト内容
- 運用上の注意点
その後、必要に応じてClineに依頼し、リポジトリ内の docs/ 配下などにMarkdownとして配置します。
上記の内容をもとに、docs/feature-name.md としてMarkdownファイルを作成してください。
既存のdocs配下の書き方に合わせてください。
コードの説明を文章化する作業は意外と時間がかかります。
ChatGPTで説明文を整理し、Clineでリポジトリ内に反映することで、レビュー者や運用者に伝わる形にしやすくなります。
運用工程での使い方
運用でもAIは使えます。
たとえば、障害調査や設定確認の結果をまとめる場合です。
以下のコマンド結果をもとに、調査メモを作成してください。
含める内容:
- 事象
- 確認したコマンド
- コマンド結果
- 分かったこと
- 対応要否
- 次に確認すること
運用では、「何を確認して、なぜその判断をしたか」を残すことが重要です。
AIを使うと、ログやコマンド結果を報告文に変換しやすくなります。
VS Code上で完結するメリット
VS Code、Cline、ChatGPTを組み合わせると、開発の流れをかなり一箇所に集約できます。
要件整理
↓
設計
↓
実装
↓
テスト
↓
レビュー
↓
ドキュメント
↓
運用
特にメリットが大きいのは以下です。
- エディタとAIチャットの往復が減る
- 既存コードに沿った実装がしやすい
- 膨大なGitHubリポジトリでも修正範囲を追いやすい
- テストやドキュメント作成まで一連で進めやすい
- レビュー前のセルフチェックがしやすい
- 運用メモや調査報告も作りやすい
- 社内API経由の構成にすることで、企業利用でも検討しやすい
Clineの設定方法
1. VS CodeにClineをインストールする
VS Codeを開き、左側の拡張機能アイコンをクリックします。
検索欄に以下を入力します。
Cline
表示されたCline拡張機能をインストールします。
2. Clineを開く
インストール後、VS CodeのサイドバーからClineを開きます。
表示されない場合は、コマンドパレットを開きます。
Ctrl + Shift + P
Macの場合は以下です。
Cmd + Shift + P
その後、以下を検索します。
Cline: Open In New Tab
3. API Providerを設定する
Clineを使うには、利用するAIモデルのAPI Providerを設定します。
GPT系のモデルを使う場合は、ProviderとしてOpenAIを選択し、API Keyを設定します。
設定イメージは以下です。
API Provider: OpenAI
API Key: 自分のAPIキー
Model: 利用するGPTモデル
OpenAI互換のAPIエンドポイントを利用できる場合は、社内サーバや社内API Gatewayを経由した構成も検討できます。
設定イメージは以下です。
API Provider: OpenAI Compatible
Base URL: 社内API Gatewayまたは社内サーバのエンドポイント
API Key: 社内で発行されたキー
Model: 利用するモデル名
この構成にすると、直接外部APIへ接続するのではなく、社内で管理された経路を通せます。
そのため、以下のような観点で管理しやすくなります。
- 利用者の制御
- API Keyの管理
- 通信経路の制御
- ログ管理
- 利用モデルの制御
- 社内ポリシーへの準拠
ただし、ソースコードや機密情報をAIに送信する場合は、必ず社内ルールに従う必要があります。
4. 動作確認する
設定後、Clineに以下のように入力します。
このリポジトリの構成を簡単に説明してください。
Clineがファイル構成を確認し、プロジェクト概要を説明できれば準備完了です。
5. まずは小さいタスクから試す
最初から大きな実装を任せるのではなく、小さいタスクから試すのがおすすめです。
このリポジトリのテスト実行方法を調べてください。
既存のREADMEを確認して、開発環境構築手順を要約してください。
既存の類似テストを参考に、正常系のテストを1つ追加してください。
小さいタスクで動きを確認してから、徐々に実装や修正に使う方が安全です。
注意点
AIに任せきりにするのは危険です。
特に以下は人間が確認する必要があります。
- 仕様として正しいか
- セキュリティ上問題ないか
- 既存設計と矛盾していないか
- テストが本当に意味のある内容か
- 本番運用で問題が出ないか
- AIが存在しない仕様を作っていないか
- 社内ルールに違反していないか
- 機密情報を送信していないか
AIは作業を速くしてくれますが、最終判断をするのは人間です。
今後試したいこと
Cline以外の選択肢として、ZooCodeやRooCodeも試してみたいと思っています。
特に、Orchestratorモードのようにタスクを分解して進められる仕組みは、自律性の高い開発支援として面白そうです。
Clineを中心にした開発フローに慣れてきたら、ZooCodeやRooCodeも比較し、どのようなタスクに向いているか検証してみたいです。
まとめ
VS Code、Cline、ChatGPTを組み合わせることで、開発の進め方はかなり変わります。
AIをコード生成だけに使うのではなく、以下の工程まで含めて使うことで、開発全体を効率化できます。
- 要件整理
- 設計
- 実装
- テスト
- レビュー
- ドキュメント
- 運用
ChatGPTで考えを整理し、Clineで既存コードに沿って実装する。
この組み合わせは、現時点でもかなり実用的だと感じています。
特に、Clineは膨大なGitHubリポジトリを確認しながら修正できるため、既存コードに合わせた実装やテスト追加に強みがあります。
また、社内API経由でモデルに接続する構成を取れば、セキュリティや統制の観点でも企業利用しやすくなります。
実際にチームでレビューしても、大きなズレや修正がほとんどなかったことから、AIをうまく使えば上流工程から運用前確認まで十分に支援できると感じました。
これを活用すれば、開発やレビューにかかる手間を減らし、エンジニア以外のメンバーでも要件整理、ドキュメント作成、運用確認に参加しやすくなると感じています。
今後のエンジニアには、コードを書く力だけでなく、AIを使って開発全体をどう前に進めるかがより重要になっていくと思います。