SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

Copilot Agents Windowでエージェントファーストに進化したVS Codeを試そう

開発用エディタのド定番「VSCode」を使いこなそう 第17回

Agents Windowの基本的なワークフロー

 ここから、実際にプロジェクトを扱いながら、Agents Windowにおける基本的なワークフローを押さえていきます。

 プロジェクトは、エディターウィンドウのAgentモードで作成した既存のアプリを使うことにします。アプリは、よくある「Reactによる足あとアプリ」です(図3)。もちろん、Agents Window内で作成から始めることもできます。

図3:本記事で使うプロジェクト
図3:本記事で使うプロジェクト

セッションの作成

 まず必要なのは、セッションです。セッションとは、エージェントの作業単位のことで、このセッションを作るのがAgents Window利用の第一歩と言えます。

 Agents Windowを初めて開いた段階では、チャットパネルには「最初に、次を選択します」と表示されているので(図4)、表1のいずれかからワークスペースを選択して新しいセッションを開始します。もし、この表示がなければセッションリストの右上にある[新規]をクリックしてください([Command]+[N]/[Ctrl]+[N]でも同様)。このように、セッションにはその作業場所となるワークスペースが必要です。

図4:ワークスペースの選択
図4:ワークスペースの選択
表1:ワークスペースの選択
最初に、次を選択します 場所 エージェント
ローカル ファイルシステムにあるフォルダー Copilot(分離モード○)、Claude(分離モード×)
GitHub GitHubにあるリポジトリ Copilot Cloud
リモート(本稿作成時では実験段階) 別コンピュータにあるワークスペースにトンネル/SSHなどで接続

 このように、ワークスペースに応じて利用できるエージェントも異なってきます。ここでは、「ローカル」でエージェントに「Copilot」を使い、既存プロジェクトを利用することを想定して作業を進めます。

 なおプロジェクトは、後述する分離モードを利用するために、有効なGitリポジトリとして構成されている必要があります。

[NOTE]「GitHub」と「リモート」

 「GitHub」「リモート」については解説を割愛しますが、GitHubを使う場合のエージェントは「Copilot Cloud(クラウド)」一択となっています。これはクラウドで動作するエージェントで、利用にはGitHubリポジトリでCopilot Cloud Agentを有効にしておく必要があります。「リモート」では、本連載の第12回で紹介したトンネル接続やSSH接続で、別コンピュータにあるワークスペースを利用します。

フォルダーの選択

 プロジェクトのあるフォルダーをワークスペースとして選択します。図4の画面で、[ワークスペース]をクリックして、プルダウンから[ローカル]を選択後、[選択...]をクリックします。フォルダー選択のダイアログボックスが表示されるので、ワークスペースとなるフォルダーを選択します(開いたことのあるワークスペースがあれば、それらも候補として表示されるので、そこから選択することもできます)。

 「このフォルダー内のファイルの作成者を信頼しますか?」と聞かれた場合には、問題ないことを確認して[フォルダーを信頼して続行]をクリックしてください。プロンプトが「新しいセッション」と表示が変わり、選択したフィルダーが表示されます。

エージェントの選択

 続けて、「次を含む」からエージェントを選択します。ワークスペースで「ローカル」を選択すると、本稿作成時点では「Copilot」「Claude」「ローカル」からの選択となります(図5)。

 それぞれ、以下の特性があるので、用途に応じて選ぶとよいでしょう。ここでは、分離モードを使いたいので、「Copilot」を選択しています。

  • Copilot:ローカルで動作。ワークスペースでの操作に最適。分離モードを利用できる
  • Claude:ローカルで動作。ワークスペースでの操作に利用可能。より深い思考が求められる場合に有効
  • ローカル:ローカルLLMを指定
図5:エージェントの選択
図5:エージェントの選択

[NOTE]AIモデルの選択

 Agentモードと同様、プロンプト部分にある[Auto]をクリックしてAIモデルを選択できます。「Auto」のままにしておくと、エージェントが適当なモデルを都度選択します。モデルによって消費するクレジット(Copilotにおける課金単位)が異なるので、課金が気になる人は「GPT-5 mini」などの消費クレジットの小さなものに切り替えておくとよいでしょう。本稿では、「Auto」のままにしておきます。

分離モードの選択

 エージェントが「Copilot」の場合、分離モードが利用可能になります。分離モードとはAgents Windowの主要な機能の一つで、エージェントによるコードの変更を確定まで隔離する、既存コードの意図しない破壊を防ぐための仕組みです。プロンプトの右下に、「フォルダー」「ブランチ」と表示されているので(図6)、ここから分離モードを有効にできます。

  • 作業ツリー:Gitのworktree機能を使い、mainブランチとは別の作業用ツリーを作成し、そこで作業する。作業結果はmainブランチにマージすることができる。main以外のブランチも指定可能
  • フォルダー:現在のフォルダーで作業する。修正は、ただちにファイルに反映される

 基本的には、Gitの機能を使う「作業ツリー」を選択した方が安全なので、本記事では「作業ツリー」を選択したものとして進めます。なお、ワークスペースがGitリポジトリとして構成されていないときには、「フォルダー」一択となります。

図6:分離モードの選択
図6:分離モードの選択

セッションの実行例~削除ボタンの追加

 これで準備が整ったので、セッションで作業を開始します。図3を見ると、この足あとアプリには削除機能がないので、これを追加してもらいましょう。

作業内容の指示

 プロンプト(「次のマイルストーンは何ですか?」と表示されている部分。表示内容は都度変化する)に、「削除ボタンを追加。」のように入力しました(図7)。

図7:「削除ボタンを追加。」と入力
図7:「削除ボタンを追加。」と入力

 セッションリスト内にセッションが現れ、指示した内容から自動的にタイトルが生成されます。途中、外部コマンドの実行が必要な場合には、これまでのAgentモードのように確認を求めてきます。都度許可しても構いませんし、自動承認を設定して問題ないようなら、自動承認を設定してください。

図8:プロジェクトの変更結果
図8:プロジェクトの変更結果

 図8の通り、[変更]パネルの[変更点]タブには、セッションで追加/変更された内容が表示されます。ファイルを開いて内容を確認したり、変更を破棄することもできます。変更内容が満足できないものであれば、すべてを破棄してやり直すといったことが可能です。

図9:[変更点]タブ
図9:[変更点]タブ

 なお、[変更のマージ]をクリックすると、変更をコミットして作業ツリーから変更内容をmainブランチにマージできますが、マージは後ほど実行することにして、このまま作業を続行します。

[NOTE]バックグラウンドでの実行

 VS Code 1.124以降では、プロンプト枠の右下にあるアイコンを[Option]/[Alt]キーを押しながらクリックすると、タスクをバックグラウンドで実行できます。複数のセッションを同時に展開できるAgents Windowが生きる機能といえます。バックグラウンドで実行する処理に承認が必要な場合、セッションリストに随時表示されるほか(図10)、プラットフォームの機能を使って通知されます。

図10:セッションリストで承認を求められている状態
図10:セッションリストで承認を求められている状態

タスクの登録と実行

 プロジェクトが改変されたら、実行確認したいところです。アプリはNode.jsで動くWebアプリなので、開発サーバの起動が必要です。これもエージェントに依頼することができますが、定型の処理であればワークスペースにタスクとして登録し、それを実行した方がコスト面で有利です。

 Agents Windowでは、OSのコマンドをタスクとして登録することで、セッションからそれを呼び出して実行できます。例としては、Node.jsの開発サーバ起動のnpm run devコマンド、Pythonコードのテストのためのpytestが挙げられています。これらを登録しておくと、タスクを選択するだけでセッション内で実行できます。

 タスクの登録は、アイコン(タスクおよびブラウザー)をクリックして、プルダウンから[タスクの追加...]を選択します。ダイアログボックスが開くので、タスクの名前(省略可)、実行するOSコマンド、実行オプション(セッションの作成時にこのタスクを自動的に実行するか)、保存先(ワークスペース、ユーザ)を設定します(図11)。

 ここでは、アプリの実行に必要な、カレントディレクトリの移動コマンドと、開発サーバの起動コマンドを設定しました。設定は、プロジェクトのtasks.jsonファイルに保存されます。

図11:タスクの追加
図11:タスクの追加

 タスクの呼び出しは、同じくアイコン(タスクおよびブラウザー)をクリックして、プルダウンから追加したタスク(ここでは「開発サーバの起動」)を選択するだけです(図12)。

図12:タスクの実行
図12:タスクの実行

組み込みブラウザによるアプリの実行

 このケースのようにプロジェクトがWebアプリである場合、開発サーバ起動時に表示されるURLを使って、組み込みブラウザで動作確認できます。図12のURLを[Command]+クリック/[Ctrl]+クリックするか、アイコン(タスクおよびブラウザー)をクリックして、プルダウンから[ブラウザーを開く]を選択します。外部のブラウザではなく、組み込みのブラウザが起動します(図13)。削除ボタンも、しっかり追加されていて、機能します。

図13:組み込みブラウザによるアプリの実行
図13:組み込みブラウザによるアプリの実行

 Agents Window内部でブラウズも完結させることで、たとえば表示されたページの特定の要素をチャットにアタッチすることもでき、よりエージェントの支援を受けやすくなっています。

次のページ
実装の調整

この記事は参考になりましたか?

開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/29001 2026/07/31 08:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー