Cline の使い方：AI コーディングアシスタント・ガイド (2026年版)

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 を開き、拡張機能をインストールします。

1. Ctrl+Shift+X (macOS の場合は Cmd+Shift+X) を押して拡張機能パネルを開きます。
2. "Cline" を検索します。
3. 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 は以下の手順を実行します：

1. アプローチを計画し、手順を表示します。
2. コードを含む src/server.ts ファイルを作成します。
3. 書き込み前に承認を求めます。
4. 必要に応じて 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 クレジット付与、クレジットカード不要。