編集

VS Code で GitHub Copilot を使い始める

GitHub Copilot は、Visual Studio Code でのコード作成方法を変革します。この実践的なチュートリアルでは、タスク管理 Web アプリケーションを完全に構築しながら、Copilot のコア機能であるインテリジェントなコード補完、エージェントモードによる自律的な機能開発、インラインチャットによる正確な編集、統合されたスマートアクション、強力なカスタマイズオプションを発見します。

このチュートリアルの終わりまでに、機能する Web アプリケーションと、開発スタイルに適応するパーソナライズされた AI コーディング設定の両方を手に入れることができます。

前提条件

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

ヒント
Copilot のサブスクリプションをお持ちでない場合でも、VS Code 内から直接 Copilot を無料で利用登録でき、月間の補完とチャットのやり取りの制限があります。

ステップ 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: エージェントモードで完全な機能を構築する

エージェントモードは、VS Code の最も強力な AI 機能です。自然言語のプロンプトが与えられると、複数のファイルにわたって複雑な機能を自律的に計画し、実装します。これを使用して、タスクマネージャーのコア機能を作成しましょう。

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

チャットビューを使用すると、AI と継続的に会話できるため、リクエストを洗練し、より良い結果を得ることが容易になります。
チャットビューの上部にあるチャットモードのドロップダウンで、Agent を選択して、エージェントベースの自律コーディングモードに切り替えます。
次のプロンプトを入力し、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 を選択してすべての変更を受け入れます。
ブラウザで index.html ファイルを開き、タスクマネージャーが動作していることを確認します。タスクの追加、完了のマーク付け、削除ができます。

ヒント
Live Preview 拡張機能を使用して、開発中に VS Code でリアルタイムに変更を確認します。
追加機能を加えましょう。チャットビューで、次のプロンプトを入力します。
```
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.
```
インラインチャットが選択したコードに具体的に焦点を当て、ターゲットを絞った改善を行っていることに注目してください。
変更をレビューし、Accept を選択して適用します。

エディターのインラインチャットは、エラー処理の追加、個々の関数のリファクタリング、バグ修正など、より広範なコードベースに影響を与えることなく、小さく集中的な変更を行うのに理想的です。

ステップ 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 は、特定のファイルタイプに指示を適用するなどのより高度なカスタム指示をサポートしています。

コードレビュー用のカスタムチャットモードを作成する

カスタムチャットモードは、特定のタスクのために特殊な AI ペルソナを作成します。コードの分析とフィードバックの提供に焦点を当てる「コードレビュアー」モードを作成しましょう。チャットモードでは、AI の役割、ガイドライン、使用できるツールを定義できます。

コマンドパレットを開き、Chat: New Mode File コマンドを実行します。
新しいモードファイルの場所として .github/chatmodes を選択します。

このオプションは、チャットモードをワークスペースに追加し、他のチームメンバーも使用できるようにします。
チャットモードに「Code Reviewer」という名前を付けます。これにより、.github/chatmodes フォルダーに Code Reviewer.md という新しいファイルが作成されます。

ファイルの内容を以下の内容に置き換えます。このチャットモードではコードの変更が許可されていないことに注意してください。

---
description: 'Review code for quality and adherence to best practices.'
tools: ['usages', 'vscodeAPI', 'problems', 'fetch', 'githubRepo', 'search']
---
# Code Reviewer Mode

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.

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

## Communication Style
- Provide constructive, specific feedback with clear explanations
- Highlight both strengths and areas for improvement
- Ask clarifying questions about design decisions when appropriate
- Suggest alternative approaches when relevant

## Important Guidelines
- DO NOT write or suggest specific code changes directly
- Focus on explaining what should be changed and why
- Provide reasoning behind your recommendations
- Be encouraging while maintaining high standards

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

ファイルを保存します。チャットビューで、チャットモードのドロップダウンからこのカスタムモードを選択できるようになりました。
カスタムレビュアーモードをテストする
- モードドロップダウンからCode Reviewerを選択します。
- 次のプロンプトを入力します。「Review my full project」
AI がコードレビュアーとして動作し、直接コードを記述することなく分析と提案を提供していることに注目してください。

パーソナライズされた AI 設定には、以下のものが含まれます。

一貫したコード品質を保証するカスタム指示
異なる種類の作業のための専門チャットモード

ステップ 5: 既製の AI 支援のためにスマートアクションを使用する

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

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

AI はステージングされた変更を分析し、従来のコミット標準に従った記述的なコミットメッセージを生成します。AI は以下を考慮します。
- 変更されたファイル
- 変更の性質（追加された機能、バグ修正、リファクタリング）
- 変更の範囲と影響
生成されたメッセージをレビューします。満足のいくものであれば、コミットを続行します。異なるスタイルや焦点を希望する場合は、もう一度スパークルアイコンを選択して、代替メッセージを生成します。

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

次のステップ

おめでとうございます！完全なタスク管理アプリケーションを構築し、VS Code のコア機能全体で AI を効果的に操作する方法を学びました。

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

計画、デバッグ、ドキュメント作成などのさまざまなタスクのために、より専門的なチャットモードを追加します。
特定のプログラミング言語やフレームワーク用にカスタム指示を作成します。
MCP (Model Context Protocol) サーバーや VS Code 拡張機能の追加ツールで AI の機能を拡張します。