「複数のファイルにまたがる大きなリファクタリングをしたいけど、時間がかかりそう」
「新機能を追加したいが、どのファイルを修正すればいいか迷ってしまう」
「テストを書いて、失敗したら修正して…という作業を自動化できたら」
そんな開発者の悩みを解決してくれるのが、VS Codeの**Agent Mode(エージェントモード)**です。
この機能は、GitHub CopilotのAIがあなたに代わって複数のファイルにまたがる編集やターミナルコマンドを実行し、自律的にタスクを完遂してくれる革新的な機能です。まるでAIが優秀なペアプログラマーとして働いてくれるような体験を提供します。
この記事では、VS Code Agent Modeの基本的な仕組みから実際の使い方、活用のコツまでを詳しく解説します。
VS Code Agent Mode(エージェントモード)とは
基本的な概念
Agent Modeは、GitHub CopilotのAIが「あなたに代わって」以下のような作業を自動で行ってくれるモードです:
- 複数のファイルにまたがる編集作業
- ターミナルでのコマンド実行
- テストの実行と結果に基づく修正
- コード品質チェックとエラー修正
従来の編集との違い
通常の編集モード
- ファイル単位での提案
- 人間が次のステップを判断
- 一つずつ手動で作業を進める
Agent Mode
- ワークスペース全体を理解
- AIが最適な手順を自動で判断
- 複数ステップを連続で実行
- エラーが発生したら自動で修正を試行
どんなタスクに向いているか
Agent Modeが得意なタスク:
- 複雑なリファクタリング作業
- 新機能の追加(複数ファイルの修正が必要)
- 複数ファイルにわたる一括修正
- APIの変更に伴うコード更新
- テスト駆動開発のサイクル自動化
通常の編集モードが適しているタスク:
- 単一ファイルの小さな修正
- 簡単なバグ修正
- コメントの追加
Agent Modeの有効化と設定
前提条件
Agent Modeを使用するには、以下の条件を満たす必要があります:
- VS Code 1.99以上がインストールされている
- GitHub Copilotのサブスクリプションが有効
- GitHub Copilot Chat拡張機能がインストールされている
有効化の手順
設定ファイルでの有効化
VS Codeの設定ファイル(settings.json)に以下を追加します:
{
"chat.agent.enabled": true
}
GUI設定での有効化
Ctrl + ,
(MacはCmd + ,)で設定を開く- 検索欄に「chat agent」と入力
- 「Chat: Agent Enabled」にチェックを入れる
将来の展開
現在はベータ機能ですが、やがて全ユーザーにデフォルトで導入される予定です。早めに使い方を覚えておくと、開発効率の向上に大きく役立ちます。
Agent Modeの使い方
基本的な操作手順
チャットビューを開く
Agent Modeは、VS CodeのChat機能を通じて使用します:
Ctrl + Alt + I(Windows・Linux)
⌃⌘I(Mac)
または、サイドバーのチャットアイコンをクリックします。
Agent Modeに切り替え
- チャットビューの上部にあるモード切り替えボタンをクリック
- 「Agent」を選択
タスクの指示
自然言語でやりたいことを指示します。例:
OAuthログイン機能を追加して、
- ログインページを作成
- 認証フローを実装
- ユーザー情報を管理する仕組みを構築
AIの提案を確認・承認
- AIが作業計画を提示
- 各ステップの内容を確認
- 実行したいものを承認
変更内容の確認
- Diffビューで変更内容を確認
- Accept(承認)またはDiscard(破棄)を選択
- 必要に応じて部分的な修正も可能
実際の使用例
例1:新しいAPIエンドポイントの追加
指示:
ユーザー一覧を取得するAPIエンドポイント /api/users を追加して、
- ルーティングの設定
- コントローラーの実装
- バリデーション
- テストコード
全部含めて作成してください
AIの実行内容:
- ルーティングファイルに新しいエンドポイントを追加
- コントローラーファイルを作成・実装
- バリデーションスキーマを定義
- テストファイルを作成
- テストを実行して動作確認
- エラーがあれば自動で修正
例2:レガシーコードのリファクタリング
指示:
src/legacy フォルダのコードを現代的なES6記法にリファクタリングして、
- var を let/const に変更
- 関数宣言をアロー関数に
- Promiseをasync/awaitに
- 既存のテストが通ることを確認
AIの実行内容:
- 対象ファイルを特定
- 段階的にコードを現代化
- 各ステップでテストを実行
- テストが失敗したら修正を試行
- 最終的な動作確認
Agent Modeの特長と利点
自律的なマルチステップ編集
Agent Modeの最大の特長は、AIが自分で作業手順を考えて実行してくれることです:
従来の方法:
- 人間がファイルAを修正
- 人間がファイルBを修正
- 人間がテストを実行
- エラーが出たら人間が原因を調査
- 人間が修正作業を繰り返し
Agent Mode:
- AIが全体の作業計画を立案
- AIが最適な順序でファイルを修正
- AIが自動でテストを実行
- エラーが出たらAIが原因を分析
- AIが自動で修正を試行
テストやlintの監視と自動修正
Agent Modeでは、コード変更後に自動でテストやリンターを実行し、問題があれば修正を試みます:
- テスト実行:変更後に関連テストを自動実行
- Lint チェック:コード品質をリアルタイムで監視
- 自動修正:エラーやワーニングを自動で解決
- 品質保証:最終的なコード品質を担保
Model Context Protocol(MCP)対応
Agent ModeはMCPに対応しており、外部ツールやサービスとの連携が可能です:
- データベース操作:マイグレーションファイルの自動生成
- API連携:外部サービスとの統合
- デプロイ作業:CI/CDパイプラインとの連携
- 監視ツール:ログ解析やパフォーマンス監視
Agent Modeのツールとセキュリティ
標準で使用できるツール
Agent Modeには、以下のツールが標準で組み込まれています:
ファイル操作
- ファイルの作成・編集・削除
- フォルダ構造の変更
- ファイル内容の検索・置換
ターミナル実行
- npmコマンドの実行
- ビルドスクリプトの実行
- テストコマンドの実行
- Git操作
Web取得
- 外部APIの呼び出し
- ドキュメントの参照
- ライブラリ情報の取得
MCPサーバー連携
Model Context Protocolを通じて、さらに多くのツールと連携できます:
データベース連携
{
"mcp.servers": {
"postgres": {
"command": "npx",
"args": ["@modelcontextprotocol/server-postgres"],
"env": {
"POSTGRES_CONNECTION_STRING": "postgresql://..."
}
}
}
}
Slack連携
{
"mcp.servers": {
"slack": {
"command": "npx",
"args": ["@modelcontextprotocol/server-slack"],
"env": {
"SLACK_BOT_TOKEN": "xoxb-..."
}
}
}
}
セキュリティと承認制
Agent Modeは強力な機能ですが、安全性も重視されています:
承認制システム
- 事前確認:ツール実行前にユーザーに確認
- 選択的実行:不要な操作はスキップ可能
- 段階的承認:各ステップごとに確認
権限管理
- 最小権限の原則:必要最小限の権限のみ使用
- 実行ログ:すべての操作が記録される
- ロールバック:問題があれば変更を巻き戻し可能
効果的な使い方とコツ
大規模タスクに最適化
Agent Modeは、以下のような大規模なタスクで真価を発揮します:
フレームワークの移行
ReactからNext.jsに移行したい。
- ルーティングをNext.js式に変更
- SSRに対応した形でコンポーネントを修正
- パフォーマンスを維持しながら段階的に移行
- 既存のテストも更新
アーキテクチャの改善
モノリスをマイクロサービスに分割したい。
- 認証サービスを分離
- ユーザー管理サービスを独立
- API Gateway経由でのルーティング
- Docker化と設定ファイル作成
軽いタスクはEditモードを使い分け
小さな修正やシンプルな変更には、通常のEditモードの方が効率的です:
Agent Mode向き:
- 10ファイル以上の修正
- 新機能の追加
- アーキテクチャ変更
Edit Mode向き:
- 単一ファイルの修正
- バグ修正
- コメント追加
クォータ消費への注意
Agent Modeは高度な機能ですが、GitHub Copilotのクォータを多く消費します:
節約のコツ
- 明確な指示:曖昧な指示は無駄な試行を増やす
- 段階的実行:大きなタスクは小分けにする
- 事前計画:何をしたいか明確にしてから指示
使用量の監視
- GitHub Copilotの使用状況を定期的に確認
- チーム全体での使用ガイドラインを設定
トラブルシューティング
よくある問題と解決法
Agent Modeが有効にならない
症状: 設定を有効にしてもAgent Modeが表示されない 解決法:
- VS Codeを最新版にアップデート
- GitHub Copilot拡張機能を再インストール
- VS Codeを再起動
- GitHub Copilotのサブスクリプションを確認
AIの提案が期待と違う
症状: 想定していない変更を提案される 解決法:
- より具体的で明確な指示を出す
- 段階的に小さなタスクに分割
- 既存のコード構造を事前に説明
- 期待する技術スタックを明示
実行が途中で停止する
症状: 作業が途中で止まってしまう 解決法:
- ネットワーク接続を確認
- GitHub Copilotの認証状態をチェック
- VS Codeのメモリ使用量を確認
- 大きなタスクをより小さく分割
パフォーマンスの最適化
効率的な指示の出し方
良い例:
TypeScriptでTodoアプリを作成。
- React + TypeScript使用
- 状態管理はuseStateで
- ローカルストレージに保存
- CSSはTailwind使用
- 追加・削除・完了機能
- テストはJest + React Testing Library
改善が必要な例:
Todoアプリを作って
実践的な活用例
開発フローでの活用
朝の作業開始時
昨日のコードレビューで指摘された箇所を修正して、
- ESLintエラーの解消
- テストカバレッジの向上
- TypeScriptの型安全性強化
- ドキュメントの更新
新機能開発時
ユーザー認証機能を追加。
- JWT トークンベース
- ログイン・ログアウト・サインアップ
- パスワードリセット機能
- セキュリティ要件準拠
- E2Eテスト含む
リリース前チェック
本番リリース前の最終チェック。
- セキュリティ脆弱性スキャン
- パフォーマンステスト実行
- デッドコード除去
- ドキュメント更新
- 設定ファイル最適化
まとめ
VS Code Agent Modeは、AIがファイル編集からコマンド実行、修正まで自動化してくれる革新的な機能です。
主要なポイント
有効化方法:
chat.agent.enabled
をオンに設定- ChatビューでAgentモードを選択
得意分野:
- 複雑な機能追加やリファクタリング
- 複数ファイルにまたがる修正
- テストやlintも含めた自動修正
使い分けのコツ:
- 大規模タスクはAgent Mode
- 軽い修正は通常のEdit Mode
- 明確で具体的な指示を心がける
コメント