[codeciaoテックブログ](https://zenn.dev/p/codeciao) 650 265
[tech](https://zenn.dev/tech-or-idea)
## はじめに
AIのコーディングアシスタントとして最近、急速に注目を集めているCline。VSCode上でAIと連携し、コード生成からバグ修正、さらにはターミナル操作まで自動化できるこのツールは、多くのエンジニアの生産性を劇的に向上させています。
mizchiさんの『 [CLINEに全部賭けろ](https://zenn.dev/mizchi/articles/all-in-on-cline) 』という記事では、
> AIから引き出せる性能は、自分の能力にそのまま比例する
> AI自体を管理するパイプライン設計を自分のコアスキルにする必要がある
ともあるように、エンジニアはClineという強力なツールの最大限を使えるようになっていくべきです。
「AIの上手な使い方」が今のエンジニアにとって必須スキルになりつつあるため、単にClineを使うだけでなく、その仕組みを理解することで得られるメリットは数多くあります。例えば、現時点でのClineの得手・不得手を理解することでAIに対して的確に指示ができたり、clinerulesなどの機能を使いこなせたり。
だからこそ今、Clineと言ったAIのコーディングアシスタントがそもそもどう動いているのか、何が画期的でそれをどう活かせば良いのか、この記事ではオープンソースである [Clineのコード(ver3.5)](https://github.com/cline/cline) をもとにClineの動作原理を段階的に解説します。
## Clineの概要
## Clineとは何か
まず、Clineをあまり触ったことがない人向けの説明をすると、Clineとはプログラミングの作業をサポートしてくれる、VSCodeなどのエディター上で機能する拡張機能です。ユーザーの要望に対し、Clineが適切な処理を加えてClaudeやChatGPTといったAIアシスタントと対話することで以下のことを自動で行います：
- コード生成・編集: プロジェクト上のフォルダー構造を読み取り、適切なファイルを生成・編集
- バグ修正: コードの不具合を自動的に見つけて修正
- ターミナル操作: ターミナルを使用したコマンドの実行
- ブラウザ操作: Webアプリの動作確認などのために、ブラウザを自動で操作し、UIの確認やエラーのチェック
例えば、Reactベースのフロントエンドのホームページ開発の中で、Clineに対して、「今のホームページのデザインをもとにお客様用のお問い合わせフォームのページを作成して」とメッセージを送ると、ClineはClaudeなどのAIを使いながら自動的に今のプロジェクト内のファイルを解析し、既存のデザインを参考にお問い合わせフォームを生成、さらには自動でプロジェクトをコンパイルし、ブラウザを立ち上げてきちんと実装できているかのチェックまでを全てやってしまいます。
## 実行フローの基本
Clineの簡易的な実行フローを図にすると、以下のようになります。
この実行フローをもとに、先程の例をより解像度を上げて説明すると：
1. ユーザーが「今のホームページのデザインをもとにお客様用のお問い合わせフォームのページを作成して」とClineに送る
2. Clineはユーザーの文章に加え、今のプロジェクトの環境の情報やファイル構造、システムプロンプト（後ほど説明します）を追加したメッセージをAIアシスタントに送信する
3. AIがClineにツールを使うようにと指示（例えば、ファイル編集は `write_to_file` 、ブラウザ操作は `browser_action` 等）
4. ClineがVSCode上でツールの実行し、実行結果をAIに返す
5. これをもとに、AIが次のツールを指示する
6. 再度Clineがツールを実行し、実行結果をAIに返す、AIが次の指示、、、というのを繰り返し、AIが完成したと判断すれば終了
Clineが現時点で他のツールより画期的と言われる所以は、ClineとAIアシスタントがなるべく人間を介さず、自動的に実行→修正のループを行うところです。今はAIが文章を返し終わるまでのタイムラグがあるため、この修正ループはある程度の時間を要しますが、それでも人間が行うよりずっと速く修正を行うことができます。
この過程で、アシスタントはターミナルを（人間がapproveする限り）任意の操作ができるため、 `sudo rm -rf /` でOSごとぶち飛ばそうとしたり、ssh-keyを読み込んだりと、セキュリティーに問題がある操作ができる可能性があるため、「パンドラの箱」とも呼ばれています。
---
ちなみに、この実行フローから分かる通り、コードの修正といったユーザーの要望を満たすための「思考」をまかなっているのがChatGPTやClaudeといったAIアシスタントです。Clineはユーザーの代わりにコンテキスト情報の追加やツールの使用を行ったり、適切な指示をAIアシスタントから引き出せるようにプロンプトを追加したりなどの処理を行っています。
Clineの仕組みの解像度が上がったところで、次に、コードをもとにさらに詳細にClineの実装を見ていきます。
## Clineの内部構造
前述の説明の通り、Clineはユーザーを介さずともAIが提案する変更を素早く反映できるように実装されています。ここからはClineのより詳細な内部構造について、githubのリポジトリをもとにClineのロジックを見ていきます。
## アシスタントとの対話の仕組み
### システムプロンプトの設計
Clineの実行フローの中で一番大事なのはアシスタントに送る最初のメッセージの作成です。
ここではユーザーのメッセージに加え、ユーザーの環境情報とシステムプロンプトを1つにまとめてアシスタントに送信します。
環境情報では、アシスタントがプロジェクトのコンテキストをより詳細に理解できるように以下の内容などを追加します
- ユーザーが使用しているOS情報
- 返答の際の言語設定
- ホームディレクトリなどの環境情報
- `.clinerules` ファイルに定義されたプロジェクト固有のルール
- `.clineignore` に指定された無視すべきファイル情報
[システムプロンプト](https://github.com/cline/cline/blob/main/src/core/prompts/system.ts) はClineの中で最も重要と言っても良い部分で、AIがユーザーの要求に対してどのような形で返信すればいいかのをマニュアルとして定義しています。
このプロンプトでは、アシスタントがコードを解析・編集する際に使用できるツールとその使い方が詳細に定義されています。アシスタントからの返答をもとに、Clineはツールの実行をするので、アシスタントが的確な指示を出してくれるように細かくマニュアルを定義しています。
例えば、アシスタントがユーザーの要求を満たす一環で `src/main.js` のファイルの中身を読みたいと判断した場合、
```
<read_file>
<path>src/main.js</path>
</read_file>
```
という感じでread\_fileのツールを使えば良いというようなことをClineに返せばいいと、システムプロンプトではツールごとに説明しています。Cline側では `<read_file>` や `path` といった情報を受け取り、読み込むことでツールを実行しています。
### プロンプトの工夫
[原文のプロンプト](https://github.com/cline/cline/blob/main/src/core/prompts/system.ts) は非常に長文ですが、AIアシスタントがClineの目的に沿った返答をするための工夫が色々あり、結構面白いです。
例えば、会話の効率化を図るため、アシスタントに冗長な会話をさせないよう [`You should NOT be conversational in your responses`](https://github.com/cline/cline/blob/f14542d61f0ac4be5ebb2cbe7f3634679e2e2588/src/core/prompts/system.ts/#L938) と指示していたり、無駄な対話の排除するために [`DO NOT continue in pointless back and forth conversations`](https://github.com/cline/cline/blob/f14542d61f0ac4be5ebb2cbe7f3634679e2e2588/src/core/prompts/system.ts/#L976) という指示をしています。
また、Clineはユーザーからの入力を少なくしたいため、ユーザーに追加質問をする、 `ask_followup_question` のツール定義では [`Use this tool judiciously to maintain a balance between gathering necessary information and avoiding excessive back-and-forth`](https://github.com/cline/cline/blob/f14542d61f0ac4be5ebb2cbe7f3634679e2e2588/src/core/prompts/system.ts/#L216) (必要な情報を収集することと、過度なやりとりを避けることのバランスを保つために、このツールは賢明に使用してください)と書かれていたりします。
## アシスタントが利用可能なツール一覧と機能
システムプロンプトでは以下のツールが定義されています。
| カテゴリ | ツール名 | 説明 |
| --- | --- | --- |
| **コマンド実行** | execute\_command | CLI上でコマンドを実行。サーバー起動や依存パッケージのインストールなど。 |
| **ファイル操作** | read\_file | 指定パスのファイル内容を取得 |
| | write\_to\_file | 新規ファイル作成・上書き |
| | replace\_in\_file | 既存ファイルの編集 |
| **ファイル・コード探索** | search\_files | regexパターンをもとにファイル検索 |
| | list\_files | ディレクトリ内のファイルの一覧表示 |
| | list\_code\_definition\_names | ソースコードから関数・クラス等の定義名を抽出 |
| **ブラウザ操作** | browser\_action | Puppeteerを使った、URL閲覧、クリック、入力、スクロールなどのブラウザ操作 実行結果はスクリーンショットやコンソールログを通してアシスタントに返信 |
| **MCP関連** | use\_mcp\_tool | 外部APIの連携や機能拡張といった、MCPツールの実行 |
| | access\_mcp\_resource | MCPサーバーのリソースにアクセス |
| **ユーザー対話** | ask\_followup\_question | ユーザーに追加質問をしたいときに使用 |
| | attempt\_completion | タスク完了後、最終結果をユーザーに提示 |
| | plan\_mode\_response | PLAN MODE中に解決策の計画を立てる（ACT MODEでは利用不可） |
| **その他** | thinking | アシスタントの思考プロセスを明示。判断過程の透明化。 |
## Clineの自動返答
Clineがアシスタントから指示されたツールを使用したとき、成功した場合はその結果を返信します。
例えば、アシスタントが `src/ui/contact.ts` を `read_file` するよう指示すると、Clineがファイルを読んで以下のメッセージをアシスタントに返します
```
[read_file for 'src/ui/contact.ts'] Result: // 以下ファイル中身
```
他には、ファイルの編集・保存のツールを使用したときは反映された内容とvscodeのauto-formatterの実行結果、コンパイルエラーなど、アシスタントが必要になりそうな情報を抜かりなく返します。
また、Clineがツールの使用に失敗したときや、そもそもメッセージのフォーマットが不適切でツールが使用できないときなどのエラーメッセージは [responses.ts](https://github.com/cline/cline/blob/main/src/core/prompts/responses.ts) に定義されています。
例えば、アシスタントがツールを使わずに返答した場合は、お叱りのメッセージとして [`\[ERROR\] You did not use a tool in your previous response! Please retry with a tool use.`](https://github.com/cline/cline/blob/f14542d61f0ac4be5ebb2cbe7f3634679e2e2588/src/core/prompts/responses.ts/#L15)を自動返信します。
## ソースコードから見る実行フロー
Clineのロジックのエントリーポイントは [Cline.ts](https://github.com/cline/cline/blob/main/src/core/Cline.ts) に定義されています。このファイルには、ユーザーからのメーセージからアシスタントとの対話、ツールの実行に至るまでの一連の処理が実装されています。
## 実行フローの全体像
## 主要部分の解説
### 1\. タスクの初期化と実行
- **タスク開始**: ユーザーからのメッセージを受け取り、新規タスクなら [`startTask()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L765) 、既存タスクなら [`resumeTaskFromHistory()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L790) を呼び出す。
- **タスク実行ループ**: [`initiateTaskLoop()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L1037) でAIアシスタントとの対話ループを開始
- **APIリクエスト**: [`recursivelyMakeClineRequests()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L2967) と [`attemptApiRequest()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#1260) を通してAIアシスタントにプロンプトを送信
### 2\. メッセージの処理
- **ストリーム処理**: AIアシスタントからの応答をストリームとして受信し、新たにメッセージを受け取るたびに処理
- **メッセージ解析**: [`parseAssistantMessage()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/assistant-message/parse-assistant-message.ts#L3) でアシスタントのメッセージをパース・読み込み、テキストかツール使用かに分類した上で適切に処理
- **メッセージ表示**: パースされたメッセージは [`presentAssistantMessage()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/assistant-message/parse-assistant-message.ts#L3) でユーザーに表示
### 3\. ツールの実行
- **自動承認チェック**: ツール使用指示が検出されると、 [`shouldAutoApproveTool()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L1229) によって自動承認可能かどうかが判断
- **ユーザー承認**: 自動承認できない場合は、 [`askApproval()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L1587) によってユーザーに承認が求める
- **ツール実行**: 承認されたツールは、対応する実行関数によって処理
- **チェックポイント保存**: ツール実行後、 [`saveCheckpoint()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L1079) によって現在の状態がチェックポイントとして保存
ちなみに、ツールの処理 [switch case](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L1660-L2933) の分岐でツールごとに処理し、実行結果によって自動返信の内容を作成しています。
### 4\. 状態管理
- **メッセージ保存**: [`saveClineMessages()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L233) で会話履歴を保存
- **タスク履歴更新**: [`updateTaskHistory()`](https://github.com/cline/cline/blob/0fc2f474a46092fa692e704ca33520d8a5974f4c/src/core/Cline.ts#L253) でタスク履歴を更新
- **ユーザーコンテンツ追加**: ツールの実行結果は次のAPIリクエスト送信時にユーザーコンテンツとしてメッセージに追加
より詳細な部分はソースコードなどを見てみても良いかもしれません。
ちなみにClineのレポジトリーも自身の開発にClineを使っているらしく、レポシトリーに.clinerulesを定義したりしていますね。（gitの開発においても、初期段階からgitを使って自身のバージョン管理を行っているのに似てますね。）
## 実装上の工夫とテクニック
自分自身、Clineのソースコードで見つけた工夫を紹介します。
- **プロンプトのキャッシュ**
ClaudeやDeepSeekはチャットにキャッシュを使うことができるため、事前にアシスタントにシステムプロンプトを全て読み込ませることで毎回プロンプトを送ることを防ぎ、APIの費用カットを行う
- **チャット履歴の短縮**
チャットの履歴がそのAIアシスタントのコンテキストウィンドウの限度に近づいてきた場合、この限度を超えないように、Clineは自動的に古いチャット履歴を削除していくことでウィンドウを縮小
- **gitの使用**
ユーザーがアシスタントとのチャットの会話を遡って過去の状態に戻したいときに対応するため、Cline内で `simple-git` を使用したチェックポイントのシステムを導入
- **失敗が多すぎたときの処理**
アシスタントからの返答をパースしたり、ツールを実行したときにエラーが多すぎたときはこれ以上アシスタントにメッセージを送っても無意味と判断し、チャットを中断
- **web検索**
ユーザーが公式ドキュメントのリンクを渡したりした場合、Cline側で自動的のその情報をスクレイピングし、アシスタントに引き渡す
## リポジトリ構造：Clineの全体像
以下、参考までにClineのリポジトリの `src` ディレクトリ内の主要なフォルダーを示します
```
src/
├── api/ # 各種LLMプロバイダー連携
│ └── Anthropic, DeepSeek, OpenAI等との接続・メッセージ整形
│
├── core/ # Clineの中核機能
│ ├── assistant-message/ # アシスタント返答の解析
│ ├── ignore/ # .clineignoreファイル処理
│ ├── mentions/ # @を使用した参照の処理
│ ├── prompts/ # プロンプト定義
│ ├── sliding-window/ # 会話履歴管理
│ ├── webview/ # UI実装
│ └── Cline.ts # メインクラスと実行フロー
│
├── integrations/ # VSCode統合機能
│ ├── checkpoints/ # git利用の状態保存・復元
│ ├── debug/ # デバッグ情報出力
│ ├── diagnostics/ # エラー検知・処理
│ ├── editor/ # diff表示・返答検証
│ ├── misc/ # 補助機能(MD出力、画像処理等)
│ ├── notifications/ # 通知処理
│ ├── terminal/ # ターミナル操作
│ ├── theme/ # UI色調整
│ └── workspace/ # ファイル管理・パス処理
│
└── services/ # 外部サービス連携・特殊機能
├── auth/ # 認証関連
├── browser/ # Puppeteerブラウザ操作
├── glob/ # ファイル検索・パターンマッチング
├── logging/ # ログ出力
├── mcp/ # Model Context Protocol拡張管理
├── ripgrep/ # regex検索
├── telemetry/ # 使用状況データ収集
└── tree-sitter/ # コード構造解析
```
## まとめ
この記事ではCline内部の動作原理を深掘りしました。
Clineの革新性は以下の点です：
- アシスタント型の自律的な動作：AIがコンテキストを理解し、必要なツールを選択して自動的に実行する仕組み
- プロジェクト全体の理解：ファイル構造からコードの意図まで、プロジェクト全体を文脈として捉えられる設計
- 対話の最小化：ユーザーとの不要な往復を減らし、タスク完了に焦点を当てたプロンプト設計
## Clineを最大限活用するために
1. プロジェクト固有のルールの設定
- .clinerulesファイルに、プロジェクトの概要、アーキテクチャ、コーディング規約、重要なファイルの役割などを詳細に記述する
- プロジェクトの背景知識や目的を明確に伝えることで、AIの理解度と生成コードの質が飛躍的に向上する
- 例：「このプロジェクトでは状態管理にReduxを使用し、すべてのAPIリクエストは/src/apiディレクトリに集約している」
- Clineを使っている中で、アシスタントが関係ないファイルを読み込もうとしたり、意図しないツールを使用した場合、都度、clinerulesに説明を追加してどんどん最適化
2. 明確かつ具体的な指示を出す
- Clineはユーザーとのやり取りを最小限にしたいため、最初の指示で目的、制約条件、期待する結果を明確に伝える
- 「新しい機能を追加して」ではなく「ユーザー認証機能を追加し、JWTトークンを使用してセッション管理を行う。既存の/src/authモジュールを参照して実装する」など具体的に
3. 複雑なタスクの分解
- Clineは1つの指示で修正を全て加えようとするため、複雑なタスクは 分析→計画→実装という流れで指示する
- 最初にplanモード「このプロジェクトの構造を分析して」と依頼し、その後「以下の機能を実装するプランを立てて」と続け、最後にactモードで「プランに従って実装して」と、段階的に指示
4. ツールの自動承認を適切に
- Clineがパンドラの箱にならないよう、開発初期段階では各操作を確認しながら進め、Clineの動作傾向を理解する
- 信頼できるようになったら、読み取り系のツールや特定ディレクトリへの書き込みなど、安全なオペレーションの自動承認を設定する
## Clineの今後の展望
Clineは急速に進化しています。毎日のようにPRが出され、機能が拡充されていく中で、以下のことが充実していくでしょう：
- MCPのさらなる拡張
- データベース、API、クラウドサービスとの直接連携
- 外部データベースやドキュメントの参照機能
- AWSなどのステータスやエラーの詳細を自動で取得
- セキュリティ機能の向上
- より細かくツールの承認を設定
- 機密情報の自動マスキング
- コンテキスト理解の向上
- ClaudeやGeminiなどが処理できるコンテキストウィンドウの向上
- 最新の公式ドキュメントを参照したコードの変更
エンジニアとしての役割は、AIをいかに使いこなせるかが今後大事になってきます。mizchiさんが言うように「AIから引き出せる性能は、自分の能力にそのまま比例する」のであれば、Clineの内部動作を理解し、より効果的に指示を出せるように今のうちになっていきましょう。
650 265