サイトアイコン アマチュア無線局JS2IIU

VSCodeの新機能「Agents Window」超入門

こんにちは、JS2IIUです。
VSCodeでAIを使うとき、いつも通り自分でコードを書きながらAIにサポートしてもらう「コードファースト」の使い方が一般的でした。しかし今回、VSCodeのバージョン1.120.0で登場した「Agents Window」は、AIに要件を伝えて実装から検証までを任せる「エージェントファースト」に特化した新しい専用画面です。この記事では、初心者向けにAgents Windowとはそもそも何か、従来のAIチャット(VSCode上でのGitHub Copilot Chatなど)との決定的な違い、そして画面の開き方からチャットを使ったタスクの進め方までをわかりやすく解説します。今回もよろしくお願いします。

AIコーディングの新境地「Agents Window」とは

AIを活用したコーディングは、今やエンジニアにとって欠かせない日常の風景となりました。VSCodeの画面の端にAIチャットを開き、コードを書きながら関数の実装を提案してもらったり、不可解なエラーの原因を尋ねたりするアプローチは、私たちの生産性を飛躍的に向上させてくれました。

しかし、開発を進める中でふと「要件だけ伝えて、どのファイルを修正すべきかの調査から、実際の実装、そしてテストまで丸ごとAIに任せられたらどんなに楽だろう」と感じたことはないでしょうか。

今回VSCode 1.120でStable版として登場した「Agents Window」は、まさにその願いを叶えるための新しい専用画面です。本記事では、Agents Windowの概念から、従来のAIチャットとの決定的な違い、そして実際の画面の開き方やチャットを使ったタスクの進め方まで、具体的な例を交えながらわかりやすく解説します。この新しいツールを理解し、あなた自身の開発プロセスを次の次元へと引き上げるための第一歩を踏み出しましょう。

「コードファースト」から「エージェントファースト」へのパラダイムシフト

Agents Windowを使いこなす上で最も重要なのが、「コードファースト」と「エージェントファースト(タスクファースト)」という2つの異なるアプローチの違いを理解することです。

従来のAI支援は「コードファースト」と呼ばれます。これは文字通り「人間がコードを書くこと」が主役のスタイルです。例えば、あなたが車の運転手(ドライバー)で、AIが助手席に座る優秀なナビゲーターだと想像してください。ハンドルを握り、アクセルを踏むのはあくまであなた自身です。エディタ上でコードを書き進める中で、AIが「次は右折したほうがいいですよ(コードの補完)」と提案してきたり、道に迷ったときに「この道は行き止まりです(エラーの解決)」と教えてくれたりします。主導権は常にコードを書く人間にあり、AIは部分的なサポートに徹します。

一方、新しく提唱されている「エージェントファースト」は、あなたとAIの役割を根本から変えます。こちらは、あなたが「現場監督」となり、AIが「優秀な実務担当者(エージェント)」になるイメージです。あなたはチャットを通じて「ログイン画面にパスワードリセット機能を追加し、テストも通るようにして」といった高レベルの要件(タスク)を伝えます。するとエージェントは、どのファイルを変更すべきかを自分で計画し、実際にコードを書き換え、さらにはコマンドを実行して正しく動くかどうかの検証までを自律的に行います。あなたの主な仕事は、エディタで一行ずつコードを書くことから、要件を定義し、エージェントが提示した解決策をレビューすることへとシフトするのです。

ここで読者の皆さんが疑問に思うのは「じゃあ、今までのVSCodeは使わなくなるの?」ということかもしれません。安心してください。Agents WindowはメインのVSCodeエディタを置き換えるものではなく、強力に補完し合う関係にあります。
メインウィンドウは従来通りのフル機能を持った細かなコーディングやデバッグ用として使い、Agents Windowはプロジェクトを横断してAIにタスクを指示・管理する「指揮所」として使い分けます。設定ファイルやキーバインド、AIとのセッション履歴はすべて両方のウィンドウで共有されるため、状況に合わせてシームレスにワークフローを行き来することが可能です

Agents Windowの開き方と基本的なワークフロー

それでは、実際にAgents Windowを使ってエージェントに仕事を任せる手順を見ていきましょう。VSCodeを最新にしてから始めましょう。

まずはAgents Windowの開き方です。3種類あります。好きな方法でどうぞ。

起動すると、普段のエディタとは少し異なる、タスク管理とチャットを中心に据えた専用のウィンドウが立ち上がります。

Agents Windowの画面は、非常に機能的で、主に4つの領域に分かれています。

  1. セッションリスト(左側サイドバー): AIに依頼したタスク(セッション)の履歴がプロジェクトごとに一覧表示されます。複数のプロジェクトのタスクを一つの画面で並行して俯瞰できるのが大きな特徴です。
  2. カスタマイズパネル(左側下部): エージェントの振る舞いをカスタマイズするための領域です。外部サービスと連携させるためのMCP(Model Context Protocol)サーバーの設定や、特定の指示書(Skills)をここで管理します。
  3. チャットエリア(中央): エージェントに指示を出し、対話を行うメインステージです。
  4. 変更パネル(右側): エージェントが行ったファイルの追加や変更の差分(Diff)、そしてワークスペース全体のファイルエクスプローラを確認する場所です。

こちらがカスタマイズパネルをクリックして大きく表示したところです。エージェント、スキル、指示、フック、MCPサーバ、プラグインを簡単にカスタマイズしていくことが可能です。

さっそくタスクを依頼してみましょう。左側の「New」ボタンを押し、対象となるローカルのフォルダやGitHubリポジトリを選択します。続いて、タスクを担当するAIエージェント(Copilot CLIやCopilot Cloud、Claudeなど)を選びます。

ここで、「AIにタスクを丸投げすると、勝手に既存のコードを壊されてしまわないか」と不安に思うかもしれません。Agents Windowはその不安を解消するために、「Worktree isolation(ワークツリーの分離)」という非常に強力な機能を備えています。
この機能を有効にすると、エージェントはGitのワークツリー機能を利用して、メインの作業ディレクトリとは物理的に隔離された別の隠しフォルダ(いわば専用の実験室)で作業を開始します。エージェントがどれだけ大胆にコードを書き換えても、あなたが現在作業しているメインのブランチには一切影響を与えません。エージェントの作業結果を確認し、すべて問題ないと納得した段階で初めて「Merge(マージ)」ボタンを押し、メインのコードベースに反映させることができるのです。これにより、リスクゼロでエージェントに仕事を任せることができます。

実装から検証までを完結させる実践テクニック

エージェントが作業を終えると、右側の「変更パネル」に変更されたファイルのリストが表示されます。ここからが現場監督であるあなたの出番です。

差分レビューと直感的なフィードバックループ

変更されたファイルをクリックすると、変更前と変更後の差分(Diff)が表示されます。もしレビューをしていて「この変数の名前はもう少し分かりやすくしてほしい」「このエラーハンドリングが漏れている」と気づいた場合、わざわざ自分でコードを書き直す必要はありません。差分画面の該当箇所をクリックし、「Add Feedback(フィードバックを追加)」を選択してコメントを残すだけです。その指摘を元に、エージェントが再度修正を行ってくれます。この直感的なレビューサイクルにより、品質の高いコードを素早く仕上げることが可能です。

ウィンドウ内での検証とタスク実行

コードが書けたからといって、そのまま信用するわけにはいきません。本当に動くのかテストをする必要があります。Agents Windowでは、ウィンドウを離れることなくローカルでタスクを実行し、検証を行うことができます。
上部のタスクメニューから「Add Task」を選び、「npm run build」や「pytest」といったコマンドを登録しておけば、エージェントの作業コンテキスト内でテストやビルドを実行できます。さらに、ウェブアプリケーションの開発であれば、チャット上に表示されたローカルホスト(localhost)のリンクをクリックするだけで、Agents Window内に統合ブラウザが開きます。エディタの画面と外部ブラウザを行き来する手間が省け、画面の表示崩れや動作確認を圧倒的にスムーズに行うことができます。

リモート環境への接続

実務においては、強力なサーバー環境や特殊なコンテナ環境で開発を行っているケースも多いでしょう。Agents Windowは、SSH接続やDev Tunnelを利用したリモート接続にもネイティブに対応しています。新規セッション作成時に「Remote」タブを選択し、接続先を指定するだけで、リモート環境上にあるソースコードに対してエージェントに作業を依頼できます。これにより、外出先の非力なノートパソコンからでも、オフィスの強力なマシンのリソースを使ってAIに重いタスクを実行させるといった柔軟な働き方が可能になります。

複数タスクの同時進行を可能にする「サブセッション」機能

開発を進めていると、「エージェントに機能Aを作ってもらっている間に、別のバグ修正Bもお願いしたい」という状況が発生します。そんな時に役立つのが「サブセッション」機能です。
実行中のセッションのタイトルバーから「New Sub-Session」を選択すると、同じプロジェクトのコードベースを共有したまま、全く新しい真っ白なチャット画面がタブとして追加されます。これにより、一つのウィンドウ内で独立した複数のタスクを並行してエージェントに指示し、同時進行でプロジェクトを前に進めることができます。

AIと共に働く新しいスタイルの確立

VSCodeの新しい「Agents Window」は、単なるチャット機能の追加ではありません。開発者がコードを一行ずつ記述する「作業者」から、AIという優秀なチームメンバーを指揮する「現場監督」へと進化するための、全く新しいプラットフォームです。

コードファーストのメインエディタと、エージェントファーストのAgents Window。この2つを状況に応じて使い分けることで、あなたの開発のボトルネックは大きく解消されるはずです。複雑でドメイン知識が必要なコアロジックの構築はこれまで通りメインエディタで自ら行い、定型的な機能追加や全体のリファクタリング、テストコードの作成などはAgents WindowでAIに一任する。そんな未来のワークフローが、すでに現実のものとなっています。

まずは「READMEの更新」や「単純なユーティリティ関数の作成」といった小さなタスクから、Agents Windowのエージェントに任せてみてください。「指示を出し、結果をレビューし、承認する」という新しい開発サイクルに慣れることで、あなたの開発スピードと品質は間違いなく次の次元へと引き上げられることでしょう。

最後まで読んでいただきありがとうございます。

モバイルバージョンを終了