画像をモックアップとして活用
Webページのデザインなどは、Figmaなどを使ってデジタルで統合する動きがあるとはいえ、画像で提供を受けることが依然として多いようです。この場合には、画像からマークアップとスタイルを書き起こしていく作業になりますが、これをCopilotに任せてしまいましょう。
図4のモックアップから、マークアップやスタイルを作成してもらうことを想定します。
前項と同様に、モックアップ画像をドラッグ＆ドロップでコンテキストに設定します。質問として、「画像のフォームのマークアップとスタイルを生成して。」と投げてみました（図5）。
図6のように、HTMLとCSSに分けて回答を得られました。これを利用するには、それぞれファイルを作成し、コピー＆ペーストで内容を移す必要があります。
若干面倒ではありますが、HTMLファイルとCSSファイルを作成し、内容を移します。HTMLについてはフォームのみなので、Emmetから自動生成されるHTMLにCSS読み込みのためのlink要素を追記し、表示させたのが図7です。
調整の余地は十分にありますが、ベースとできる部分を作ってくれているので、だいぶ省力化されていると言えます。ファイルを手作業で作成したり、コピー＆ペーストで内容を移すなど、この手の面倒な作業を避けたければ、次節で紹介するAgentモードを活用しましょう。
Agentモード
VS Code 1.99でAgentモードがサポートされ、チャットビューの既定のモードとなりました。Agentモードとは、Agent（代理人）の名の通り、VS CodeがAIの利用を代行し、従来のEditモードを越えるさまざまな編集機能が利用できるモードです。
- コードベースに編集を加える
- ツールを呼び出してタスクを実行する
- 編集やツールの結果をモニタリングする
- 発生した問題を解決するために反復作業を行う
これらが自律的に動作するということが最大の特徴です。Agentモードでは、表1のモデルが利用できます。
| 標準モデル | GPT-4.1、GPT-4o |
| プレミアムモデル | Claude Sonnet 3.5／3.7／4、Gemini 2.5 Pro、o4-mini |
本記事では、プレミアムリクエストを消費しないGPT-4oを使っていきます。
Agentモードの有効化と切り替え
Agentモードは既定で有効になっており、既述の通りチャットビューの標準のモードです。
他のモードからは、チャットビュー下部のパネルのドロップダウンから「Agent」を選択するか、［Command］＋［Shift］＋［I」／［Ctrl］＋［Shift］＋［I］キーでエージェントモードに切り替えられます。［設定］－「Chat Agent」は既定でEnabled（有効）となっているので、もしAgentモードが不要という場合にはFalseに設定してください。
ツールの構成
エージェントが使うツールの構成はカスタマイズできます。チャットビュー下部のパネルの「工具」アイコンをクリックすると、コマンドパレットにツールの一覧が表示されます。
既定では、全てのツールにチェックが入っており、全て使えることになっています。必要に応じてチェックを外すことで、「このツールは使わない」といった構成も可能です。
ツールは、ビルトインされている「組み込み」と、拡張機能によって提供されるもの（例えば「Python」）という具合にカテゴリ分けされているので、これらをまとめて有効／無効を切り替えられます。
アプリ開発の実践例
Agentモードでのアプリ開発の例として、簡単なReactアプリを作ってみます。Editモードのような具体的な指示を出さずとも、かなり漠然とした指示でアプリが開発できることを確認します。
手順は、質問のタイミングやモデルによって変化するので、あくまでも構築例としてざっと流れを追ってみます。
シンプルな足あと帳アプリをReactで作成します。訪問者の名前のための入力フィールドを配置し、日時も記録できるようにしてください。最初に、計画を提示してください。
まず、計画が提示されます（図9）。最初のステップとして、計画に問題がないか大まかに確認しましょう。確認後、「OKです」と入力して実際に進めていきましょう。
［NOTE］環境は準備しておく
Agentモードでは、基本的にVS Codeの環境を越えての作業まではしてくれません。例えば、作業場所（フォルダー）の準備やNode.jsといったツールのインストールです。作業を開始するに当たり、適当なフォルダーを開いておき、計画を見ながらアプリに必要なツール（ここではNode.js）のインストールなどを済ませておきましょう。
セットアップを開始すると、実行する予定のコマンドが提示されることがあります（図10）。問題なければ［続行］を、取りやめたければ［キャンセル］をクリックします。
このように、作業をどんどん進めていってしまうのではなく、都度確認しながら進められるのがAgentモードの良いところです。
コマンドの実行に際しては、ターミナルが自動的に開き、コマンドが実行されていることを確認できます（図11）。続けてコマンドが実行されるようなので、［続行］をクリックして先に進めます。
開発サーバーを起動できるところまで来たので、起動してもらいました（図12）。
指示されたURLにアクセスしてVite＋Reactのデモページが表示されたら成功です（図13）。
ここまでで、計画1.が済んだので、同様の要領で計画2.以降に進んでいきます。このときも、「次のステップに進んで。」などのおおまかな指示で済みます。
基本構造の作成など、既存のファイルへの変更が加わる場合には、それがエディタービューに表示されるので、問題なさそうなら［保持］をクリックします（編集モードと同様に、ボタンは複数箇所に現れますが機能は同じです）。コマンド同様に、実際の変更前に確認のステップが入るので安心です。
サーバーの再起動を指示したり、さらに次のステップに進んでコンポーネントやスタイルを作成したりしてもらうと、アプリができあがります（図14）。
いくつか入力してみたところですが、足あと帳として機能していることが分かりますね（図15）。
ここまでで、計画の6.までが終了しました。この間、指示を投げてボタンを少しクリックしただけです。複雑なアプリになるとこれだけでは済まないと思いますが、Agentモードの流れを理解いただけたのではないでしょうか。
アプリの改善
下地となるアプリができたら、機能面やデザイン面での改善を指示できます。
この指示も漠然としたものでOKです。足あとの削除機能や、見た目をもっとカラフルにする指示を以下のように出してみました。
足あとの削除機能を付けて。あと、見た目をカラフルにして。
これまで通り、コードの変更を保持して受け入れれば（図16）、変更内容を反映したアプリがすでに起動しています（図17）。
ターミナルコマンドの自動承認（実験段階）
VS Code 1.102においては、ターミナルコマンドの自動承認機能が、実験段階ではあるものの利用可能になりました。
上記の実践例では、コマンド実行の承認をその都度求めていましたが、許可リストにあるコマンドは自動的に承認されて実行されます。あらかじめ問題のないことが分かっているコマンドを承認リストに入れておくと、都度確認する手間を省くことができます。
設定は、github.copilot.chat.agent.terminal.allowListかgithub.copilot.chat.agent.terminal.denyListから［項目を追加］をクリックして、キー（コマンドのパターン）と値（true/false）の組み合わせで行います（図18）。コマンドの表現は正規表現でも指定でき、trueで有効、falseで無効となります。
MCPサーバとの連携
VS Code 1.101で、MCP（Model Context Protocol）が完全にサポートされました。これにより、AgentモードにおいてMCPサーバの利用が可能になっています。特に、以下で公開されているMCPサーバは、拡張機能として簡単にVS Codeに導入することができます。
MCPとは、生成AIが外部システムと連携する際に使用する規格です。AIモデルであるClaude Sonnetの開発元であるAnthropic社が2024年11月に公開したばかりの新しい規格で、生成AIがさまざまなデータソースやツールと接続するための標準的な方法を提供します。
MCPによるサーバ機能が提供されているサービスがある場合、生成AI側（ホスト）では標準化されたMCPクライアントを用意するだけで利用できるので、外部サービスをAIから利用する際の大幅な開発効率の向上が期待できます。
MCPサーバの例として、github-mcp-serverがあります。これは、生成AIによるGitHubの操作を可能にするサーバで、例えばリポジトリの作成やコミットとプッシュを自動化したり、プルリクエストに応じてプルしたりといった作業を、MCPクライアントを用意するだけで利用できます。
上記ページから［Install GitHub］をクリックしてVS Codeにインストールし、GitHubアカウントなどの承認を実行すると、Agentモードにおけるツールの設定に「MCP サーバー: github」以下が現れて、モデルがこのツールを使えるようになったことが分かります（図20）。
このMCPサーバを利用するには、いくつかの設定が必要です。
- Dockerをインストールしてdockerコマンドを利用可能にしておく
- GitHubの個人アクセストークンを［Settings］－［Developer setting］－［Personal access tokens (classic)］から取得しておく。最低限の権限として「Repo」と「Project」にフルコントロールを与えておく
- 以下の内容をワークスペースの.vscode/settings.jsonファイルに記述しておく。
{
"mcp": {
"inputs": [
{
"type": "promptString",
"id": "github_token",
"description": "GitHubパーソナルアクセストークン",
"password": true
}
],
"servers": {
"github": {
"command": "docker",
"args": [
"run",
"-i",
"--rm",
"-e",
"GITHUB_PERSONAL_ACCESS_TOKEN",
"ghcr.io/github/github-mcp-server"
],
"env": {
"GITHUB_PERSONAL_ACCESS_TOKEN": "${input:github_token}"
}
}
}
}
}
あとは、プロンプトに「プロジェクトをGItHubの新規リポジトリにプッシュしてください。」などと入れて、作業してもらうだけです。途中のメッセージを確認すると、「github (MCP サーバー)」と表示されて機能がきちんと使われていることが分かります（図21）。
コンフリクトなどが発生しても自力で、ときには指示を仰ぎながら解決し、最終的に目的を果たすことができました（図22）。
