Cline の使い方:AI コーディングアシスタント・ガイド (2026年版)
VS Code 対応のオープンソース AI コーディングアシスタントを使いこなす
Hyperealで構築を始めよう
Kling、Flux、Sora、Veoなどに単一のAPIでアクセス。無料クレジットで開始、数百万規模まで拡張可能。
クレジットカード不要 • 10万人以上の開発者 • エンタープライズ対応
Cline の使い方:AI コーディングアシスタントガイド (2026年版)
Cline は、VS Code 内で動作するオープンソースの AI コーディングアシスタントです。ファイルの作成、コードの編集、ターミナルコマンドの実行、さらには Web ブラウジングまで可能な自律型エージェントを提供します。単純な自動補完ツールとは異なり、Cline はコードベース全体にわたる多段階のタスクを実行できる、真の「エージェンティック(自律的)」なコーディングパートナーとして機能します。
このガイドでは、インストールから高度なワークフローまで、Cline をすぐに使いこなすためのすべてを解説します。
Cline とは?
Cline(旧称 Claude Dev)は、さまざまな LLM プロバイダーに接続し、ツール呼び出し(tool-calling)を使用して開発環境と対話する VS Code 拡張機能です。ファイルの読み書き、シェルコマンドの実行、コードベースの検索、ブラウザの使用が可能で、各ステップでユーザーに承認を求めながら動作します。
主な機能
| 機能 | 説明 |
|---|---|
| 複数ファイルの編集 | プロジェクト全体のファイルの作成、編集、削除 |
| ターミナル実行 | コマンドの実行と出力結果の解析 |
| ブラウザ統合 | Web ページをナビゲートしてドキュメントの閲覧や UI テストを実行 |
| MCP サポート | Model Context Protocol を介して外部ツールと接続 |
| マルチプロバイダー | Anthropic, OpenAI, Google, OpenRouter, ローカルモデルに対応 |
| 承認ワークフロー | 実行前に各アクションを確認・承認 |
| コンテキストメンション | @file, @folder, @url を使用してコンテキストを追加 |
ステップ 1: VS Code に Cline をインストールする
VS Code を開き、拡張機能をインストールします。
Ctrl+Shift+X(macOS の場合はCmd+Shift+X) を押して拡張機能パネルを開きます。- "Cline" を検索します。
- saoudrizwan による拡張機能の Install をクリックします。
または、ターミナルからインストールすることも可能です:
code --install-extension saoudrizwan.claude-dev
インストール後、VS Code のアクティビティバー(左側のサイドバー)に Cline のアイコンが表示されます。
ステップ 2: API プロバイダーの設定
サイドバーの Cline アイコンをクリックしてパネルを開きます。開始する前に API プロバイダーを設定する必要があります。
オプション A: Anthropic API (推奨)
Provider: Anthropic
API Key: sk-ant-xxxxxxxxxxxxx
Model: claude-sonnet-4-20250514
オプション B: OpenRouter (複数のモデルを利用)
Provider: OpenRouter
API Key: sk-or-xxxxxxxxxxxxx
Model: anthropic/claude-sonnet-4
オプション C: Ollama によるローカルモデル
Provider: Ollama
Base URL: http://localhost:11434
Model: deepseek-coder-v2
プロバイダーの比較
| プロバイダー | 最適な用途 | コスト | レイテンシ |
|---|---|---|---|
| Anthropic (Claude) | 全体的なコーディング品質が最高 | $$$ | 低 |
| OpenRouter | モデルの多様性、コストの柔軟性 | $-$$$ | 低〜中 |
| Google (Gemini) | 大規模なコンテキストウィンドウ | $$ | 低 |
| Ollama (Local) | プライバシー、オフライン利用、無料 | 無料 | 変動あり |
| OpenAI | 幅広いタスクに対応する GPT-4o | $$$ | 低 |
ステップ 3: 最初のタスクを実行する
API が設定されたら、パネル下部の入力ボックスにタスクを入力します。まずは簡単なものから始めましょう:
src/server.ts に新しい Express.js サーバーを作成してください。{ status: "ok" } を返す /api/health ヘルスチェックエンドポイントを含めてください。
Cline は以下の手順を実行します:
- アプローチを計画し、手順を表示します。
- コードを含む
src/server.tsファイルを作成します。 - 書き込み前に承認を求めます。
- 必要に応じて
npm install expressを実行します(オプション)。
各ステップを承認または拒否できます。この「Human-in-the-loop(人間が介入する)」アプローチにより、意図しない変更を防ぐことができます。
ステップ 4: コンテキストメンションを活用する
Cline は、プロンプトにコンテキストを追加するための @ メンションをサポートしています:
@src/lib/auth.ts と @src/lib/database.ts を確認して、ユーザーを認証しセッションデータを保存する新しいエンドポイントを作成してください。
利用可能なコンテキストメンション:
| メンション | 機能 |
|---|---|
@file |
特定のファイルの内容を含める |
@folder |
ディレクトリの一覧を含める |
@url |
Web ページを取得して内容を含める |
@problems |
VS Code の診断情報(エラーなど)を含める |
@terminal |
最近のターミナル出力を含める |
ステップ 5: カスタム指示(Custom Instructions)を設定する
すべての会話で一貫して適用されるカスタム指示を追加できます。Cline の設定ダイアログで以下のような指示を追加してください:
常に TypeScript の strict モードを使用すること。
React の関数コンポーネントと hooks を使用すること。
スタイリングには Tailwind CSS を優先すること。
すべての新しい関数に対して Vitest を使用してテストを書くこと。
プロジェクトの既存のコードパターンに従うこと。
これらの指示はすべてのメッセージの前に付与され、一貫したコードスタイルの維持を保証します。
ステップ 6: MCP サーバーのセットアップ
Cline は Model Context Protocol (MCP) をサポートしており、外部ツールとの連携が可能です。Cline の設定パネルの "MCP Servers" で設定を行います。
例:GitHub MCP サーバーの追加:
{
"github": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-github"],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "ghp_xxxxxxxxxxxx"
}
}
}
GitHub MCP を接続すると、Cline に以下のような依頼が可能になります:
- Issue やプルリクエストの作成
- PR のレビューやコメントの閲覧
- リポジトリ内のコード検索
- ブランチの管理
ステップ 7: ブラウザツールの使用
Cline はブラウザを起動して、Web ページの移動、要素のクリック、フォームの入力、スクリーンショットの撮影を行うことができます。これは以下のケースで役立ちます:
- URL からドキュメントを読み取る
- Web アプリケーションの動作確認
- タスクに必要な情報のスクレイピング
https://docs.stripe.com/api/charges を確認し、チャージ作成に必要なパラメータを要約してください。その後、この API をラップする TypeScript 関数を作成してください。
Cline はヘッドレスブラウザを開き、ページを読み取り、その情報を使用してコードを生成します。
ステップ 8: 自動承認設定によるコスト管理
デフォルトでは、Cline はすべてのアクションに対して承認を求めます。ワークフローを高速化するために、特定のアクションを自動承認するように設定できます。
| 設定 | 説明 |
|---|---|
| Auto-approve reads | ファイルの読み取りを自動的に承認 |
| Auto-approve writes | ファイルの書き込みを自動的に承認(注意が必要) |
| Auto-approve commands | ターミナルコマンドを自動的に承認 |
| Auto-approve browser | ブラウザアクションを自動的に承認 |
ほとんどの開発者にとって、読み取り(reads)の自動承認は安全であり、ワークフローを大幅にスピードアップさせます。書き込みやコマンドの承認については、より慎重に設定してください。
実践的なワークフロー
本番環境のエラーのデバッグ
本番環境でこのエラーが発生しています:
TypeError: Cannot read properties of undefined (reading 'map')
at UserList (src/components/UserList.tsx:23:18)
コンポーネントを確認し、バグを見つけて修正してください。再発防止のために NULL チェックを追加してください。
モジュールのリファクタリング
@src/utils/helpers.ts を以下のようにリファクタリングしてください:
1. 役割(文字列、日付、バリデーション)ごとに別ファイルに分割する
2. すべての関数に TypeScript の型を追加する
3. JSDoc コメントを追加する
4. プロジェクト全体のすべてのインポートを更新する
機能のフルスタック実装
以下の内容でユーザープロフィールページを追加してください:
1. /profile の新しいルート
2. ユーザー情報を表示する React コンポーネント
3. /api/user/profile の API エンドポイント
4. ユーザーデータを取得するためのデータベースクエリ
5. API エンドポイントのユニットテスト
Cline と他の AI コーディングツールの比較
| 機能 | Cline | GitHub Copilot | Cursor | Claude Code (CLI) |
|---|---|---|---|---|
| 複数ファイルの編集 | 対応 | 限定的 | 対応 | 対応 |
| ターミナルコマンド | 対応 | 非対応 | 対応 | 対応 |
| ブラウザ自動化 | 対応 | 非対応 | 非対応 | 非対応 |
| MCP サポート | 対応 | 非対応 | 対応 | 対応 |
| オープンソース | はい | いいえ | いいえ | いいえ |
| モデルの柔軟性 | 任意 | GPT-4o/Claude | 複数 | Claude のみ |
| インターフェース | VS Code パネル | VS Code インライン | 専用エディタ | ターミナル |
| 承認フロー | あり (アクションごと) | 自動 | 混合 | あり |
トラブルシューティング
タスク送信後に Cline が応答しない: API キーが有効であること、および選択したモデルが利用可能であることを確認してください。VS Code の出力パネル(表示 > 出力)を開き、ドロップダウンから "Cline" を選択してエラーログを確認してください。
API コストが高い: 単純なタスクには安価なモデルを使用してください。DeepSeek や Claude Haiku は、ルーチンワークにおいて Claude Opus よりも大幅に安価です。また、Ollama を介してローカルモデルを無料で使用することもできます。
ファイルの編集が不適切または不完全:
@file メンションを使用して、より多くのコンテキストを提供してください。Cline がプロジェクトの構造やパターンに関する情報を多く持っているほど、出力の質が向上します。
ブラウザツールが動作しない: Chrome または Chromium がインストールされていることを確認してください。ブラウザツールの動作には Chromium ベースのブラウザが必要です。
まとめ
Cline は、2026年時点で最も有能なオープンソース AI コーディングアシスタントの 1 つです。複数ファイルの編集、ターミナルアクセス、ブラウザ自動化、そして MCP サポートの組み合わせにより、単なる自動補完ツールを超えた、本物の自律型コーディングパートナーとなります。人間が介入する承認システムにより、高速で自律的なワークフローを実現しながらも、常にコントロールを維持することができます。
画像、ビデオ、リップシンク、トーキングアバターなどの AI 生成メディアをプロジェクトで扱う場合は、従量課金制ですべてのメディア生成を処理する統合 API Hypereal AI をチェックしてください。
Hypereal AI を無料で試す -- 35 クレジット付与、クレジットカード不要。
