【2026年最新】VS Code ＆ GitHub Copilot 導入・活用ガイド

AIがコーディングをサポートする「GitHub Copilot」。2026年現在、無料プランの拡充や、外部ツールと連携するMCPの登場により、単なる補完ツールを超えた「開発エージェント」へと進化しました。
本記事では、土台となるVS Codeの準備から、Copilotの高度な使いこなし術までを解説します。

VS Codeのインストールと日本語化
1. インストール手順
2. ② インターフェースの日本語化
GitHub Copilotの導入と基本機能
1. 導入ステップ
2. 基本機能
チャットの種類
1. チャットモードと言語モデルの切り替え
  1. 3つのチャットモード
  2. 言語モデルのラインナップと特徴
MCP（Model Context Protocol）
1. MCPサーバーの導入・追加
2. ツールを有効化して呼び出す
  1. 実務で役立つ具体的な活用例
VS Code のメンション（@ と #）
AIの動作を規定する設定ファイル
まとめ
参考

VS Codeのインストールと日本語化

インストール手順

公式サイト（code.visualstudio.com）へアクセス。
お使いのOS（Windows / Mac / Linux）に合わせたインストーラーをダウンロード。
インストーラーを実行し、基本的にはすべて「次へ」で進めてOKです。

② インターフェースの日本語化

VS Codeを起動し、左サイドバーにある 「拡張機能アイコン（四角いマーク）」 をクリック。
検索窓に Japanese と入力。
「Japanese Language Pack for VS Code」 をインストール。
右下に表示される「Change Language and Restart」をクリックして再起動。これでメニューが日本語になります。

GitHub Copilotの導入と基本機能

導入ステップ

拡張機能メニューで GitHub Copilot を検索し、本体と Chat の2つをインストール。
（従来の GitHub Copilot は、コード補完とCopilot Chatがそれぞれ別の拡張機能として提供されていました。
しかし最近のアップデートにより、これらの主要機能はすべて GitHub Copilot Chat 拡張機能に統合され、1つの拡張機能だけで Copilot の全機能を利用できるようになりました。
参考：One extension, same user experience）
右下の「GitHubにサインイン」をクリックして連携を完了させます。

基本機能

コード補完（Inline Completion）

呼び出し：Ctrl + I（Macの場合は Cmd + I）
コメントや途中のコードから次の行・関数・ロジックを自動生成
Tabキーで即採用、不要ならスキップ
対応言語が広い（JavaScript / Python / Go / Java / C/C++ ほか）

Copilot Chat（対話型AI）

呼び出し：Ctrl + Shift + Iや画面の一番上のチャットメニューから選択
「この関数、何してる？」「もっと速く書き換えて」など
エラーの意味や修正案を自然言語で質問
コード片を貼らずにリポジトリ文脈を理解して答えるのが強み

コメント → 実装生成

日本語コメントでもOK
仕様メモ・TODOから一気に実装たたき台を作れる
例　// ユーザーIDを受け取り、DBからユーザー情報を取得する関数

コメントからコードを実装

// ユーザーIDを受け取り、APIからユーザー情報を取得する関数
// エラー時は null を返す
async function fetchUserInfo(userId) {
    const apiUrl = `https://api.example.com/users/${userId}`;       
    try {
        const response = await fetch(apiUrl);   
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }   
        const userInfo = await response.json();
        return userInfo;   
    } catch (error) {
        console.error('Error fetching user info:', error);
        return null;   
    }   
}

バグ修正・リファクタ提案

明らかなミス（nullチェック漏れ等）を指摘
冗長コードを読みやすく・安全に整理
「この処理、もっとシンプルにできる？」で改善案が出る

チャットでバグ修正

// --- 修正前（これらすべてを選択して Ctrl + I）で「例外が出ないように修正して」を指示 ---
function getFirstEmail(user) {
  return user.profile.emails[0].toLowerCase();
}


// --- 修正後（Copilotが提案する内容） ---
function getFirstEmail(user) {
  if (!user || !user.profile || !user.profile.emails || user.profile.emails.length === 0) {
    return null;
  }
  return user.profile.emails[0].toLowerCase();
}

テストコード生成

既存関数からユニットテストの雛形を生成
Jest / pytest / JUnit など主要フレームワーク対応

テストコードの生成

元の関数
// 数値配列の平均を返す。空配列の場合は null を返す
function average(numbers) {
  if (numbers.length === 0) return null;
  return numbers.reduce((a, b) => a + b, 0) / numbers.length;
}


チャットで指示：average関数のユニットテストをJestで作成する


ワークスペースとaverage関数の現在の状態を確認しながら、Jestテストを作成します。

まず、現在のファイルと環境を確認させていただきます： 

読み取り

average関数が確認できました。次に、ワークスペースを作成してJestテストを設定します： 

Using "新しいワークスペースの作成"

ワークスペースフォルダを開いてください。VS Code で空のフォルダを開き、その後で下記コマンドを実行してプロジェクトを初期化できます：

```powershell
# プロジェクトフォルダを作成して移動
mkdir average-jest-test
cd average-jest-test

# Node.js プロジェクトの初期化
npm init -y

# Jest をインストール
npm install --save-dev jest

# Jest設定を生成
npx jest --init
```

その後、以下のファイルを作成します：

**src/average.js** - average関数
```javascript
// 数値配列の平均を返す。空配列の場合は null を返す
function average(numbers) {
  if (numbers.length === 0) return null;
  return numbers.reduce((a, b) => a + b, 0) / numbers.length;
}

module.exports = average;
```

**src/average.test.js** - Jestテスト
```javascript
const average = require('./average');

describe('average関数', () => {
  test('通常の配列で平均を計算する', () => {
    expect(average([1, 2, 3, 4, 5])).toBe(3);
  });

  test('単一要素で計算する', () => {
    expect(average([10])).toBe(10);
  });

  test('負の数を含む配列で計算する', () => {
    expect(average([-5, -3, -1])).toBe(-3);
  });

  test('小数点を含む配列で計算する', () => {
    expect(average([1.5, 2.5, 3])).toBeCloseTo(2.333333, 5);
  });

  test('空配列は null を返す', () => {
    expect(average([])).toBeNull();
  });

  test('ゼロを含む配列で計算する', () => {
    expect(average([0, 0, 0])).toBe(0);
  });
});
```

テストを実行する場合：
```powershell
npm test
```

このテストスイートでは、正常系・エッジケース・エラーケースをカバーしています。

Pull Requestサポート

この変更、取り込んでいい？」とチームに確認する仕組み。「変更内容を人に伝える文章づくり」を代行してくれる機能「変更内容を人に伝える文章づくりを代行してくれる機能。

コードは書かず、説明・要約・レビュー補助がメインの機能。

指示：「このPull Requestの内容を要約して」、「このPRでレビューすべきポイントを教えて」など
PRの要約文を自動生成
レビュー観点のヒント提示（変更点・影響範囲）
生成された文章をPR説明欄に貼る

Pull Requestサポート

PR説明欄の例

概要
このPRでは、ユーザー取得APIに入力値バリデーションを追加しました。

変更点
・不正なリクエスト時のエラー処理を追加
・既存処理のリファクタリング

影響範囲
既存機能への影響はありません。

IDE連携（VS Code / JetBrains系ほか）

VS Codeの場合は、拡張機能を入れるだけ
コーディングの流れを止めずに使える

チャットの種類

種類	呼び出し方	特徴
インラインチャット	`Ctrl + I`	コード上で直接対話。選択範囲のリファクタリングやバグ修正に最適。メリット: 修正案が差分（Diff）として表示され、`Enter` を押すだけで自分のファイルが更新されます。
サイドバー	`Ctrl + Shift + I`	メインの相談窓口。コードの解説や新しい技術の学習、設計の相談に。メリット: 履歴が残るため、過去のやり取りを見返しながら作業できます。
クイックチャット	`Cmd + Shift + L`	一時的な質問窓。作業画面を邪魔せず、サクッと調べ物をしたい時に。メリット: 画面を占有せず、調べ物が終わったらすぐに消せるので作業が中断しません。

チャットメニューからの起動

インラインチャット


// --- 修正前（これらすべてを選択して Ctrl + I） ---
const user = getUser(id);
const profile = getProfile(user.id);
display(profile);

// --- 修正後（Copilotが提案する内容） ---
function processUserData(id) {
  console.log("Fetching user...");
  const user = getUser(id);
  
  console.log("Fetching profile...");
  const profile = getProfile(user.id);
  
  console.log("Displaying profile...");
  display(profile);
}
processUserData(id);

クイックチャット

サイドバーチャット

チャットモードと言語モデルの切り替え

3つのチャットモード

ASK: 質問に答えるだけ（コードは勝手に書き換えない。読み取り専用）。
EDIT: コードを直接書き換える差分提案モード。
AGENT: プロジェクト全体を把握し、複雑な目的を伝えると、自分で必要なファイルを調べ、ツールを使い、解決まで導く。
plan：実行手順（計画）を立ててユーザーに確認するためのモード。

言語モデルのラインナップと特徴

チャット画面のモデル名（画像では「Auto」の部分）をクリックすると、以下のモデルに切り替えが可能です。

Auto (デフォルト): タスクの内容に合わせて、Copilotが最適なモデル（GPT-4oやClaude系など）を自動で選択します。
Claude Haiku 4.5: 非常に高速でレスポンスが良く、日常的なコード生成やシンプルな質問に最適です。
GPT-4.1 / GPT-4o: OpenAIの高性能モデル。論理的な推論に強く、複雑なバグ修正や解説に向いています。
Raptor mini (Preview): 最新の軽量・高速モデルのプレビュー版です。

「どのモデルがいいかわからない」 という場合は、まずは 「Auto」 のままにしておくのが最も賢明です。
AIがプロンプトの複雑さを判断して、最適な「モデル」を使い分けてくれます。

MCP（Model Context Protocol）

MCP（Model Context Protocol）は、GitHub Copilotに「外部ツールを操作する能力」を与えるための共通規格です。

これにより、これまでコード編集しかできなかったAIが、GitHubのIssueを読み書きしたり、データベースを検索したり、Slackにメッセージを送ったりといった複雑な実務をこなせるようになります。

MCPサーバーの導入・追加

MCPを利用するには、まず「サーバー」と呼ばれる連携プログラムを追加します。

コマンドパレットから追加:
Ctrl + Shift + P を押し、MCP: Add Server を入力して選択します。
レジストリから検索:
拡張機能ビュー（Ctrl + Shift + X）で @mcp と検索すると、公開されているMCPサーバーの一覧が表示され、そこから直接インストールできます。
設定ファイル (mcp.json) での管理:
.vscode/mcp.json を作成することで、プロジェクトごとに利用するサーバーを定義できます。
設定を書き込むと、エディタ上に [▷Start] ボタンが表示され、ワンクリックで起動できます。

ツールを有効化して呼び出す

サーバーを起動したら、チャット画面でAIがそれを使えるように設定します。

Agentモードへの切り替え:
Copilotチャット欄の上部または下部にあるモード選択から 「Agent」 を選びます。
ツールの選択:
入力欄付近にある 「レンチ（スパナ）アイコン 🔧」 をクリックします。インストール済みのMCPツール（例：GitHub操作、DB検索など）が表示されるので、使用したいものにチェックを入れます。
自然言語で依頼:
あとは普通のチャットと同じように指示を出すだけです。AIが「どのツールを使うべきか」を自分で判断して実行します。

実務で役立つ具体的な活用例

連携対象	具体的な指示（プロンプト）の例
GitHub	「@workspace 今自分にアサインされているIssueを取得して、その修正案を全ファイルに適用して」
Figma	「このFigmaのデザインURLから、ReactとTailwindを使ったコンポーネントコードを生成して」
Database	「DBのスキーマ情報を確認して、売上集計を行う複雑なSQLクエリを作成して」
テスト/Linter	「全ファイルをスキャンして、テストが落ちている箇所を特定し、修正してテストを再実行して」

VS Code のメンション（`@` と `#`）

Visual Studio Code では、クイックオープン機能を使って、
ファイルやコード要素を素早く検索・移動することができます。

その際に使用されるのが、@ や # といったメンション記号です。
これらは、検索の対象範囲や意味を切り替えるための記号として機能します。

`@` メンションの役割

@ は、現在開いているファイル内の構造（シンボル）を検索するための記号です。

関数、クラス、メソッド、変数、見出しなど、
そのファイルに定義されている要素を一覧表示し、
目的の位置へすぐに移動できます。

主な用途

長いファイル内で特定の関数や定義を探す
ファイル構造を素早く把握する
スクロールせずに目的の位置へジャンプする

`#` メンションの役割

# は、プロジェクト（ワークスペース）全体を対象にシンボルを検索するための記号です。

複数のファイルにまたがる関数やクラスの定義を横断的に検索し、
該当するファイルへ直接移動できます。