導入・環境構築 level: 初級

Cline完全導入ガイド｜VSCodeで動くAI自律コーディングエージェント

VSCodeの拡張機能として動くオープンソースAIエージェント「Cline」の導入から最初の成功体験まで、コマンドや画面操作を省かずに解説します。

Clineを使うと何ができるようになるか

Clineを導入すると、「やりたいこと」を日本語で指示するだけで、AIがファイルの作成・編集・ターミナルコマンドの実行・ブラウザ操作まで代わりにやってくれるようになります。

たとえば、こんなことが可能です。

  • 「Pythonで簡単なTodoアプリを作って」と打つと、ファイル構成から実装まで一気に進む
  • 「このエラーを直して」と貼り付けるだけで、原因特定→コード修正→動作確認の流れをこなす
  • 複数ファイルにまたがる変更を一括で実行してもらう

ただし、Clineはすべての操作をあなたの承認なしには実行しません。「このファイルを書き換えていいですか？」「このコマンドを実行していいですか？」と毎回確認してくれるため、AIが暴走して大事なファイルを壊す心配がない安心設計です。まるでペアプログラミングの相手がいるような感覚で使えます。

---

どんな人に向くか・向かないか

向いている人

  • コードは書けないorほぼ書けないが、アプリを作りたい個人開発者
  • ChatGPTにコードを生成させてはコピペしている作業を自動化したい人
  • 複数ファイルにわたる修正・リファクタリングを任せたい人

向いていない人

  • VSCodeを一切使いたくない人（ClineはVSCode上で動くため）
  • AIの判断を一切信頼したくない・全部自分でコードを書きたい人
  • APIの従量課金（使った分だけ料金がかかる仕組み）に抵抗がある人

> 💡 Cline自体は無料のオープンソースです。ただし内部でAIモデルを呼び出すため、利用するAIプロバイダーへのAPI料金が別途かかります（後述）。

---

前提条件

導入前に以下を確認してください。

必要なもの備考
Visual Studio Code (VSCode)無料。公式サイト（code.visualstudio.com）からインストール
AIプロバイダーのAPIキーAnthropic / OpenAI / OpenRouterなど（後述）
インターネット接続—

APIキーの選び方：初心者にはOpenRouterがおすすめ

APIキー（AIを呼び出すための「合言葉」のようなもの）は、複数のサービスから取得できます。初心者には OpenRouter がおすすめです。理由は1つのAPIキーでClaude・GPT・Geminiなど多数のモデルを切り替えられるからです。料金はクレジット制（先にチャージして使った分だけ引かれる仕組み）で、詳細は公式サイト（openrouter.ai）をご確認ください。

---

導入手順

ステップ1：ClineをVSCodeにインストールする

  1. VSCodeを起動する
  2. 左サイドバーの 拡張機能アイコン（四角が4つ並んだアイコン）をクリック、またはショートカットキーを押す
Windows/Linux: Ctrl + Shift + X
Mac:           Cmd  + Shift + X
  1. 検索ボックスに Cline と入力する
  2. 「Cline」（発行者：Cline AI）を見つけて 「Install」 をクリックする
  3. インストール完了後、左サイドバーにClineのアイコンが表示される

> 📝 拡張機能のID（内部識別名）は saoudrizwan.claude-dev です。検索で見つからない場合はこのIDで直接検索してください。

---

ステップ2：AIプロバイダー（OpenRouter）のAPIキーを取得する

  1. ブラウザで https://openrouter.ai/ を開く
  2. 「Sign In」からGoogleまたはGitHubアカウントでログイン
  3. 右上のメニュー → 「Keys」 をクリック
  4. 「Create Key」ボタンでAPIキーを発行し、表示された文字列をコピーしておく

> ⚠️ APIキーはこの画面を閉じると二度と表示されません。必ずメモ帳などにコピーしておきましょう。

---

ステップ3：ClineにAPIキーを設定する

  1. VSCode左サイドバーの Clineアイコン をクリックしてパネルを開く
  2. 初回起動時はプロバイダー設定画面が表示される

- 表示されない場合は、パネル内の 歯車アイコン（⚙️） をクリック

  1. 「API Provider」のドロップダウンで OpenRouter を選択
  2. 「OpenRouter API Key」欄に先ほどコピーしたAPIキーを貼り付ける
  3. 「Model」で使いたいモデルを選択する（迷ったら anthropic/claude-sonnet-4 や deepseek/deepseek-chat などが人気）
  4. 設定を保存する

これで準備完了です。

---

最初にやってみること（小さな成功体験）

まずは小さなタスクで動作を確認しましょう。

練習課題：HTMLファイルを1から作ってもらう

  1. VSCodeで空のフォルダを開く（File → Open Folder）
  2. Clineパネルのテキスト入力欄に以下のように打ち込んで送信する
「index.html」を作成してください。
内容は「Hello, Cline!」と大きく表示するシンプルなページでOKです。
  1. Clineが「このファイルを作成してよいですか？」と確認してくる → 「Approve」 をクリック
  2. index.html が自動で作成されるのを確認する

たったこれだけです。「確認 → 承認 → 実行」 の流れが体感できれば、Clineの基本操作はマスターしたも同然です。

---

つまずきポイントと対処法

❶ 「APIキーが無効です」エラーが出る

APIキーの貼り付けミス（前後のスペースが混入しているケースが多い）を疑いましょう。いったんAPIキーをメモ帳に貼り付けて余分なスペースを削除してから再設定してください。

❷ Clineが止まって応答が返ってこない

Clineはファイルを読み込んだりコマンドを実行したりするたびにトークン（AIへの入力量の単位）を消費します。大きなプロジェクトでは1回のタスクで大量に消費されることがあります。最初は小さなタスクから試し、消費量の感覚をつかんでから大きな作業を任せましょう。

❸ モデルの選択に迷う

  • コストを抑えたい初期練習用：OpenRouter経由で deepseek/deepseek-chat などを試す
  • 品質を優先したい場合：anthropic/claude-sonnet-4 などの高性能モデルを使う

実際のAPI料金はモデルや利用量によって変わります。必ずOpenRouterの公式サイトで最新の料金を確認してください。

❹ 「承認」を押したらミスに気づいた

Clineにはチェックポイント機能があり、変更をロールバック（元に戻す）できます。また、Gitで管理しているプロジェクトであれば git diff で変更内容を確認するのが確実です。重要なプロジェクトはGitでバージョン管理してから使い始めることを強くおすすめします。

---

次のステップ

基本操作に慣れたら、以下を試してみましょう。

Plan/Actモードを使い分ける

Clineには2つのモードがあります。

  • Planモード：コードを一切変更せず、作業方針を相談・確認するだけのモード。新機能を実装する前の「設計会議」に使います。
  • Actモード：実際にファイルを編集・コマンドを実行するモード。計画が固まってから使います。

Planモードで方針をすり合わせてからActモードで実行する習慣をつけると、思わぬ方向に作業が進むミスが減ります。

.clinerules でルールを設定する

プロジェクトフォルダのルートに .clinerules というファイルを置くと、「コメントは必ず日本語で書く」「テストコードも一緒に作る」といったClineへのルールを永続的に設定できます。チームで使う場合はこのファイルをGitで共有すると全員が同じルールで作業できます。

公式ドキュメントを確認する

最新の機能・設定方法は公式ドキュメント（docs.cline.bot）で確認できます。Clineは活発に開発が続いているツールなので、定期的にチェックしてみましょう。

tools — このガイドで使うツール

Cline AIツール

VSCode上で動くオープンソースの自律コーディングエージェント。ファイル編集・コマンド実行・ブラウザ操作まで承認制で実行する。

stars: 64.5k price: open_source license: Apache-2.0 ja: none level: intermediate

more — 他のガイド