メインコンテンツへスキップ
見出し画像

GitHub Copilotの紹介(Visual Studio Code向け)

    1.概要

     過去記事でプログラムを作成するための統合開発環境(IDE:Integrated Development Environment)としてVisual Studio Code(VS Code)を紹介し、その中でGitHub Copilotを紹介しました。

     2021年にGitHub Copilot発表から、いつの間にかGitHub Copilotが進化していました。

     本記事では主にVS CODEユーザー向けのGitHub Copilotサービスを紹介します。

    1-1.GitHub Copilotとは

     GitHub Copilot とは、AI(人工知能)を活用した「ペアプログラマー」としてコードの自動補完や提案を行う強力なツールです。

     リリース当初はコードの自動補完(入力途中のコードを補完、コメントからコードを生成など)だけでした。現在ではチャットベースでの対話機能も備わりレビュー、修正・補完、テスト駆動開発用のテスト生成などもできるようになっています。

    【コラム:GitHub Copilot Labs】
     GitHub Copilotの機能を拡張する試験場として”GitHub Copilot Labs”が存在していましたが2023年の12月15日に廃止され、現在はGithub Copilotと統合済みです。

    1-2.利用プラン

     利用プランの説明は下記の通りです。私はProに加入しているため、使用できる機能は時期やプランによって異なります。

    1. GitHub Copilot Free:Copilot を使い始めようとしている開発者向け

    2. GitHub Copilot Pro:無制限の補完や追加モデルへのアクセスなど、より柔軟性を求める開発者向け

    3. GitHub Copilot Pro+:最大限の柔軟性、使用できるモデルへの Premium アクセス、高いリクエスト上限を必要とする開発者向け

    4. Copilot Business

    5. Copilot Enterprise

    画像
    https://github.com/features/copilot/plans?cft=copilot_li.features_copilot
    画像
    https://docs.github.com/ja/copilot/managing-copilot/managing-copilot-as-an-individual-subscriber/getting-started-with-copilot-on-your-personal-account/about-individual-copilot-plans-and-benefits

    2.環境構築

    2-1.インストール

     基本的な環境構築(インストールや設定)や拡張機能追加は前記事参照のこと。
     Visual Studio Code バージョンは1.99 以降となります。

     Copilotを利用するにはGitHubアカウントでのサインインとCopilotの有効化が必要です。

    2-2.拡張機能

     事前に「GitHub Copilot」と「GitHub Copilot Chat」をインストールしておきます。

    画像

    ※GitHub Copilot ChatでプレリリースVer.(ソフトウェアやアプリなどの正式公開前のバージョン)を選択すると動作しなくなることがあります。
     その場合はVersionを戻すかInsiderを使用する必要があります。

    画像

    【参考:音声入力】
     公式より音声入力をサポートする拡張機能として「VS Code Speech」がありますので、マイクが使える方は便利と思います。

    画像

    3.VS Code Insiders

      最新のAI機能などを使用したい方向けの開発版ビルドとして「Visual Studio Code Insiders」が提供開始されました。一部の最新機能はInsiderでしか使えない場合がありますのでご留意ください。

     InsiderはVS Codeとは別でインストールできるためオススメです。注意点として、安定版より動作が不安定な場合があります。

    Friendly reminder that if you want the latest and greatest AI features in VS Code, you should be on Insiders...https://t.co/buVaOkCfGz

    In the past 3 weeks we've shipped...

    🤖 Agent Mode - terminal command running, error checking, self-healing pair programmer
    ⬇️ Next Edit… pic.twitter.com/uyhauRwSch

    — Visual Studio Code (@code) February 25, 2025

    【インストール方法】
     インストール方法は通常のVisual Studio Codeと同じです。下記公式サイトからダウンロードできます。

    4.GitHub Copilot

     GitHub Copilot は AI コーディング アシスタントであり、VS Code(IDE)を通じてAIがプログラミングを補完してくれます。

    4-1.GitHub Copilot の機能全般

     GitHub Copilotの機能の一部は下記の通りです。

    1. コードの完了

    2. Copilot Chat

    3. Copilot in the CLI

    4. GitHub Copilot のコード レビュー

    5. Copilot pull request summaries

    6. Copilot (Copilot Enterprise のみ) とのチャットのコンテキストとして使用するために、サポート技術情報と呼ばれるドキュメントのコレクションを作成および管理

     4-1-1.Copilot機能:コード補完

     まず初めにCopilotの代名詞であるコード補完機能(Copilot Next Edit Suggestions)について紹介します。

     本機能は、コメントやコードを記載すると次のコード(自分が記載したいであろう)の予測を透明な文字で表示し、下記で選択できます。

    • 気に入ればー>Tabで受入

    • 嫌ならー>Escで拒否

    • 次の提案を表示ー>Alt + ]

    • 前の提案を表示ー>Alt + [

    • 部分的に受け入れるならー>Ctrl + →

    画像

     コード補完は次の目的に最適です。

    1. コード スニペット、変数名、および関数を記述する際の補完

    2. 繰り返しコードの生成

    3. 自然言語のインライン コメントからのコード生成

    4. テスト駆動開発用のテスト生成

     4-1-2.Copilotのベストプラクティス

     GitHub Copilot の使用についてのベストプラクティスを考えるうえで、得意・不得意は下記の通りです。

    【得意】
     ●テストと繰り返しコードの記述
     ●デバッグと構文の修正
     ●コードの説明とコメント
     ●正規表現の生成

    【不得意】
     ●コーディングとテクノロジに関係のないプロンプトに対応する
     ●専門知識やスキルを更新する。

    4-2.便利機能1:ショートカット

     よく使用するショートカットは以下の通り。

    • 提案の受入:Tab

    • 提案の拒否:Esc

    • 次の提案を表示:Alt + ]

    • 前の提案を表示:Alt + [

    • 次の単語の受入:Ctrl + →

    • インラインチャット:Ctrl + I

    • GitHub Copilot Chat:Ctrl + Alt + I

    • クイックチャット:Ctrl + Alt +Shift + L

     参考までにVS Codeのショートカット一覧は下図の通り。

    画像
    https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

    4-3.便利機能2:キーワード使用/コンテキストの指定

     特別なキーワード (コマンドとオプション) を使うことで、特定の目的に合った処理を実現できます。

     GitHub Copilotではコンテキスト(編集対象)の指定をすることで、どのファイルや範囲を編集対象にするかをCopilotに伝えることができます。現在開いているエディタのファイルは自動でコンテキストに含まれますが、追加で他のファイルやフォルダを指定することもできます​。

    画像
    図 VSCode-自動で現在のファイルがコンテキストになる

     4-3-1.スラッシュ コマンド(/)

     スラッシュ コマンドを使用して、一般的なシナリオで複雑なプロンプトを記述しないようにします。 スラッシュ コマンドを使うには、チャット プロンプト ボックスに「/」と入力し、それに続けてコマンド名を入力します。
     使用できるスラッシュ コマンドは、環境やチャットのコンテキストによって異なります。 現在使用できるスラッシュ コマンドの一覧を表示するには、現在の環境のチャット プロンプト ボックスに「/」と入力します。

    • /clear:新しいチャット セッションを開始します。

    • /explain:アクティブなエディターのコードがどのように機能するかについて説明します。

    • /fix:選んだコードの問題の修正プログラムを提案します。

    • /fixTestFailure:失敗したテストを見つけて修正します。

    • /help:GitHub Copilot の使用に関するクイック リファレンスと基本。

    • /new:新しいプロジェクトを作成します。

    • /tests:選んだコードの単体テストを生成します。

     サンプルとして「/clear」を実行しました。元のチャットが消え、新しいセッションが作成されたのが確認できました。

    画像


     4-3-2.チャット変数(#)

     チャット変数を使用して、プロンプトに特定のコンテキストを含めます。 チャット変数を使用するには、チャットプロンプトボックスに 「#」 と入力し、その後にチャット変数を入力します。

    • #block:現在のコード ブロックをプロンプトに含めます。

    • #class:現在のクラスをプロンプトに含めます。

    • #comment:現在のコメントをプロンプトに含めます。

    • #file:現在のファイルの内容をプロンプトに含めます。

    • #function:現在の関数またはメソッドをプロンプトに含めます。

    • #line:現在のコード行をプロンプトに含めます。

    • #path:ファイル パスをプロンプトに含めます。

    • #project:プロジェクトのコンテキストをプロンプトに含めます。

    • #selection:現在選択されているテキストをプロンプトに含めます。

    • #sym:現在のシンボルをプロンプトに含めます。

     4-3-3.チャット参加者(@)

     チャット参加者は、支援を受けることができる専門知識を持つドメイン専門家のようなものです。 チャット プロンプト ボックスに「@」と入力し、それに続けてチャット参加者名を入力することで、チャット参加者を指定できます。 使用可能なすべてのチャット参加者を表示するには、チャット プロンプト ボックスに 「@」 と入力します。

    • @azure:Azureサービスに関するコンテキストと、それらを使用、配置、管理する方法があります。 Azure に関するヘルプが必要な場合は、@azure を使います。 @azure チャット参加者は現在 パブリック プレビュー 段階であり、変更される可能性があります。

    • @github:GitHub 固有の Copilot スキルを使用できます。 「IDE で GitHub Copilot に質問する」を参照してください。

    • @termina:lVisual Studio Codeターミナル シェルとその内容に関するコンテキストがあります。 ターミナル コマンドの作成またはデバッグに関するヘルプが必要な場合に @terminal を使用します。

    • @vscode:Visual Studio Code コマンドと機能に関するコンテキストがあります。 Visual Studio Code に関するヘルプが必要な場合に @vscode を使用します。

    • @workspace:ワークスペース内のコードに関するコンテキストがあります。 Copilot でプロジェクトの構造、コードのさまざまな部分の相互作用、またはプロジェクト内の設計パターンを考慮する場合に @workspace を使用します。

    4-4.便利機能3:AIモデルの選択

     4-4ー1.AIモデル一覧

     Copilot Chat では既定の LLM を別のモデルに変更できます。注意点として、モデルごとに Premium リクエストの乗数が異なるため、毎月の使用許容量がどの程度使われるかに影響する可能性があります(Premium リクエストについて)

     以下のモデルはCopilot Chat のイマーシブ モードで使用できます。各モデルで長所・短所があるため、タスクに最適なモデルを選ぶ必要があります。

     4-4ー2.AIモデルの使用上限

     Copilotのリクエスト数の制限があり、”プレミアムリクエスト”という形で管理されます。

    画像
    Copilot プランの比較
    画像
    Premium リクエストについて

    4-5.便利機能4:右クリックメニュー

     次章以降で紹介する”GitHub Copilot Chat”の機能について、右クリック(Copilot選択)で簡単にアクセスでき、下記を実行できます。

    • 説明:今開いているコードをCopilotが説明

    • 修正:警告やエラーとなっている箇所の修正を提案

    • レビューとコメント:ー

    • ドキュメントを生成する:ー

    • テストを生成する:テストを生成

    • ファイルをチャットに追加:現在開いているファイルをCopilot Chatに参照するようにできる

    • 選択内容をチャットに追加:

    画像

     例としてFizzbuzz構文を作成し、説明を選択しました。コンテキスト(編集対象)が確認されるので選択すると、自動的に詳細説明が生成されました。

    画像
    [IN]
    def fizzbuzz(n):
        for i in range(1, n + 1):
            if i % 3 == 0 and i % 5 == 0:
                print('FizzBuzz')
            elif i % 3 == 0:
                print('Fizz')
            elif i % 5 == 0:
                print('Buzz')
            else:
                print(i)
    [Copilot生成]
    KIYO-GitHub
    @workspace /explain
    
    Workspace
    このコードは、典型的なプログラミングの練習問題である「FizzBuzz」を実装したものです。以下にコードの動作を段階的に説明します。
    
    概要
    fizzbuzz 関数は、引数 n を受け取り、1から n までの整数を順に処理します。この処理の中で、特定の条件に基づいて異なる文字列を出力します。具体的には、数値が3の倍数、5の倍数、またはその両方であるかどうかに応じて、異なる文字列を出力します。
    
    詳細な動作
    ループの設定: 関数は for ループを使用して、1から n までの整数を順番に変数 i に代入します。このループは、range(1, n + 1) を使うことで、1から n までの範囲を生成しています。
    
    条件分岐: 各ループの反復で、i の値に基づいて以下の条件が評価されます。
    
    3の倍数かつ5の倍数: if i % 3 == 0 and i % 5 == 0 という条件は、i が3でも5でも割り切れる場合に真となります。この場合、文字列 'FizzBuzz' を出力します。
    3の倍数: 次に、elif i % 3 == 0 という条件が評価されます。i が3で割り切れる場合に真となり、文字列 'Fizz' を出力します。
    5の倍数: 次に、elif i % 5 == 0 が評価されます。i が5で割り切れる場合に真となり、文字列 'Buzz' を出力します。
    その他の数値: 上記のいずれの条件にも該当しない場合、else ブロックが実行され、現在の数値 i をそのまま出力します。
    出力例
    例えば、fizzbuzz(15) を呼び出した場合、以下のような出力が得られます:
    
    1
    2
    Fizz
    4
    Buzz
    Fizz
    7
    8
    Fizz
    Buzz
    11
    Fizz
    13
    14
    FizzBuzz
    
    コードのポイント
    条件の順序: 最初に「3の倍数かつ5の倍数」をチェックしている点が重要です。これを後回しにすると、3の倍数や5の倍数の条件が先に評価されてしまい、正しい出力が得られなくなります。
    モジュロ演算子 (%): このコードでは、数値が特定の値で割り切れるかどうかを判定するためにモジュロ演算子を使用しています。
    このコードは、条件分岐やループの基本的な使い方を学ぶのに適しており、初心者にとって良い練習問題です。

    4-6.ブラウザ版Copilot

     VS Code内だけでなくブラウザでの操作もサポートも可能であり、複数のAIモデルも選択可能です。

    5.GitHub Copilot Chat

     GitHub Copilot Chatは、VS Code上でAIアシスタントにコードに関する質問をしたり、プログラミングの相談をしたりするための対話機能です。

     VS CODEの上にマークがあり、クリックすると選択可能です(全てショートカットの使用可能)。

    画像

    【AIモデルの選択】
     チャットビューの右下にあるAI モデルピッカーからサポートされたモデルを選択することが出来ます。参考AIモデルは下記の通り

    • GPT-4o (モデル ピッカーが表示されない場合に使われる既定値)

    • Claude 3.5 Sonnet

    • Claude 3.7 Sonnet

    • Gemini 2.0 Flash

    • Gemini 2.5 Pro

    画像
    図  AI モデルピッカーの様子(左:インラインチャット、右:GitHub Copilot Chat)

    【使用目的】
     Copilot Chat は次の目的に最適です。

    1. コードに関する質問への自然言語での回答

    2. コードの大きなセクションを生成し、そのコードを反復処理

    3. キーワードとスキルを使用して特定のタスクを実行する。

      • Copilot Chat には、プロンプトの重要なコンテキストを提供し、一般的なタスクをすばやく実行するように設計されたキーワードとスキルが組み込まれています。

      • さまざまな種類のキーワードとスキルが、さまざまな Copilot Chat プラットフォームで使用できます(「IDE で GitHub Copilot に質問する」を参照)

    4. 特定のペルソナとしてタスクを完了する。

      • たとえば、Copilot Chat に、コードの品質、読みやすさ、効率性について非常に気をつかう C++ のシニア開発者として振舞うように伝え、コードをレビューするように依頼できます。

    5-1.Chatモード(質問モード)

     VS Code内でCopilotを使用してチャットすることが出来ます。

     GitHub Copilot Chatの表示は下記2種で実施できます。

    1. コマンドパレットから表示:Ctrl+Shif+Pを押し下図選択

    2. ショートカット:Ctrl + Alt + I

    画像

     選択すると右画面にチャットウィンドウが開きます。コマンドBOXの選択肢が「質問する」になっていればChatの実施が可能です。
    ※他の選択肢は後述

    画像

    5-2.インラインチャット

     コード内でCopilotを呼び出し(ショートカット「Ctrl+I」)、プロンプト(チャット)でコードを直接修正・提案してもらいます。
     チャットする行を選択してインラインチャットを呼び出し、プロンプトを入れて実行し、「同意する」、「閉じる」、「承諾して実行」を選択します。承認した時点でコードは書き換えられるので注意が必要です。

     実際使ってみるとコードそのものは良いのですがインデントの位置がおかしかったりします。

    画像

     またインラインチャットの開始位置(行)が悪いと元のコードをつぶしてしまう恐れもあります。

    画像

    5-3.クイックチャット

     コマンドパレット上からチャット可能な機能です。

    画像

     下記手順で簡易に実行可能です。

    1. クイックチャットを呼び出し:Ctrl+Shif+Alt+L

    2. プロンプトの入力

    3. 出力の確認:必要に応じて出力を利用

      • エディタで適用

      • AIカーソルを挿入

      • コピー

      • ターミナルに挿入

      • 新しいファイルに挿入

    画像

    6.GitHub Copilot Edits Mode

     前章で紹介した「チャット(質問)」機能は質問への回答のみでした。
     Copilotにはプロンプトから直接ファイルを変更できる機能があり、下記2種モードがあります。

    1.GitHub Copilot Edits Mode(編集モード):
     Copilot から提案される編集をより詳細に制御する場合は、編集モードを使います。 編集モードでは、Copilot が変更できるファイルを選び、各繰り返しで Copilot にコンテキストを提供し、各ターン後に提案された編集を受け入れるかどうかを決定します。

    2.GitHub Copilot Agent Mode(エージェント モード):
     特定のタスクを念頭に置いて、Copilot を有効にしてコードを自律的に編集できるようにする場合は、エージェント モードを使います。 エージェント モードでは、Copilot がどのファイルに変更を加えるかを決定し、タスクを完了するためのコード変更とターミナル コマンドを提供し、元のタスクが完了するまで issue の修復を繰り返します。 エージェント モードは Visual Studio Code でのみ使用できます。

     本章では”GitHub Copilot Edits Mode”、次章で”GitHub Copilot Agent Mode”を説明します。

    6-1.概要

     Copilot Editsは、チャットとインラインチャットの長所を組み合わせたもので、会話型のフローと管理するファイル群に対してインラインで変更を加える機能を備えています。
     具体的にはプロジェクト内の複数ファイルにまたがるコード修正をAIに提案させ、直接エディタ上でその修正を適用できる機能を含みます。

     特徴は下記の通りです。

    • 開発者がコントロールを持ち、反復的な作業がしやすい

    • 変更を確認しながら、正しい解決策に到達するまで何度も調整できる

    • テスト実行や変更の取り消しも可能

     Copilot Chatとの比較は下記の通りです。

    画像
    GitHub Copilot エディット機能 (プレビュー) とは

    【GitHub Copilot Editsの履歴】
     ●2024年:プレビュー提供(Introducing Copilot Edits (preview))
     ●2024年10月29-30日:GitHub Universeで発表
     ●2025年2月:正式リリース(GA: General Availability)

    6-2.事前対応

     基本的にはデフォルト設定で問題なく動作します。

    6-3.使用方法

     使用方法は下記の通りです。

    1. Copilot Chat メニューから [Open Chat](Ctrl + Alt + I) を選択。

    2. チャット パネルの下部にあるモード ドロップダウンから [Edit] を選択

      • 必要に応じて、AIモデルを選択

      • 必要に応じて、関連ファイルを_作業セット_に追加して、作業対象のファイルを GitHub Copilot に示す

    3. プロンプトを送信

      • プロンプトに応じて、Copilot Edits によって "作業セット" 内の変更対象のファイルが判断され、変更の簡単な説明が追加される

    4. 変更内容を確認し、各ファイルの編集内容を [適用] または [破棄] する

    画像

    6-4.動作確認

     6-4-1.QuickStart:FizzBuzz

     Edit Modeを用いて、下記PromptでFizzbuzz構文を作成しました。 ”コードボックス”という表現が無いとうまくいかなかったため、プロンプトは詳細に記載する必要があります。

    Prompt:Fizzbuzz関数をコードボックス内に書いて

    画像

     出力結果にあるアイコンをクリックするとGitのように修正箇所の差分を表示してくれます。

    画像

    7.GitHub Copilot Agent Mode

    7-1.概要

     Copilot Agent ModeはAIが開発タスクをある程度自律的に実行してくれるモードです。本モードは「自身のコードを反復してエラーを認識し、それを自動修正」することができます。つまり、要求されたタスクだけを実行するのではなく、必要なサブタスクを推測し、それらをすべて完了するまで動作し続けます。

     特徴は下記の通りです。

    1. 継続的な反復と自己修正

      • 従来のChatモードやEditモードでは単発の対応に対して、AgentモードではAIが「ゴールに到達するまで」複数回の試行を重ねる。つまりデバッグ作業を自動化までしてくれます。

    2. マルチステップの計画実行

      • コードの編集からテストの実行・デバッグまで一連の工程を自動で進めてくれる

      • テストに失敗すると自動的にデバッグも行いタスクを完了させる

      • 複数のファイルにまたがる修正も一括で可能

    3. ツールの使用:結果を検証するために下記のようなツールを実行することができる

    4. 高いセキュリティ

      • アクセス管理、データ暗号化、監視機能を実装

    【GitHub Copilot Agentの履歴】
     ●2025年2月7日:プレビュー版の提供開始(VS Code Insidersのみ)
     ●2025年2月24日:GitHub Copilot agent modeのプレビュー版
     ●2025年3月:VSCodeバージョン1.99よりGA(通常版のVSCodeもOK)

    【コラム:Edit ModeとAgent Modeの違い】
     公式「Why would I use agent mode instead of edit mode?」より、下記の通りです。

    • 編集範囲: エージェントモードは、関連するコンテキストと編集するファイルを自律的に決定します。編集モードでは、自分でコンテキストを指定する必要があります。

    • タスクの複雑さ:エージェントモードは、コードの編集だけでなく、ツールやターミナルコマンドの起動を必要とする複雑なタスクに適しています。

    • 所要時間:エージェントモードはリクエストを処理するために複数のステップを含むので、レスポンスを得るまでに時間がかかるかもしれません。例えば、関連するコンテキストや編集するファイルの決定、行動計画の決定などです。

    • 自己修復:エージェントモードでは、生成された編集の結果を評価し、中間的な問題を解決するために複数回繰り返すことがあります。

    • リクエストクォータ:エージェントモードでは、タスクの複雑さに応じて、1つのプロンプトがバックエンドへの多くのリクエストになるかもしれません。

    【コラム:バイブコーディング(Vibe coding)とは】
     2025年2月3日にOpen AIの共同創業者であるアンドレイ・カルパシーが"Vibe coding"という概念を提唱し、このGitHub Copilot AgentはVibe codingに近づいていると言えます。

    There's a new kind of coding I call "vibe coding", where you fully give in to the vibes, embrace exponentials, and forget that the code even exists. It's possible because the LLMs (e.g. Cursor Composer w Sonnet) are getting too good. Also I just talk to Composer with SuperWhisper…

    — Andrej Karpathy (@karpathy) February 2, 2025

     バイブコーディングの概念は「エージェント(AIに要望を伝えるだけで、あとはエージェントが全部やってくれる」みたいです。

    7-2.事前対応

     デフォルトで動作しない場合、GitHub Copilot Chatのエージェントモード設定を有効化します。

    画像

    7-3.使用方法

     使用方法は下記の通りです。

    1. Copilot Chat メニューから [Open Chat](Ctrl + Alt + I) を選択

    2. チャットパネル下部にあるモード ドロップダウンから [Agent] を選択

    3. プロンプトを送信

      • 必要に応じて、AIモデルを選択

      • プロンプトに応じて、Copilot によってエディター内の編集内容がストリーミングされ、作業セットが更新され、必要に応じて、実行すべきターミナル コマンドが提案されます。

    4. 変更を確認

      • Copilot からターミナル コマンドが提案された場合は、Copilot でそれらを実行できるかどうかを確認します。 これに応じて、Copilot によって追加のアクションが繰り返し実行され、元のプロンプトのタスクが完了されます。

    画像

    7-4.動作確認

     7-4-1.QuickStart:FizzBuzz

     Agent Modeを用いて、下記PromptでFizzbuzz構文を作成しました。Editモードより、より丁寧に記載してくれた気がします。

    Prompt:Fizzbuzz関数を作成し、100までの値を出力したい

    画像
    画像

    8.VSCode MCPサーバー

     2025年4月4日より全VS Code ユーザーにMCP サポートが展開されました(Vibe coding with GitHub Copilot: Agent mode and MCP support rolling out to all VS Code users)。

     本章ではVS CodeでのMCPの使い方を学びます。なおMCPは現在”Agent Mode”のみで使用可能です。

    8-1.概要

     8-1-1.MCPとは

     MCP(Model Context Protocol)とはAnthropic社が開発した、アプリケーションがLLMにコンテキストを提供する方法を標準化するオープンプロトコルです。
     MCPは、AIアプリケーション向けのUSB-Cポートのようなものであり、AIモデルを異なるデータソースやツールに接続する標準的な方法を提供します。

     MCPは”client-server model”に従っており、アーキテクチャは下記の通り。

    1. Host: ****:MCP ホストは、Claude Desktop、統合開発環境 (IDE)、その他の AI アプリケーションなど、MCP プロトコルを通じてデータにアクセスするプログラムまたは AI ツール

    2. Client:サーバーと 1 対 1 の接続を行うプロトコルクライアント

      • 今回はVS Code

    3. Server:MCP プロトコルを通じて機能を提供する軽量なプログラム

    4. Local Data Sources:MCP サーバーが安全にアクセスできるデータベース、ローカルデータソース、およびサービス

    5. Remote Services:MCP サーバーが接続できる、API を介してインターネット経由で利用可能な外部システム

    画像
    図 MCPアーキテクチャ

    【Agent modeにおけるMCPサーバーの提供範囲】
     Anthropic社が開発したMCP仕様より、MCPサーバーはクライアントへ下記機能を提供できます。

    1. Resources: ユーザーまたはAIモデルが使用するコンテキストとデータ

    2. Prompts: ユーザー用のテンプレート化されたメッセージとワークフロー

    3. Tools: AIモデルが実行する機能

     しかし、現在のAgent Modeでは”tools”のみしか提供できません。

    【Agent modeが提供するツール】
     Agent modeは下記ツールの使用が可能です。

    • VS Codeによって提供される組み込みツール(図では青)により、エージェントはワークスペースの検索、コード変更の適用、ターミナルコマンドの実行、エディタからのコンパイルエラーやリントエラーのキャプチャ、Webサイトのコンテンツのフェッチ(#fetchを手動でトリガー)などを行うことができます。

    • MCPサーバーが提供するツール(図の緑)

    • VS Codeエクステンションが提供するツール(図の緑)

    画像
    Extensible: MCP servers and VS Code extensions

     8-1-2.MCP実装フロー

     MCP実装のフロー概要は以下の通りです。

    1. MCPサーバーの追加

      • 設定環境を「ワークスペース設定」か「ユーザー設定」か決める

    2. JSONファイルのConfiguration設定

      • 作成されたJSONファイルに必要情報を記載

    3. MCPサーバーの起動

    4. GitHub Copilot Agent Modeの選択

      • チャットビューを開く (Windows:Ctrl+Alt+I)

      • ドロップダウンから 「エージェント 」モードを選択

    5. 利用可能なツールの確認

      • "ツール"ボタンをクリックし、使用可能なツールを表示

      • 必要に応じてツールを選択または選択解除

    6. ツールの呼び出し(チャットで指示を入力)

      • チャット入力にプロンプトを入力

      • 特定のツールを使う場合は入力プロンプト中で” #ツール名 ”を記述するとそのツールを直接呼び出すことができる

      • オプションで、ツール実行前に入力パラメータの確認・編集を実施

    7. 実行内容の確認と許可/実行結果の確認

    8-2.環境構築

     VS CodeのMCPで様々なプログラミング言語を使用できますが、今回はPythonを使用して実装していきます。

     8-2-1.VS Codeの設定確認

     ”GitHub Copilot Agent Mode”を使用するため、設定(Ctrl+,)からAgentを有効化しておきます。

    画像

     後述の自動検出ができるよう"chat.mcp.discovery.enabled"を設定で検索し、Enabledであることを確認します。

    画像

     8-2-2.Pythonの環境構築

     まずはPython環境を準備し、(推奨として)仮想環境を作っておきます。私はAnacondaで仮想環境を作成しました。

     次に”MCP Python SDK”をpipでインストールします。Python>=3.10以上が必要なため、必要に応じてバージョンのUpdateをします。

    [Terminal]
    pip install mcp
    画像
    https://pypi.org/project/mcp/

    【Pythonのバージョン確認方法】
     Pythonのバージョン確認は”python --version”です。私のbase環境はバージョンが低いため、仮想環境を作成してそちらを利用しました。

    [IN]
    python --version
    
    [OUT]
    Python 3.8.12

    8-3.MCPサーバーの設定環境

     MCPサーバーをVS Codeに追加するための設定環境は複数あります。
     詳細は下記の通りです。(Use MCP servers in VS Code (Preview):Add an MCP server)

    1. ワークスペース設定:

      • プロジェクト単位でサーバー設定を共有したい場合、ワークスペースに".vscode/mcp.json"ファイルを追加して記述する

      • ワークスペースのMCPサーバーを設定すると、同じプロジェクトを扱う

      • チームメンバーともMCPサーバー設定を共有できるため共同開発に便利

    2. ユーザー設定:

      • どのプロジェクトからでもサーバーを使いたい場合、VS Codeのユーザー設定ファイル(通常はsettings.json)に記述する

      • この方法では全ワークスペース共通でMCPサーバーが有効化される

      • 複数プロジェクトにまたがって共通のツールを使いたい時に便利。また個人の秘密情報(APIキーなど)が含まれる時に使用

    3. 自動検出:

      • Claude Desktop などの他のツールで定義された MCP サーバーの自動検出を有効にする

    【注意点】
     注意点は「信頼できるソースのMCPサーバー以外は追加しない」ことです。MCPサーバーは自分のPC内で任意のコードを実行することができるため、悪意のあるソースだとセキュリティ的に問題があるためです。

     8-3-1.ワークスペース:.vscode/mcp.json

     ワークスペース設定の手順は以下の通りです。

    1. ワークスペースの作成

    2. .vscode/mcp.jsonの作成

    3. mcp.jsonの記述

    【設定の要領】
     まずワークスペースに関しては下記をご参照ください。

     ワークスペース作成は、エクスプローラ(Ctrl+Shift+E)を開き、「フォルダーを開く」を押して、ワークスペースにしたいフォルダを選択します。

    画像

     次に”.vscode”フォルダを作成し、”mcp.json”ファイルを作成します。その後、 ”mcp.json”に構成を記述していきます(記法は後述)。

    画像

     8-3-2.ユーザー設定:.settings.json

     ユーザー設定(全ワークスペース共通でMCPサーバーが有効化)する場合は、VS Codeの設定(Ctrl+,)からMcpを選択し"settings.jsonで編集"を選択します。

    画像

     設定画面が開くと自動で"mcp-server-time"という名前のMCPサーバーが作成されました。

    画像
    【.settings.json】
        "mcp": {
        
            "inputs": [],
            "servers": {
                "mcp-server-time": {
                    "command": "python",
                    "args": [
                        "-m",
                        "mcp_server_time",
                        "--local-timezone=America/Los_Angeles"
                    ],
                    "env": {}
                }
            }
        }

     自身でMCPサーバーを作成したい場合はフォーマットに従って記載する必要があります。

     8-3-3.自動検出

     自動検出の例として、私のPCでは過去に下記を実施しClaude DesktopとBlender MCPは設定済みでした。

     下図アイコンを選択すると「新しいツールが利用可能です。」と表示され、自動でClaude Desktopを検出しました。

    画像

    8-4.設定フォーマットの理解

     MCPサーバー構成は特定のJSONフォーマットに従います。
    (Use MCP servers in VS Code (Preview):Configuration format)

     下記は参考例です。MCPサーバーは複数記載することが可能です。

    [mcp.jsonのサンプル(3つのサーバーとAPIキー入力を含むInputを持つMCPサーバー)]
    // Example .vscode/mcp.json
    {
      // 💡 Inputs will be prompted on first server start,
      //    then stored securely by VS Code.
      "inputs": [
        {
          "type": "promptString",
          "id": "perplexity-key",
          "description": "Perplexity API Key",
          "password": true
        }
      ],
      "servers": {
        // https://github.com/ppl-ai/modelcontextprotocol/
        "Perplexity": {
          "type": "stdio",
          "command": "docker",
          "args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
          "env": {
            "PERPLEXITY_API_KEY": "${input:perplexity-key}"
          }
        },
        // https://github.com/modelcontextprotocol/servers/tree/main/src/fetch
        "fetch": {
          "type": "stdio",
          "command": "uvx",
          "args": ["mcp-server-fetch"]
        },
        "my-remote-server": {
          "type": "sse",
          "url": "http://api.contoso.com/sse",
          "headers": { "VERSION": "1.2" }
        }
      }
    }

     8-4-1.入力変数定義:inputs

     inputsフィールドを使用すると、設定値のカスタムプレースホルダを定義することができ、 機密情報をハードコーディングする必要がなくなります。
      現在のVS Codeでは3種類の入力変数をサポートしています。各タイプで追加のコンフィグレーション属性(configuration attributes)が必要です。

    1. promptString:ユーザーから文字列を取得するための入力ボックスを表示

      • description:クイック入力に表示され、入力のコンテキストを提供

      • default:ユーザーが何も入力しなかった場合に使用されるデフォルト値

      • password:入力された値を表示しないパスワード。プロンプトを表示するにはtrueを設定

    2. pickString:クイックピックのドロップダウンを表示し、ユーザーが複数のオプションから選択できる

      • description:クイックピックに表示され、入力のコンテキストを提供

      • options:ユーザーが選択できるオプションの配列

      • default:ユーザーが何も入力しなかった場合に使用されるデフォルト値

    3. command:任意のコマンドを実行

      • command:変数補間に関するコマンドを実行

      • args:コマンドの実装に渡されるオプションバッグ

     8-4-2.サーバー定義:servers

     mcp.jsonでは「サーバーの接続タイプを設定」が必要となります。

     例としてコマンドパレットを開き(Ctrl+Shift+P)、「MCP: サーバーの追加」を選択すると確認できます。

    • コマンド(stdio:標準入出力):MCPプロトコルを実装するローカルコマンドを実行

      • NPMパッケージ:NPMパッケージ名からインストール

      • Pipパッケージ:Pipパッケージ名からインストール

      • Dockerイメージ:Dockerイメージからインストール

    • HTTP(sse:server-sent-events):MCPプロトコルを実装するリモートHTTPサーバーに接続

    画像

    【MCPサーバー用STDIO接続:ローカルサーバー】
     コマンド(stdio)型のMCPサーバーは、ローカルで実行可能なプログラムとして提供されます。ローカル環境で動作するため高速にツールを呼び出せ、オフラインでも利用可能です。ただしローカルで実行するため、事前にその言語環境(PythonやNodeなど)を環境構築が必要です。

     stdioでの引数は以下の通りです。

    画像
    Configuration format-Connect with stdio:

    【MCPサーバー用SSE接続:リモートサーバー】
     HTTP(SSE:Server-Sent Events)型のMCPサーバーは、HTTPプロトコル越しに通信を行うタイプです。リモートのMCPサービスを利用する場合、設定ファイルで"type": "sse"を指定し、URLを設定します。

     sseでの引数は以下の通りです。

    画像
    Configuration format-Connect with see:

    8-5.MCPサーバーの追加

     前述の通り、設定環境は「ワークスペース設定」と「ユーザー設定」があります。その中でMCPサーバーの記述方法は2種類あります。

    1. 手動で作成

      • case1:スクラッチで記述 or コピペ

      • case2:テンプレート(コード スニペット)を読出し、追加で必要な情報を記載

      • case3:コマンドラインで追加(Command-line configuration)

      • Case4:URL handlerで追加(URL handler)

    2. 外部のMCPサーバーを使用

     8-5-1.スニペット追加

     今回は”MCP: サーバーの追加”からコードスニペットを呼び出し、ワークスペース内に追加しました。

    1. ワークスペース内に”.vscode/mcp.json”作成

      • 8-3-1項で説明済み

    2. コマンドパレットを開く(Ctrl+Shift+P)

    3. 「MCP: サーバーの追加」を選択

      • 2を飛ばしてmcp.json下の「サーバーの追加」ボタンを押してもOK

    4. サーバー接続タイプを設定:

      • 今回はstdio(標準入出力)を選択

    5. サーバーの情報入力

      • 手入力1(command):実行ファイルの起動コマンドはpythonを指定

      • 手入力2(サーバー名):サーバーの名称を入力

    画像

     入力が完了すると”.vscode/mcp.json”に規定フォーマットのコードが追加されました。

    画像

     現状だとargs(コマンドに渡される引数の配列)が無いため、何も動きません。次にMCPサーバーを動かすためのスクリプトを設定していきます。

     8-5-2.MCPサーバー実装/スクリプト準備

     本項では下記2つを実装します。

    1. mcp_server.pyの作成:

      • 現在の時刻を確認できるよう"datetime"ライブラリを使用

      • MCPサーバーを実装するためにFastMCPクラスを使用

      • ファイル名は何でも良いため適当に"mcp_server"と命名

      • mcpライブラリの使い方は別記事で作成予定

    2. ”.vscode/mcp.json”の修正:

      • command:baseのPython環境が3.8系でありmcpが使えないので、直接仮想環境のパスを入力

      • args:通常はスクリプト名(mcp_server.py)だけ書けばOK。ただ今回はcommandに仮想環境を設定しているため?、そのままだと動作しなかったので、事前定義済み変数(Predefined variables)を追加

    画像
    [.vscode/mcp.json]
    {
        "servers": {
          "testmcp": {
            "type": "stdio",
            "command": "C:\\Users\\kiyo\\Anaconda3\\envs\\base2\\python.exe",
            "args": ["${workspaceFolder}\\mcp_server.py"]
          }
        }
    }
    [mcp_server.py]
    from mcp.server.fastmcp import FastMCP 
    from datetime import datetime
    
    
    # MCPサーバーのインスタンスを作成(サーバー名を指定)
    mcp = FastMCP("My Tools Server")
    
    @mcp.tool()
    def get_current_time() -> str:
        now = datetime.now() #  # 現在の日時を取得
        # 日時をYYYY-MM-DD HH:MM:SS形式の文字列で返す
        return now.strftime("%Y-%m-%d %H:%M:%S")
    
    if __name__ == "__main__":
        mcp.run(transport="stdio")

    【参考:仮想環境のPythonパス確認方法※Anaconda環境】
     "activate <仮想環境名>"で有効化し、"where python"で確認できます。
     下記では"base2"という仮想環境のPythonパスを確認しました。

    [IN]
    activate base2
    where python
    
    [OUT]
    C:\Users\kiyo\Anaconda3\envs\base2\python.exe
    C:\Users\kiyo\Anaconda3\python.exe
    C:\Users\kiyo\AppData\Local\Microsoft\WindowsApps\python.exe

    8-6.MCPサーバーの起動

     MCPサーバーの起動手順は下記の通りです。

    1. チャットビューを開き(Ctrl+Alt+I)、Agent Modeを選択

      • オプションで、AIモデルを選択

    2. MCPサーバーの起動:方法は2種類

      1. mcp.jsonを見ると”▷起動”ボタンがあり、そのボタンを押す

      2. コマンドパレット(Ctrl+Shift+P)から”MCP: List Servers”を選択するとMCPサーバーのリストが表示される。サーバーを選択し、”サーバーの起動”を押す

    3. 利用可能なツールを表示するため、ツールボタンを選択

      • 先ほど作成したMCPサーバー(testmcp)のツール(mcp_server.pyの get_current_time()関数)があるか確認

      • 動かしたいツールが”実行中”であれば準備完了

      • オプションで、不必要なツールを選択可能

    画像

    8-7.MCPツールの使用(Agent Mode)

     実際にGitHub Copilo Agent ModeでMCPツールを使用してみます。なおツールは MCP を通じて公開される個別の機能です(MCPはあくまでプロトコル)。
    (Use MCP servers in VS Code (Preview):Use MCP tools in agent mode)

     使用方法は簡単であり、下記の通りです。

    1. プロンプトをチャット入力BOXに入れて送信

    2. ツール実行前に、アクションの実行を確認されます。「続行」ボタンのプルダウンから下記オプションを選択可能です。

      • このセッションで許可する

      • このワークスペースで許可する

      • 常に許可

    画像

    【結果の比較:MCPサーバーの有無】
     MCPサーバー(今回実装したツール)の有無における結果の比較を実施しました。無しだと、日付は理解できていますが時刻情報までは取得できませんでした。しかし、有りだと時刻情報までは取得できています。

    画像
    図 サーバー無しでAgent Modeに質問
    画像
    図 サーバー起動後にAgent Modeに質問

    8-8.参考

     8-8-1:MCPの管理:List Servers

     コマンドパレットを開き(Ctrl+Shift+P)、”MCP: List Servers”を検索するとサーバーの一覧表示ができます。またここから下記も実行できます。
    (Use MCP servers in VS Code (Preview):Managing tools)

    1. サーバーの起動・停止・再起動

      • ”.vscode/mcp.json”ファイルを開いてVS Codeのエディタ上から直接起動・停止・再起動も可能

    2. サーバー構成の確認

    3. サーバーログの確認

    画像

     8-8ー2.トラブルシューティング

     MCP serverでエラーが発生した場合、チャットビューにエラーが示されます(Use MCP servers in VS Code (Preview)-Troubleshooting)。

    画像

     エラーログは下記で確認できます。

    • チャットビューのエラー表示を押し「出力の表示」を選択

    • コマンドパレットから”MCP: List Servers”を選択し「出力の表示」を選択

    画像

     8-8ー3.MCPサーバーの自作・応用

     別記事参照のこと。

    9.GitHub Copilot Coding Agent

     2025年5月30日現在は「GitHub Copilot Enterprise / GitHub Copilot Pro+契約者」のみため、Proまで落ちてきたら確認予定

    10.SWEエージェント

     本機能(Project Padawan)は出たてのため、紹介のみです。

    この論文で初めて紹介された SWEエージェントは、ソフトウェアエンジニアを支援する(または代行する) AI駆動の自動システムの一種です。コードの生成やレビュー、コードベースのリファクタリングや最適化、テストやパイプラインのようなワークフローの自動化、アーキテクチャやエラーのトラブルシューティング、ベストプラクティスに関するガイダンスの提供など、様々な開発タスクを実行することができます。SWEエージェントは、開発者がルーチンワークや専門的なタスクの一部をAIに委ね、より価値の高い作業に集中できるようにすることを目的としています。その性能は、GitHub上の12の人気のあるPythonレポジトリから2,294のIssue-Pull Requestのペアを集めたデータセットであるSWE-benchを基準に評価されることが一般的です。

    GitHub Copilot:エージェントの覚醒


    参考資

    別添1:GitHub Copilot

    日本語版

    チートシート(Cheat Sheet)

    別添2:大規模言語モデル(LLM)

    別添3:MCP関連

    別添4:GitHubレポジトリ

    別添5:技術ブログ

    別添6:Python

    あとがき

     せっかく有料版なのに全然機能使えてなかった・・・・
    本当は業務でもっと使えたらいいんだけどな・・・・

    編集履歴

    • 2025年4月30日:初版発行


     
     

    KIYO

     
     
    普段は製造業で企画/開発/設計しております。記事はプログラミング・機械学習、IoT関係の記事をメインで作成し、なるべく1つの記事で知りたいことを網羅していきます。内容は学術的より実装・アウトプット(ほしくなるもの)を重視して作成しています。 面白そうな仕事があればやりたいです!

    あなたへのおすすめ