VSCodeでAIコーディングを始めよう！Cline完全入門ガイド【初心者向け】

Last updated at 2026-03-16Posted at 2026-03-09

この記事は 2026年3月 時点の情報をもとに作成しています。Clineは活発に開発が続いているため、UIや機能が変わっている場合があります。

はじめに

「AIを使ってコードを書きたいけど、どこから始めればいい？」

そんな悩みを持つ方に最適なツールが Cline（クライン） です。

ClineはVisual Studio Code（VSCode）に追加できる無料の拡張機能で、AIがあなたの代わりにコードを書いたり、ファイルを編集したり、コマンドを実行したりしてくれます。しかも、すべての操作に対してあなたが承認するかどうかを決めるので、意図しない変更が起きる心配もありません。

この記事では、Clineをインストールしてから実際にコードを書いてもらうまでを、スクリーンショットを交えて丁寧に解説します。

Clineとは？

Clineは「自律型AIコーディングエージェント」と呼ばれるVSCode拡張機能です。

普通のAIチャット（ChatGPTなど）は「コードを提案するだけ」ですが、ClineはVSCodeに直接組み込まれているため、以下のことを自動でやってくれます：

できること	説明
ファイルの作成・編集	新しいファイルを作ったり、既存ファイルを修正
コマンドの実行	npm install や python コマンドを自動実行
ブラウザ操作	Webページを開いて情報収集や動作確認
エラーの修正	エラーを読んで自動的に修正を試みる
MCP連携	外部ツール・サービスと接続して機能を拡張

対応しているAIモデル

Clineは特定のAIに縛られず、さまざまなプロバイダーのモデルが使えます：

プロバイダー	主なモデル	特徴
Anthropic	Claude 3.7 Sonnet, Claude Opus 4	高性能・コーディングが得意
OpenAI	GPT-4o, o3-mini	汎用性が高い
Google	Gemini 2.5 Pro, Gemini 2.0 Flash	コスト効率が良い
OpenRouter	多数のモデル	1つのAPIキーで複数モデルを試せる
AWS Bedrock	Claude, Llama など	AWSユーザーに便利
ローカル（Ollama）	LLaMA, Mistral など	無料・プライバシー重視

初心者のおすすめ：まずは OpenRouter から始めると、複数のモデルを試せて便利です。クレジットカードを登録すれば少額から利用できます。

インストール方法

ステップ1：VSCodeをインストール

まだVSCodeが入っていない方は、公式サイトからダウンロードしてください。

👉 https://code.visualstudio.com/

ステップ2：Cline拡張機能をインストール

VSCodeを開く
左サイドバーの 拡張機能アイコン（四角が4つ並んだアイコン）をクリック
検索ボックスに Cline と入力
「Cline」（作者：Cline Bot Inc.）を見つけてインストール

ショートカット：

Windows/Linux: Ctrl + Shift + X
Mac: Cmd + Shift + X

インストールが完了すると、左サイドバーにClineのアイコン（ロボットのようなアイコン）が追加されます。

ステップ3：Clineパネルを開く

左サイドバーのClineアイコンをクリックすると、Clineのチャットパネルが右側（またはサイドバー）に開きます。

初回は 「APIプロバイダーを設定してください」 という画面が表示されます。

APIキーの設定

ClineはAIモデルと通信するために APIキー が必要です。ここでは最もおすすめの OpenRouter と Anthropic の設定方法を説明します。

OpenRouterを使う場合（初心者におすすめ）

OpenRouterは複数のAIモデルを1つのAPIキーで利用できるサービスです。

① OpenRouterのアカウント作成

https://openrouter.ai/ にアクセス
「Sign Up」でアカウント作成（Googleアカウントでも可）
ダッシュボードの「API Keys」→「Create Key」でAPIキーを生成
表示されたキー（sk-or-v1-...）をコピー

② ClineにAPIキーを設定

Clineパネル右上の 歯車アイコン（⚙） をクリック
「API Provider」で OpenRouter を選択
「OpenRouter API Key」欄に先ほどコピーしたキーを貼り付け
「Model」で使いたいモデルを選択（例：anthropic/claude-3.7-sonnet）
「Save」ボタンをクリック

Anthropicを使う場合

① Anthropicのアカウント作成

https://console.anthropic.com/ にアクセス
アカウントを作成してログイン
「API Keys」→「Create Key」でAPIキーを生成
表示されたキー（sk-ant-...）をコピー

② ClineにAPIキーを設定

Clineパネルの設定画面を開く
「API Provider」で Anthropic を選択
APIキーを入力して保存

APIキーは秘密情報です！ APIキーは絶対にGitHubなどに公開しないでください。~/.zshrc や .env ファイルで管理するか、VSCodeの設定に直接保存してください。

基本的な使い方

設定が完了したら、実際にClineを使ってみましょう。

チャットで指示を送る

Clineパネルのテキストボックスにやってほしいことを日本語で入力して、Enterキーを押します。

例：Hello World を作ってみる

Python で Hello World を表示するプログラムを作ってください

Clineは以下のような流れで動きます：

1. 計画を立てる（どのファイルを作るか）
     ↓
2. 「hello_world.py を作成してもいいですか？」と承認を求める
     ↓
3. あなたが「承認（Approve）」をクリック
     ↓
4. ファイルを作成する
     ↓
5. 「コマンドを実行してもいいですか？ → python hello_world.py」と聞く
     ↓
6. あなたが承認 → 実行結果を確認

承認ボタンについて

Clineは操作ごとにあなたの許可を求めます：

ボタン	意味
Approve（承認）	この操作を許可して実行する
Deny（拒否）	この操作をキャンセルする
Auto-Approve	同じ種類の操作は今後自動で許可する

最初は1つずつ確認しながら進めることをおすすめします。

よく使う指示の例

# ファイル作成
「React で ログインフォームのコンポーネントを作ってください」

# バグ修正
「このエラーを直してください: TypeError: Cannot read property 'map' of undefined」

# コード説明
「このコードを日本語で説明してください」

# リファクタリング
「このコードを読みやすく整理してください」

# テスト作成
「この関数のテストコードを書いてください」

実践：簡単なWebアプリを作ってみよう

Clineの使い方がわかったところで、実際にちょっとしたWebアプリを作ってみましょう。

シナリオ：ToDoリストアプリを作る

① プロジェクトフォルダを作る

VSCodeで新しいフォルダを開きます（File → Open Folder）。

② Clineに指示する

以下のようにテキストボックスに入力します：

HTMLとJavaScriptだけで動くシンプルなToDoリストアプリを作ってください。
機能：
- タスクの追加
- タスクの完了チェック
- タスクの削除
1ファイル（index.html）にすべてまとめてください。

③ Clineが作業を開始

Clineが計画を立て、ファイル作成の承認を求めてきます。「Approve」をクリックすると、index.html が自動的に作成されます。

④ 動作確認

作成された index.html をブラウザで開くと、ToDoリストアプリが完成しています！

エラーが出た時の対処法

Clineは自分でエラーを修正しようとしますが、それでも解決しない場合は以下のように伝えましょう：

# エラーメッセージをそのまま貼り付ける
「以下のエラーが出ています。修正してください：
[エラーメッセージをここに貼り付け]」

# スクリーンショットを使う（Clineは画像も理解できます）
「このスクリーンショットのエラーを直してください」

MCP（Model Context Protocol）連携

MCP（Model Context Protocol）は、Clineをさまざまなツールやサービスにつなげるための仕組みです。MCPを使うと、Clineの能力を大幅に拡張できます。

MCPとは？

MCPサーバーとは「Clineに特定の能力を追加するプラグイン」のようなものです。

MCP Marketplaceの使い方

ClineにはMCPサーバーを簡単に追加できる MCP Marketplace が内蔵されています。

① MCPパネルを開く

Clineパネル上部の 「MCP Servers」アイコン をクリックします。

② Marketplaceからインストール

「Marketplace」タブを開くと、利用可能なMCPサーバーの一覧が表示されます。

MCPサーバー	機能
Brave Search	Web検索ができるようになる
GitHub	GitHubのIssue・PRを操作できる
Filesystem	ローカルファイルを安全に操作
PostgreSQL	データベースに接続・クエリ実行
Puppeteer	ブラウザを自動操作
Slack	Slackチャンネルの読み書き

③ インストール例：Brave Search

Marketplaceで「Brave Search」を見つける
「Install」ボタンをクリック
Brave Search APIキーを入力（https://api.search.brave.com/ で取得）
設定を保存

インストール後、Clineに「○○についてWeb検索してください」と頼むと、実際にWebを検索して情報を取得してくれるようになります。

手動でMCPサーバーを設定する

Marketplaceにないサーバーは、設定ファイルに直接記述して追加できます。

設定ファイルの場所：

Mac: ~/Library/Application Support/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json
Windows: %APPDATA%\Code\User\globalStorage\saoudrizwan.claude-dev\settings\cline_mcp_settings.json
Linux: ~/.config/Code/User/globalStorage/saoudrizwan.claude-dev/settings/cline_mcp_settings.json

設定例（Brave Search MCPサーバー）：

{
  "mcpServers": {
    "brave-search": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-brave-search"],
      "env": {
        "BRAVE_API_KEY": "ここにAPIキーを入力"
      }
    }
  }
}

Node.jsが必要！ 多くのMCPサーバーはNode.jsで動きます。Node.jsのバージョン18以上をインストールしておきましょう。

👉 https://nodejs.org/

実践：Web検索MCPを使ってみる

Brave Search MCPをインストールした後、以下のように指示してみましょう：

最新のReact 19の新機能をWeb検索して、日本語でまとめてください

Clineが自動的にWeb検索し、最新情報を取得してまとめてくれます。

よくある質問（FAQ）

Q1. 無料で使えますか？

Cline自体は無料のオープンソースソフトウェアです。ただし、AIモデルのAPIを使うため、API利用料金が発生します。

プロバイダー	料金の目安
OpenRouter	従量制（$0.001〜$0.02 / 1000トークン程度）
Anthropic	従量制（Claude Sonnetで$3〜$15 / 百万トークン）
Ollama（ローカル）	完全無料（ただしPCスペックが必要）

月に数回しか使わない場合は、数十円〜数百円程度のことが多いです。

Q2. 日本語での指示はできますか？

はい、完全に日本語で指示を出せます。英語に翻訳する必要はありません。

Q3. コードをGitHubに誤って公開されませんか？

Clineは 必ず承認を求めてから 操作を行います。GitHubへのプッシュも同様で、コマンドを自動実行する前に必ず確認が入ります。

Q4. Cursorや GitHub Copilotとの違いは？

ツール	種類	特徴
Cline	VSCode拡張機能（無料）	AIエージェント型、MCP対応、モデル自由
GitHub Copilot	VSCode拡張機能（有料$10/月〜）	コード補完が得意、Microsoftとの統合
Cursor	独立したエディタ（有料$20/月〜）	VSCodeベース、エディタ全体がAI最適化

Q5. APIキーが盗まれたりしませんか？

APIキーはVSCodeの設定としてローカルに保存されます。ネットワーク通信はAIプロバイダー（Anthropicなど）に直接送られるため、Cline側のサーバーを経由しません。ただし、.env ファイルなどにキーを書いた場合は .gitignore に追加するのを忘れずに。

Clineをもっと使いこなすヒント

カスタム指示を設定する

Clineには「毎回の指示に追加する固定ルール」を設定できます。

設定画面の 「Custom Instructions」 に以下のような内容を書いておくと便利です：

- コードにはコメントを日本語で書いてください
- エラー処理を必ず追加してください
- 変数名はわかりやすい英語にしてください
- 変更を加える前に、何をするかを日本語で説明してください

コンテキストを効果的に伝える

Clineに「@」を入力すると、ファイルやフォルダを参照として追加できます：

@src/components/Button.jsx を参考に、同じスタイルで Input コンポーネントを作ってください

「.clinerules」ファイルでプロジェクトのルールを管理する

.clinerules は Cline に 「このプロジェクトではこのルールに従って」 と指示するための設定ファイルです。インストラクションをコードとして管理するという考え方に基づいており、Gitでバージョン管理できます。

ファイル vs ディレクトリ：2つの形式

① 単一ファイル方式（シンプルなプロジェクト向け）

プロジェクトルートに .clinerules ファイルを作成します：

# プロジェクト固有のルール
- このプロジェクトはNext.js 14（App Router）を使っています
- スタイルはTailwind CSSで記述してください
- TypeScriptを使用してください
- テストはVitestで書いてください
- コメントは日本語で書いてください

② ディレクトリ方式（大規模プロジェクト・チーム向け）

.clinerules/ ディレクトリを作成し、用途別にMarkdownファイルを分割管理します：

my-project/
├── .clinerules/
│   ├── 01-coding-style.md        # コーディングスタイル
│   ├── 02-documentation-rules.md # ドキュメントルール
│   ├── 03-testing-standards.md   # テスト基準
│   └── react-patterns.md         # React固有のパターン
└── src/
    └── ...

Global ルール vs Workspace ルール

Clineのルールは2種類あります：

種類	保存場所	適用範囲
Global ルール	Mac/Linux: `~/Documents/Cline/Rules` Windows: `%USERPROFILE%\Documents\Cline\Rules`	すべてのプロジェクトに共通で適用
Workspace ルール	プロジェクトルートの `.clinerules` または `.clinerules/`	特定のプロジェクトのみに適用

Global ルールの例：

# global-style.md（すべてのプロジェクトで常に適用）
- コードには必ずコメントを日本語で書いてください
- エラー処理を必ず追加してください
- 変数名はわかりやすい英語にしてください

ルールのトグル機能（v3.13以降）

Cline v3.13から、チャット入力欄の下に ルール管理ポップオーバー が追加されました。

有効なGlobal / Workspaceルールの一覧を確認できる
クリック1つでルールのON/OFFを切り替えられる
「+」ボタンで新規ルールファイルを作成できる
作業内容に応じてルールを柔軟に切り替え可能（コーディング中・テスト中・ドキュメント作成中など）

AIがルールを自己編集できる

.clinerules はただのテキストファイルなので、Cline自身がルールを読み書き・編集できます。たとえば：

「api-style-guide.md のルールにページネーション規格のセクションを追加してください」

と指示すると、Clineがルールファイルを直接更新してくれます。ルールを育てながらプロジェクトを進められます。

チームでの活用

.clinerules をGitリポジトリにコミットすると：

新しいチームメンバーがcloneするだけで同じルールを共有できる
ルールの変更履歴をGitで管理できる
PRレビューでルール変更を確認できる

git add .clinerules/
git commit -m "Add project coding standards for Cline"

セキュリティ上の注意：信頼できないリポジトリの .clinerules ファイルには注意してください。.clinerules ディレクトリ内のMarkdownファイルはClineが自動的に解釈するため、悪意ある指示が含まれている可能性があります。必ず信頼できるソースの .clinerules ファイルのみを使用してください。

まとめ

Clineを使い始めるステップをおさらいします：

VSCodeをインストール
Cline拡張機能をインストール
OpenRouter（またはAnthropic）でAPIキーを取得・設定
日本語で指示を送る
承認ボタンで操作を確認しながら進める
慣れてきたら MCPサーバー を追加して機能を拡張
.clinerules でプロジェクトルールを設定してチームで共有

最初は小さなタスク（ファイルを1つ作る、関数を修正するなど）から試してみてください。慣れてくると、数十分かかっていた作業が数分で終わるようになります。

ぜひClineを使って、快適なAIコーディングライフを楽しんでください！🚀

参考リンク

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up