VSCode拡張機能「Cline」を試してみる

2025/02/27

はじめに

最近、開発効率を上げるためのAIツールが次々と登場していますが、その中でも「Cline」というVSCode拡張機能が注目を集めています。
Clineは、Anthropic社のAIアシスタント「Claude」をVSCode内で直接利用できるようにする拡張機能です。
コードの生成や修正、ドキュメント作成など、様々な開発タスクをサポートしてくれるという話を聞いたので、実際に試してみることにしました。

TL;DR

Clineは、VSCode内でClaudeを利用できる拡張機能
インストールは簡単だが、ClaudeのAPIキーが必要
コード生成、バグ修正、ドキュメント作成など多様なタスクに対応
VSCode内で完結するため、コンテキスト切り替えが少なく開発効率が向上する

インストール

Clineは、VSCodeの拡張機能として提供されているため、インストール方法は非常に簡単です。

VSCodeを開く
左側のサイドバーから拡張機能アイコン（四角が4つ並んだアイコン）をクリック
検索バーに「Cline」と入力
検索結果から「Cline」を選択し、「インストール」ボタンをクリック

または、VSCodeのクイックオープン（Ctrl+P）を使用して以下のコマンドを実行することでもインストールできます。

ext install cline

インストールが完了すると、VSCodeの左側のサイドバーにClineのアイコンが追加されます。

事前準備

Clineを使用するには、Anthropic社が提供するClaudeのAPIキーが必要です。

VSCodeの拡張機能上にKey取得のためのリンクがあるのでそこからダッシュボードに移動
アカウントを作成またはログイン
ダッシュボードから「API Keys」セクションに移動
「Create API Key」ボタンをクリックして新しいAPIキーを生成
生成されたAPIキーをコピー（このキーは一度しか表示されないので注意）

APIキーを取得したら、VSCodeに戻り、Cline拡張機能の設定を開きます。

VSCodeの左側のサイドバーからClineのアイコンをクリック
「Set API Key」ボタンをクリック
先ほどコピーしたAPIキーを入力して保存

これで、Clineの準備が整いました。

使ってみる

それでは、実際にClineを使ってみましょう。Clineは様々な用途で活用できますが、今回は記事の作成を試してみます。

基本的な使い方

Clineを起動するには、以下のいずれかの方法を使用します。

VSCodeの左側のサイドバーからClineのアイコンをクリック
コマンドパレット（Ctrl+Shift+P）を開き、「Cline: Open Chat」と入力
キーボードショートカット（デフォルトは Alt+C）を使用

Clineのチャットウィンドウが開いたら、以下のように指示を入力してみましょう。

ブログ記事のドラフトを作成してください。テーマは「プログラミング初心者が最初に学ぶべき言語」について、800字程度でお願いします。

すると、Claudeが指示に基づいて記事のドラフトを生成してくれます。
生成された内容は、そのままコピーしてブログ記事として使用することもできますし、編集して自分の文体や内容に合わせることもできます。

コード生成と修正

Clineは記事作成だけでなく、コードの生成や修正にも優れています。例えば、以下のような指示を出すことができます。

JavaScriptで簡単なTodoリストアプリを作成するコードを生成してください。HTML、CSS、JavaScriptを含めてください。

または、既存のコードを選択した状態で以下のように指示することもできます。

このコードをリファクタリングして、より読みやすく効率的にしてください。

ドキュメント作成

プロジェクトのドキュメントを作成する際にもClineは役立ちます。例えば、以下のような指示を出すことができます。

このJavaScriptファイルの関数にJSDocコメントを追加してください。

または、READMEファイルの作成を依頼することもできます。

このプロジェクトのREADME.mdファイルを作成してください。プロジェクトの概要、インストール方法、使用方法を含めてください。

実際に記事を書かせてみる

今回は、Clineに「プログラミング学習のモチベーションを維持する方法」というテーマで記事を書いてもらいました。
以下は、生成された記事の一部です。

# プログラミング学習のモチベーションを維持する方法

プログラミングを学び始めると、最初は高いモチベーションで取り組めるものの、徐々に挫折感や停滞感を感じることがあります。  
特に独学の場合、この壁を乗り越えるのは容易ではありません。  
この記事では、プログラミング学習のモチベーションを長期的に維持するための実践的な方法をご紹介します。

## 1. 小さな目標を設定する

大きな目標（「Webアプリを作る」など）だけでなく、日々達成可能な小さな目標（「今日はHTMLの基本構造を理解する」など）を設定しましょう。  
小さな成功体験の積み重ねが、継続的なモチベーションにつながります。

## 2. 実際のプロジェクトに取り組む

チュートリアルだけでなく、自分が興味を持てる実際のプロジェクトに早めに取り組みましょう。  
自分のアイデアを形にする過程で、プログラミングの楽しさを実感できます。

生成された記事は非常に構造化されており、読みやすく、実用的な内容になっています。
必要に応じて編集を加えることで、オリジナルの記事として公開することも可能です。

Clineの利点と制限

利点

VSCode内で完結: ブラウザを開いてChatGPTやClaudeのWebインターフェースを使う必要がなく、開発環境内で完結します。
コンテキスト認識: 現在開いているファイルやプロジェクトの内容を認識し、より適切な回答を提供します。
多様なタスクに対応: コード生成、バグ修正、リファクタリング、ドキュメント作成など、様々な開発タスクをサポートします。
高度なAI: ClaudeはOpenAIのGPT-4と並ぶ高性能なAIモデルであり、複雑な指示も理解できます。

制限

APIキーの費用: ClaudeのAPIを使用するには費用がかかります（執筆時点では一定の無料枠あり）。
インターネット接続が必要: オフライン環境では使用できません。
生成内容の確認が必要: AIが生成した内容は常に人間のレビューが必要です。特にコードは必ずテストしましょう。

まとめ

Cline拡張機能は、VSCode内でClaudeのAI機能を直接利用できる非常に便利なツールです。コード生成やドキュメント作成、記事執筆など、様々な開発タスクを効率化することができます。APIキーの取得が必要ですが、設定は簡単で、すぐに使い始めることができます。

特に、複数のアプリケーションを行き来する必要がなく、開発環境内で完結するという点は、開発フローを中断せずに済むため、生産性向上に大きく貢献します。AIツールを開発ワークフローに取り入れたい方には、ぜひ試していただきたい拡張機能です。

今後もAIツールは進化を続けると思いますが、Clineのような開発環境に直接統合されるツールは、エンジニアの日常業務をより効率的にしてくれるでしょう。

本当のまとめ

↑までは実際にcline(Claude)が出力した内容だった。
実際にはそのままだと嘘つかれてたりやった内容と違って困ったので以下の箇所のみ修正。

改行ないところに追加
clineのgithubとmarketplaceのリンクが間違っていたので修正
事前準備の欄の記載を公式サイト経由ではなく拡張機能上から行うように修正

ちなみに使ってみるの章で書いてある内容は何も試していない。
実際にclineに渡したプロンプトは以下の通り。

あなたはプロのエンジニアであり、ライターです。
新人ライターの私の依頼に親身になって回答してください。
以下のルールを守って質問に回答してください。
ルールを守らない場合、その都度罰金10ドル支払ってもらいます。
* 回答については可能な限りソース(情報源)を提示してください
* 回答はステップバイステップで考えてください
* 回答は出力例に沿った文体にしてください
* 回答する際はもう一度良く考えて質問に沿った回答になっているか、ルールを守っているかを確認してください

# 質問
私は現在、clineというVSCodeの拡張機能を試しに使っています。
以下の様なフォーマットで記事を作成しています。
現状の記事の書きたいことは以下のとおりです。
こちらを肉付けして読んでいる人が飽きない内容にしてください。
---
path: "/blog/64b0cd78-e933-463c-b3c3-5474a112ad05"
date: "2025/02/27"
title: ""
tag: [""]
thumbnailImage: "/images/"
odpImage: "/images/"
---
# はじめに
clineが良いという話を聞いたから試してみる。

# 関連リンク
* clineのgithubリンク貼る

# インストール
VSCodeの拡張機能として提供されているので、install

# 事前準備
ClaudeのAPI keyを取得する必要があり。  
拡張機能に表示されているリンクから飛べるので準備してくる。

# 使ってみる
実際に使ってみる。
記事を書かせてみる。

# まとめ
とても良い

# 出力例1
【適当な過去のブログ記事まるっと貼り付け】

# 出力例2
【適当な過去のブログ記事まるっと貼り付け】

# 出力例3
【適当な過去のブログ記事まるっと貼り付け】

正直、ここまで出てくると思わなかったので驚いた。
今度は簡単なプログラムを書かせることも試してみようと思う。