VS Code での GitHub Copilot の利用を開始する

GitHub Copilot は、Visual Studio Code でのコードの書き方を一変させます。このハンズオンチュートリアルでは、タスク管理 Web アプリケーションを完成させながら、VS Code の AI 機能を体験します。具体的には、複数ファイルにまたがる機能を実装する自律型エージェント、インテリジェントなインラインサジェスト、インラインチャットによる正確な編集、統合されたスマートアクション、そして強力なカスタマイズオプションを学びます。

このチュートリアルを終える頃には、動作する Web アプリケーションと、自身の開発スタイルに適応したパーソナライズ済みの AI コーディング環境が手に入ります。

サンプルアプリを作成する

VS Code のチャットを使用して、サンプルアプリケーションを一気に生成します。

前提条件

マシンに VS Code がインストールされていること。Visual Studio Code Web サイトからダウンロードしてください。
GitHub Copilot へのアクセス権があること。以下の手順に従って、VS Code で GitHub Copilot をセットアップしてください。

ヒント
Copilot のサブスクリプションをお持ちでない場合、VS Code 内から直接 Copilot に登録して無料で利用を開始できます。毎月のインラインサジェスト数と AI クレジットが付与されます。

重要
2026年4月20日より、Copilot Pro、Copilot Pro+、Max、および Student プランの新規登録は一時的に停止されています。

ステップ 1: インラインサジェストを体験する

AI によるインラインサジェストは入力中に表示され、より速く、エラーを減らしてコードを書くのに役立ちます。まずはタスク管理アプリの基盤作りから始めましょう。

プロジェクト用の新しいフォルダーを作成し、それを VS Code で開きます。
index.html という名前の新しいファイルを作成します。
以下を入力し始めると、VS Code がインラインサジェスト（*ゴーストテキスト*）を提供します。
```
<!DOCTYPE html>
```
大規模言語モデルは非決定論的（確率的）であるため、提案される内容は異なる場合があります。
Tab キーを押して提案を受け入れます。

おめでとうございます！初めて AI によるインラインサジェストを受け入れました。
HTML 構造の構築を続けます。<body> タグの中で、入力を始めます。
```
<div class="container">
    <h1>My Task Manager</h1>
    <form id="task-form">
```
アプリケーションの構造を構築するにつれて、VS Code が関連する HTML 要素を提案し続ける様子を確認してください。
複数の候補が表示される場合は、ゴーストテキストにマウスオーバーしてナビゲーションコントロールを表示するか、⌥] (Windows, Linux Alt+]) および ⌥[ (Windows, Linux Alt+[) を使用して候補を切り替えます。

インラインサジェストは入力に合わせて自動的に動作し、あなたのパターンやプロジェクトのコンテキストから学習します。定型コード、HTML 構造、反復的なパターンの記述に特に役立ちます。

ステップ 2: エージェントを使用して機能を丸ごと構築する

AI エージェントは、VS Code の最も強力な AI 機能です。自然言語のプロンプトを与えると、自律的に計画を立て、複数ファイルにまたがる複雑な機能を実装します。これを使用して、タスク管理アプリケーションの核となる機能を構築しましょう。

⌃⌘I (Windows, Linux Ctrl+Alt+I) を押すか、VS Code タイトルバーのチャットアイコンを選択して、チャットビューを開きます。

チャットビューでは、自然言語プロンプトを使用して AI と対話します。継続的な会話を行い、リクエストを繰り返し洗練させることで、より良い結果を得ることができます。
エージェントのドロップダウンメニューから Agent を選択し、AI がリクエストを最初から最後まで独立して実装できるようにします。

重要
エージェントのオプションが表示されない場合は、VS Code の設定でエージェントが有効になっていることを確認してください ( chat.agent.enabled Open in VS Code Open in VS Code Insiders This setting is managed at the organization level. Contact your administrator to change it.)。所属組織でエージェントが無効になっている可能性があるため、管理者に問い合わせてこの機能を有効にしてください。
以下のプロンプトを入力し、Enter を押します。エージェントがリクエストを分析し、ソリューションの実装を開始します。
```
Create a complete task manager web application with the ability to add, delete, and mark tasks as completed. Include modern CSS styling and make it responsive. Use semantic HTML and ensure it's accessible. Separate markup, styles, and scripts into their own files.
```
エージェントがリクエストを実装するために必要なファイルとコードを生成する様子をご覧ください。index.html ファイルが更新され、スタイル用の styles.css ファイルと機能用の script.js ファイルが作成されるはずです。

ヒント
言語モデルによって得意分野が異なる場合があります。チャットビューのモデルドロップダウンを使用して、言語モデルを切り替えてみてください。
生成されたファイルを確認し、Keep（維持）を選択してすべての変更を受け入れます。
ファイルを右クリックして Show Preview（プレビューを表示）を選択し、VS Code 統合ブラウザーで index.html ファイルを開きます。タスクを追加し、完了としてマークし、削除することができます。
次に、追加機能を追加してみましょう。チャット入力ボックスに以下のプロンプトを入力します。
```
Add a filter system with buttons to show all tasks, only completed tasks, or only pending tasks. Update the styling to match the existing design.
```
エージェントがこの機能を完全に実装するために、どのように複数のファイルにわたる変更を調整するかに注目してください。

エージェントは、高レベルの要件を理解し、それを動くコードに変換することに長けています。新しい機能の実装、コードの広範囲なリファクタリング、あるいはゼロからのアプリケーション構築に最適です。

ステップ 3: インラインチャットで精密な調整を行う

エージェントが大規模な機能を処理する一方で、エディターのインラインチャットはファイル内の特定のコードセクションに対する対象を絞った改善に最適です。これを使ってタスク管理アプリを強化しましょう。

JavaScript ファイルを開き、新しいタスクを追加するコードを見つけます。
コードブロックを選択し、⌘I (Windows, Linux Ctrl+I) を押してエディターのインラインチャットを開きます。

注意
大規模言語モデルは非決定論的であるため、実際のコードは異なる場合があります。
以下のプロンプトを入力します。
```
Add input validation to prevent adding empty tasks and trim whitespace from task text.
```
インラインチャットが選択されたコードに集中し、対象を絞った改善を行う様子に注目してください。
変更内容を確認し、Keep（維持）を選択して適用します。

エディターのインラインチャットは、エラーハンドリングの追加、個々の関数のリファクタリング、バグ修正など、コードベース全体に影響を与えずに、小さく焦点を絞った変更を加えるのに最適です。

ステップ 4: AI エクスペリエンスをパーソナライズする

チャットをカスタマイズすることで、特定のニーズやコーディングスタイルに合わせて調整できます。カスタム指示を設定したり、専門化されたカスタムエージェントを作成したりできます。プロジェクト用に完全なパーソナライズ設定を作成しましょう。

カスタム指示を作成する

カスタム指示は、コーディングの好みや基準を AI に伝えます。これらはすべてのチャット対話に自動的に適用されます。

プロジェクトルートに .github という新しいフォルダーを作成します。
.github フォルダー内に copilot-instructions.md というファイルを作成します。

以下の内容を追加します。

# Project general coding guidelines

## Code Style
- Use semantic HTML5 elements (header, main, section, article, etc.)
- Prefer modern JavaScript (ES6+) features like const/let, arrow functions, and template literals

## Naming Conventions
- Use PascalCase for component names, interfaces, and type aliases
- Use camelCase for variables, functions, and methods
- Prefix private class members with underscore (_)
- Use ALL_CAPS for constants

## Code Quality
- Use meaningful variable and function names that clearly describe their purpose
- Include helpful comments for complex logic
- Add error handling for user inputs and API calls

ファイルを保存します。これらの指示が、このプロジェクトでのすべてのチャット対話に適用されるようになります。
エージェントに新しい機能の追加を依頼して、カスタム指示をテストします。
```
Add a dark mode toggle button to the task manager.
```
生成されたコードが指定したガイドラインに従っていることに注目してください。VS Code は、ファイルタイプごとに指示を適用するなど、より高度なカスタム指示もサポートしています。

ヒント

チャットで /init スラッシュコマンドを使用すると、プロジェクトの構造とコーディングパターンに基づいてカスタム指示を自動生成できます。既存のコードベースがあり、AI 支援の準備をしたい場合に便利です。

コードレビュー用のカスタムエージェントを作成する

カスタムエージェントは、特定のタスクに対する専門的な AI ペルソナを作成します。分析とコードへのフィードバックに重点を置いた「コードレビュー担当者」エージェントを作成しましょう。カスタムエージェントの定義では、AI の役割、特定のガイドライン、使用可能なツールを定義できます。

コマンドパレットを開き、Chat: New Custom Agent（チャット: 新しいカスタムエージェント）コマンドを実行します。
場所として .github/agents を選択します。

このオプションにより、カスタムエージェントがワークスペースに追加され、他のチームメンバーがプロジェクトを開いたときに使用できるようになります。
カスタムエージェントに「Reviewer」という名前を付けます。これにより、.github/agents フォルダー内に Reviewer.agent.md という新しいファイルが作成されます。

ファイルの内容を以下に置き換えます。このカスタムエージェントはコード変更を許可しない点に注意してください。

---
name: 'Reviewer'
description: 'Review code for quality and adherence to best practices.'
tools: ['vscode/askQuestions', 'vscode/vscodeAPI', 'read', 'agent', 'search', 'web']
---
# Code Reviewer agent

You are an experienced senior developer conducting a thorough code review. Your role is to review the code for quality, best practices, and adherence to [project standards](../copilot-instructions.md) without making direct code changes.

When reviewing code, structure your feedback with clear headings and specific examples from the code being reviewed.

## Analysis Focus
- Analyze code quality, structure, and best practices
- Identify potential bugs, security issues, or performance problems
- Evaluate accessibility and user experience considerations

## Important Guidelines
- Ask clarifying questions about design decisions when appropriate
- Focus on explaining what should be changed and why
- DO NOT write or suggest specific code changes directly

ファイルを保存します。チャットビューで、エージェントピッカーからこのカスタムエージェントを選択できるようになります。
エージェントピッカーから Reviewer を選択し、以下のプロンプトを入力してカスタムエージェントをテストします。
```
Review my full project
```
AI がコードレビュー担当者として振る舞い、分析や改善の提案を行う様子に注目してください。

ステップ 5: スマートアクションで組み込みの AI 支援を活用する

スマートアクションは、AI 機能を VS Code のインターフェース内に直接統合し、開発ワークフローにシームレスに組み込みます。チャットでの対話とは異なり、スマートアクションは最も必要な場所にコンテキストに応じて表示されます。例としてコミットメッセージの生成を見てみましょう。

⌃⇧G (Windows, Linux Ctrl+Shift+G) を押すか、アクティビティバーのソース管理アイコンを選択して、ソース管理ビューを開きます。
プロジェクトの Git リポジトリをまだ初期化していない場合は、ソース管理ビューで リポジトリを初期化 を選択します。
コミットしたいファイルの横にある + ボタンを選択して、変更をステージングします。
きらめくアイコン（スパークルアイコン）を選択し、ステージングされた変更に基づいてコミットメッセージを生成します。

AI はステージングされた変更を分析し、標準的なコミット規約に従った説明的なコミットメッセージを生成します。AI は以下を考慮します。
- 変更されたファイル
- 変更の性質（機能の追加、バグ修正、リファクタリング）
- 変更の範囲と影響
生成されたメッセージを確認します。問題なければ、コミットを続行します。別のスタイルや焦点を希望する場合は、きらめくアイコンをもう一度選択して別のメッセージを生成します。

コミットメッセージ生成のようなスマートアクションは、チャットインターフェースにコンテキストを切り替えることなく、AI が既存のワークフローに自然に統合される方法を示しています。VS Code には、デバッグ、テストなどを支援する他の多くのスマートアクションがあります。

次のステップ

おめでとうございます！タスク管理アプリケーションを完成させ、VS Code のコア機能全体で AI を効果的に活用する方法を学習しました。

他のカスタマイズオプションを探索することで、AI の機能をさらに拡張できます。

計画、デバッグ、ドキュメント作成など、タスクに応じた専門的なエージェントを追加する。
特定のプログラミング言語やフレームワーク用のカスタム指示を作成する。
MCP (Model Context Protocol) サーバーや VS Code 拡張機能の追加ツールで、AI の能力を拡張する。