クイックスタート: エージェント支援 AI を使用してAzure アプリケーションを開発する

このクイックスタートでは、GitHub Copilotを使用して React to-do アプリケーションをビルドし、AI 支援開発を使用してAzure App Serviceにデプロイします。ローカルで開発する場合は、Copilotプランモードから開始して詳細な実装計画を作成し、エージェントモードに切り替えてビルドとデプロイを行います。 Web 用の VS Code を使用する場合は、全体でエージェントモードを使用します。最終的には、次の操作に関する実践的な経験が得られます。

GitHub Copilot Plan モードを使用してプロジェクトを調査し、実装計画を作成する (ローカル開発)
アプリケーション全体のひな形を作成し、構成設定してデプロイする GitHub Copilot エージェントモード
Azure Skills Azure固有の知識とツールを使用してCopilotを強化する
Azure App Service 上で動作する To Do アプリ
ToDo アプリの API エンドポイント
Azure Developer CLI (azd) を使用してインフラストラクチャテンプレートからAzureリソースをプロビジョニングおよびデプロイする

プランモードを使用すると、コードベースCopilot調査し、コードを記述する前に構造化された実装計画を作成し、要件が明確で、アプローチが適切であることを確認できます。エージェントモードでは、Copilotが自律的にコマンドを実行したり、ファイルを編集したり、エラーを反復処理したりできます。目標を指定し、Copilotが手順を決定します。

Prerequisites

アクティブなサブスクリプションを持つ Azure アカウント。無料で作成できます。
GitHub Copilot サブスクリプション。

VS Code for the Web
ローカル開発環境

ローカルインストールは必要ありません。 VS Code for the Web (vscode.dev/azure) では、Azure Developer CLI、Node.js、およびいくつかのAzure拡張機能がプレインストールされたブラウザーベースの VS Code 環境が提供されます。

完全な開発エクスペリエンスを得るには、次のツールをローカルにインストールします。

次のコマンドを使用して、ツールのインストールを確認できます。

# Visual Studio Code
code --version

# GitHub Copilot
code --list-extensions | grep -i github.copilot

# Node.js
node --version

# Azure Developer CLI
azd version

# Azure Skills
code --list-extensions | grep -i ms-azuretools.vscode-azure-mcp-server

ブラウザーで vscode.dev/azure を開きます。
メッセージが表示されたら、Azure アカウントを使用してサインインします。
ターミナル ウィンドウで、プロジェクトの新しいディレクトリを作成し、それに変更します。
```
mkdir todo-app && cd todo-app
```

ターミナル ウィンドウで、プロジェクトの新しいディレクトリを作成し、それに変更します。
```
mkdir todo-app && cd todo-app
```
VS Code でディレクトリを開きます。
```
code .
```
このコマンドにより、現在のディレクトリがワークスペースとして含まれる新しい VS Code ウィンドウが開きます。 VS Code からフォルダーを手動で開くには、メニューから [ファイル>フォルダーを開く ] を選択します。

Azure スキルを有効にする

Azure Skills は、Azureサービス、インフラストラクチャ、デプロイに関する情報に基づいた意思決定をエージェントが行えるように、キュレーションされたAzureの専門知識、ワークフロー、ガードレールをCopilotに提供します。 Azure MCP 拡張機能は、VS Code にAzureスキルをもたらすコンパニオン拡張機能をインストールします。これらにより、Azure MCP Server、Foundry MCP、およびスキルレイヤー全体が自動的に構成されます。詳細については、Azure Skills Plugin リポジトリを参照してください。

VS Code for the Web
ローカル開発環境

コマンドパレットを開きます。
[MCP: サーバーの一覧表示] を選択します。
Azure MCP サーバーが実行されていない場合は、Azure MCP>Start server を選択して起動します。

アプリケーションを計画する

Planモードでは、コードを書き始める前に、Copilot がプロジェクトを調査し、詳細な実装計画を生成します。プランを確認して調整し、実行のためにエージェントモードに渡します。

アクティビティバーのチャットアイコンを選択して、Copilot Chat ビューを開きます。
まだサインインしていない場合は、GitHub Copilotにサインインします。 Visual Studio Codeステータスバーの GitHub Copilot ロゴ Sign-in ボタンを選択し、プロンプトに従ってGitHub アカウントで認証します。
チャットパネルの [エージェント] ドロップダウンから [ プラン ] を選択するか、タスクの説明 /plan 入力します。

次のプロンプトをコピーして、Copilotチャットパネルに貼り付けます。
```
/plan 
Create a Vite + React single-page application (SPA) to-do app
with the following features:
- Add, remove, and mark complete/incomplete to-do items.
- Use localStorage to persist to-do items between sessions.
- Choose low-cost Azure resources.
- Create a deployment template for Azure Developer CLI (azd).
- Create a README file with instructions on how to test, run, and deploy the app.
```
Note

GitHub Copilotをまだ設定していない場合は、プロンプトを送信する前に、GitHub アカウントにサインインし、Copilotを設定するように求められます。 Copilot サブスクリプションをお持ちでない場合、毎月の補完回数とチャットのやり取りに上限がある無料アカウントとして扱われます。
タスクの調査後に Plan エージェントが尋ねる明確な質問に回答します。例: React アプリの TypeScript または JavaScript どのようなスタイル設定方法を使用する必要がありますか? azd テンプレートには、GitHub Actions CI/CD ワークフローを含める必要がありますか?
生成されたプランを確認します。プランは次のようになります。
```
Plan: Vite + React To-Do SPA with Azure Deployment
A Vite + React + TypeScript SPA scaffolded inside todo-app, with localStorage persistence,
and deployed to Azure Static Web Apps (Free tier) via azd. 
No backend required — all state is client-side.
... 
```
Plan エージェントは、概要、実装手順、および検証手順を生成します。フォローアッププロンプトを送信して、要件を満たすまでプランを反復処理できます。

エージェントモード

エージェントモードでは、GitHub Copilotターミナルコマンドの実行、ファイルの作成と編集、問題が発生した場合の自己修正を行うことができます。大まかな目標を指定し、エージェントが実行する手順を決定します。

チャットパネルで 、Claude Sonnet 4.6 モデル、 エージェント モード、 Autopilot (プレビュー) を選択します。
- 既定の Auto モデルではCopilot各ステップに最適なモデルを動的に選択できます。このクイックスタートでは、Claude Sonnet 4.6 のような特定のモデルを使用して動作の決定性を高めることで、Copilot が計画を実装する際に取る手順をより予測しやすくします。
- エージェントモードとオートパイロットを使用すると、Copilotはターミナルコマンドを実行し、ファイルの変更を自律的に行うことができます。 Autopilot モードを使用すると、Copilotからさらに入力を必要とせずに、自己修正と反復処理を実行できます。より詳細な制御が必要な場合は、既定の承認モードを選択して、各ステップを実行する前に承認します。
チャットパネルで、[実装の開始 ] または [ Autopilot で開始 ] を選択して、プランをエージェントモードに渡して実行します。 Autopilot モードを使用すると、Copilotから追加の入力を必要とせずに反復処理できます。より詳細な制御が必要な場合は、既定の承認モードを選択して、各ステップを実行する前に承認します。

Copilot実装が完了すると、次のような出力がチャットパネルに表示されます。

All done. Here's a summary of what was built:

App (src/)

src/types.ts — Todo interface
src/hooks/useTodos.ts — addTodo, removeTodo, toggleTodo with localStorage persistence
src/components/TodoForm.tsx, TodoItem.tsx, TodoList.tsx — UI components
src/App.tsx — wired together with task remaining counter
src/App.css / src/index.css — vanilla CSS, light/dark mode
Azure / azd

azure.yaml — host: staticwebapp, dist: dist
infra/main.bicep — subscription-scoped resource group + Static Web App (Free tier)
infra/staticwebapp.bicep, main.parameters.json, abbreviations.json
Docs — README.md with local dev, build, azd up deploy, and azd down teardown instructions.

Build passes with no errors (tsc + Vite). Run npm run dev to start locally, 
or azd up to provision and deploy to Azure.

これで、アプリは指定された機能でスキャフォールディングされ、Azure インフラストラクチャテンプレートをデプロイする準備が整いました。 README ファイルには、アプリをテストしてデプロイする方法に関する手順が含まれています。 Azureにデプロイする前に、アプリをローカルでテストして、期待どおりに動作することを確認します。

アプリをテストする

計画モードで質問に回答した方法によっては、アプリをローカルでテストする方法が実装によって異なる場合があります。ローカルでテストするための README ファイルを確認します。

VS Code for the Web
ローカル開発環境

アプリケーションが計画手順で生成された Vite + React SPA であると仮定して、次のコマンドを使用して開発サーバーを起動します。

npm install && npm run dev

このコマンドは、Vite 開発サーバーを起動します。ターミナル出力には、アプリが実行されている localhost URL が含まれています。

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

ポート タブで、Forwarded Address のポート URL をブラウザーで開くと、ブラウザーで To-Do アプリを表示できます。

タスクを追加、切り替え、削除して機能をテストし、すべてが期待どおりに動作することを確認します。

1 つの完了したタスクと新しいタスクを追加するための入力フィールドが残っている 3 つのタスクのうち 2 つを示す To-Do アプリのスクリーンショット。

アプリケーションが計画手順で生成された Vite + React SPA であると仮定して、次のコマンドを使用して開発サーバーを起動します。

npm install && npm run dev

このコマンドは、Vite 開発サーバーを起動します。ターミナル出力には、アプリが実行されている localhost URL が含まれています。

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

タスクを追加、切り替え、削除して機能をテストし、すべてが期待どおりに動作することを確認します。

テストが完了したら、ターミナルで Ctrl + C を押して開発サーバーを停止します。

Azure サービスについて質問する

作業用アプリが作成されたので、永続的なデータに対してアプリとストレージをホストする場合に適したAzure サービスについてエージェントに問い合わせる必要があります。

次のプロンプトをコピーして貼り付けます。

I want to change the storage persistence. What are my no-cost or low-cost storage options for this app in Azure?

エージェントは、Azure Skills を使用してアプリのアーキテクチャ、データストレージのニーズ、API パターンを分析し、to-do データをホストするための適切なAzure サービスを推奨します。エージェントは、コスト、スケーラビリティ、統合の容易さ、アプリのワークロードの適合性などの要因を考慮します。エージェントは、次の例のように推奨事項を説明します。

For this to-do app, these are the best no-cost or low-cost Azure persistence options, ordered from cheapest/simple to stronger capability.

1. Azure Cosmos DB for NoSQL with free tier
- Cost profile: can be zero if you stay within free-tier limits.
- Best for: JSON to-do items, easy API fit, good scaling path.
- Pros: schema-flexible, globally available, SDK support, free tier available.
- Cons: RU-based model can become costly if queries are inefficient.
- Good default choice if you want cloud-native persistence with minimal redesign.

2. Azure Table Storage
- Cost profile: typically very low (often cents to a few dollars at small scale).
- Best for: simple key-based to-do storage.
- Pros: cheapest at low volume, straightforward, durable.
- Cons: limited query features versus Cosmos DB/SQL.
- Great choice if your app only needs basic CRUD by id/user partition.
...

Azure にデプロイ

アプリをローカルでテストし、期待どおりに動作することを確認したら、クラウドで実行されているのを確認できるように、アプリを Azure にデプロイします。

azd を使用してデプロイするため、まだサインインしていない場合は、ターミナルでAzureにサインインします。走れ
```
azd auth login
```
アプリケーションをAzureにデプロイします。
```
azd up
```
メッセージが表示されたら、デプロイの一意の環境名を選択します。この名前は、Azureでリソースグループを作成するために使用され、グローバルに一意である必要があります。

メッセージが表示されたら、デプロイするAzure サブスクリプションを選択します。

azd up コマンドは、infra/ フォルダーに定義されているAzure リソースをプロビジョニングし、アプリケーションをビルドして、Azureにデプロイします。ターミナル出力には、デプロイされたアプリの URL が含まれます。

Troubleshooting

デプロイが失敗した場合、またはライブサイトがビルドされた実稼働ファイルを処理しない場合は、次のプロンプトを使用して、エージェントに展開を自動的に診断して修正させます。

Deploy the app using `azd up`. If deployment is misconfigured, diagnose and fix automatically until the live site serves built production files, not source or default pages.
Final verification must confirm HTML references production assets and that the main JS/CSS asset URLs return HTTP 200.
Update the README. Return a concise summary and the app website URL.

開発中は、GitHub Copilotを使用して問題のデバッグに役立てることができます。エラーが発生した場合は、チャットウィンドウにエラー出力をコピーして貼り付け、エージェントに問題の理解と修正を依頼します。

デプロイされたリソースを調べる

ターミナル出力または GitHub Copilot チャットに表示されたデプロイ済みアプリの URL を使って、ブラウザーでアクセスします。アプリに移動し、クラウドで想定どおりに動作していることをテストします。タスクを追加、切り替え、削除して、すべてが機能することを確認します。

Azure Static Web Apps にデプロイされた To-Do Web アプリのスクリーンショット。2 つの完了済みタスクと 1 つの未完了タスクが表示されています。

AZURE リソースは VS Code で直接調べることができます。

アクティビティバーのAzure アイコンを選択して、Azure ビューを開きます。
[リソース] ノードで、[ グループ化 ] アイコンを選択し、[ リソースグループ別にグループ 化] を選択して、リソースグループ別にリソースを整理します。
[ リソース] を展開し、 azd upによって作成されたデプロイのリソースグループを見つけます。
リソースグループを展開して、デプロイされたサービス (Web アプリをホストする App Service や、 azd upによって作成されたその他のリソースなど) を表示します。
Web アプリを右クリックし、Browse Website を選択してデプロイされた to-do アプリを開くか、ポータル を選択してAzure portalとデプロイ URL にリソースを表示します。

リソースをクリーンアップする

調査が完了したら、料金が発生しないように Azure リソースを削除します。

azd down

このコマンドは、デプロイ時に作成されたすべてのAzureリソース (リソースグループを含む) を削除します。

次のステップ

GitHub Copilot の Plan モードと Agent モードを使用して、コードを手動で記述することなく、React の To-Do アプリを計画し、ひな形を作成し、Azure にデプロイしました。学習した内容を引き続き構築します。

GitHub Copilot for Azure のドキュメント - AI 支援型 Azure 開発の詳細を確認します。
VS Code for the Web for Azure development - ブラウザーベースの開発環境の詳細を確認します。
Azure Skills Plugin - Copilotを使用してAzure開発を強化するためにAzureスキルをインストールします。
Azure Developer CLI テンプレート - さまざまな言語とアーキテクチャのテンプレートを検索します。

フィードバック

このページはお役に立ちましたか?

Last updated on 2026-05-20