• TOP
  • 記事一覧
  • VSCodeで開発効率を劇的に向上させる！Roo Code（Roo-Cline）プラグイン完全ガイド

VSCodeで開発効率を劇的に向上させる！Roo Code（Roo-Cline）プラグイン完全ガイド

更新日：2025/01/08

Roo Code（Roo-Cline）とは

Clineフォークしたソフトウェアです

ClineとはVSCodeの開発効率を飛躍的に向上させるAIコーディング支援プラグインですね。

Roo Code（Roo-Cline）は、Clineの機能を継承しながら、より多くのAIモデル対応と使いやすさの向上に焦点を当てた拡張版

インストール

  1. VSCodeの拡張機能マーケットプレイスを開く
  2. 検索バーで「Roo Code」を検索

APIキーの設定

歯車アイコンの設定から、使用したい「AIモデル」と「APIキー」を入力していきます

どの生成AIモデルを選べばいいか

AIモデルを選択する判断材料として、下記があります

  • コンテキストウィンドウ

コンテキストウィンドウとはAIが一度に処理できる情報の量です、具体的にはトークン数と数値化されてます。

この数値が大きいほど、長文出力や一貫性のある出力が可能です。プログラミングで使用する場合、出力だけではなく、デバッグとして分析するためにも重要かと思います

Anthropic（アンソロピック）のAPIキーを設定

Anthropic（アンソロピック）ダッシュボードにログイン

https://console.anthropic.com/dashboard

「Get API Key」をクリック

https://console.anthropic.com/settings/keys

※ APIキーを作成しても、支払いの設定ができていないと下記のメッセージでタスクを実行してくれません

Your credit balance is too low to access the Anthropic API. Please go to Plans & Billing to upgrade or purchase credits

「Billing」をクリックして支払いの設定を行います

https://console.anthropic.com/settings/billing

OpenAI developer platformからAPIキー

https://platform.openai.com/docs/overview

https://platform.openai.com/api-keys

Gemini APIキー取得までの手順

Google AI StudioでAPIキー作成

https://aistudio.google.com/app/apikey

「Get API key」➡️「Create API key」で作成できます

※「Google Cloud プロジェクト」がない場合は作成する必要があります

Google Cloud プロジェクトとは

「Google Cloud」というGoogleが提供しているクラウドサービスで、使用するリソースや課金の管理を紐づける単位となります。

今回はAPIキーのみの使用として、アカウントとして使用しているイメージです。（実際クラウドサービスは使用しない）

https://cloud.google.com/resource-manager/docs/creating-managing-projects?hl=ja

「Google Cloud」で課金の設定で無料のプランだと、データがシェアされてしまいます

APIキーを作成し、有料プランにする場合は、「Google Cloud」のページに移動して設定します

Copilotのサブスクリプションのコストのみで「VS Code LM API」を使用

VS CodeやCursorでCopilotの有料版を使用している場合、VS Code LM APIを利用できます

VS Code LM APIではAPI使用の費用はかかりません！

使用方法

基本的な使用方法は、最初に「タスク」で指示を与えて作業が進んで段階ごとに「Save」で確認して進行していくという流れです

「Save」ボタンではなく「チャット」で指示を出して、生成されたコードを修正させることも可能です

タスク例

# 役割
あなたはプロのフロントエンドコーダーでHTML / CSS / JavaScript / PHPが得意です

下記の仕様書に従い、ソースコードを書いてください

# 要求
・フロントエンドのみで動作する料理のレシピ帳を開発してください
・ソースコードはhtml / css / javascript で記載し、1つのファイルにまとめてください
・料理名、材料一覧、調理手順を表示したいです
・サンプルとして疑似データを作成し入力した状態としてください

デバッグの場合

# プログラム以下の改修を行ってください。

・OCR機能の実装
・png / jpgファイルをアップロードできるボタンの作成
・画像ファイルから取得した文字列を意味のあるまとまりで改行して表示させてください
・○○のライブラリーを使用してください

Custom Instructionsの使用

- 指示以外の修正をしないでください
- 既存のコードから差分の少ないミニマムな修正をしてください
- メッセージは日本語で応答してください

新規記事

すべてを見る
人気記事ランキング
ピックアップ記事
話題のキーワードから探す