Web 用 VS Code - Azure

ウェブ版 VS Code は、インストール不要でブラウザベースの Visual Studio Code です。https://insiders.vscode.dev/azure からアクセスできる /azure (短縮形) 環境は、Azure 開発専用のスペースであり、アプリケーションを数秒で Azure に実行、デバッグ、デプロイできます。

Azure Cloud Shell を利用したこの環境では、最大4 時間のコンピューティング時間が提供され、開発環境の手動設定や依存関係のインストールが不要になります。/azure には、すぐにコーディングを開始できるよう、最新のライブラリ、拡張機能、ツールがプリロードされています。

はじめに

/azure 環境には、Azure アプリケーションの開発とデプロイを開始するために必要なものがすべて含まれています。

プリインストールされている拡張機能

Azure Developer CLI - この拡張機能を使用すると、Azure Developer CLI を使って Azure リソースの実行、作成、および Azure アプリケーションのデプロイが容易になります。

サポートされているプログラミング言語

主要なすべてのランタイムがプリインストールされています。

Python - 3.12.9
Java - openjdk 17.0.14 2025-01-21 LTS
- OpenJDK Runtime Environment Microsoft-10800290 (build 17.0.14+7-LTS)
- OpenJDK 64-Bit Server VM Microsoft-10800290 (build 17.0.14+7-LTS, mixed mode, sharing)
Node.js - v20.14.0
C# - 9.0.0

GitHub リポジトリ

GitHub Repository 拡張機能を使用すると、変更を GitHub リポジトリに直接シームレスにコミットできます。GitHub Repositories を使用すると、ローカルマシンにコードをプルすることなく、エディター内からリモートでリポジトリを参照および編集できます。拡張機能の詳細と動作については、GitHub Repositories ガイドを参照してください。

デスクトップ版 VS Code で作業を続ける

Azure Cloud Shell コンテナの時間が終了した後、デスクトップ版 VS Code で作業を続けたい場合があります。ウェブ版 VS Code のステータスバーにある [Continue Working on] ボタンを使用して、コードを GitHub の選択したリポジトリにコミットし、ローカル環境に移行します。

このエクスペリエンスでは、ローカルでの作業継続に2つのオプションがあります。

Docker の使用: 事前設定された開発コンテナを起動します。
ローカルで VS Code を使用: リポジトリをクローンし、README を使用して環境を設定します。

Azure のエントリポイント

/azure 環境は Azure AI Foundry と統合されており、コードを開発者により身近なものにします。[Open in VS Code for the Web] のようなボタンは、[Chat Playground] や [Agent Playground] などの環境内で直接利用できます。詳細については、「サンプルの使用例またはシナリオ」セクションを参照してください。

はじめに

モデルを選択します。
エージェントを構築し、テストします。
[View Code] を選択し、次にプログラミング言語と SDK を選択します。
ウェブ版 VS Code 用の [Open in VS Code] ボタンを使用して、ワンクリックで VS Code を直接起動します。

さらに、開発者は AI App Gallery (https://aka.ms/aiapps) を使用してテンプレートを開始し、[Open in VS Code] を選択することで、ワンアクションでテンプレートを /azure 環境に起動できます。

はじめに

AI App Gallery (https://aka.ms/aiapps) に移動します
実行したいテンプレートを選択するか、テンプレートを検索します
ドロップダウンメニューから [Open in VS Code] を選択します
直接 VS Code を起動し、GitHub Copilot を使用して、質問に答えてもらいます。

サンプルの使用例またはシナリオ

以下は、\azure 環境で一般的に使用されるシナリオです。

Azure AI Foundry を使用してモデルのデプロイを作成し、VS Code でコードを開く
1. Azure AI Foundry ポータルから、使用ケースに最適なモデル（Foundry Models の o3、o4-mini、または MAI-DS-R1 など）を選択します。このケースでは、エージェントワークフローの例として gpt-4o-mini を使用します。
2. gpt-4o-mini モデルカードからモデルエンドポイントをプロビジョニングします。
3. エージェントプレイグラウンドにアクセスし、最大応答数や過去のメッセージなどの生成制御を変更します。知識、ツール、アクションを追加します。
4. サンプルプロンプトを繰り返し、エージェントプレイグラウンドでの実験を続けます。
5. 満足したら、[View Code] ボタンを選択して、エージェントプレイグラウンドでのエージェントとのインタラクションのコンテキストコードサンプルを表示します。
  
  そこでは、エージェント向けの Python、C#、JavaScript の多言語コードサンプルと、モデル向けの JSON、cURL、JavaScript、C#、Go を含むコードサンプルを確認できます。また、モデルで利用可能になった「キー認証」により、Entra ID を使用してエージェントを認証できます。
6. 準備ができたら、[Open in VS Code] を選択すると、ウェブ版 VS Code の /azure 環境にリダイレクトされます。
  
  環境がセットアップされると、コードサンプル、API エンドポイント、キーが新しいウェブ版 VS Code ワークスペースに自動的にインポートされることに気づくでしょう。
  
  右下隅に、API キーがターミナルの環境変数に設定され、サンプルコードが正常にダウンロードされたことが表示されます。
7. ターミナルから python agent_run.py を介してモデルをローカルで実行します。数秒以内に、正常なモデル応答が表示されます。
8. azd コマンドは、エージェントを使用して Web アプリをプロビジョニングおよびデプロイするために使用できます。azd init は git リポジトリを初期化し、エージェントがアプリケーションで使用できるデフォルトの Azure ワークスペースを作成します。
9. azd up は、関連する Azure リソースを作成して Web アプリをプロビジョニングします。完了すると、ターミナルに表示されるリンクを選択することで、ブラウザでアプリケーションが実行されていることを確認できます。
10. 左下隅の「Continue on Desktop」を選択して、デスクトップ版 VS Code または GitHub Desktop で作業を続けます。このボタンを使用すると、ワンアクションでワークスペースをローカル環境に移動できます。既存のアプリケーションに開発コンテナがアタッチされている場合、そのコンテナを使用するか、ローカル環境に移動するかを選択できます。
Azure Function アプリをすばやく起動する

上記のクイックスタートは、vscode.dev/azure がすべての前提条件を満たしているため、vscode.dev/azure に適用されます。
- Python がインストールされている
- Azure Functions Core Tools がインストールされている
- これらは自分でインストールする必要があります。
- Azure Functions 拡張機能
Azure AI Toolkit を使用して AI エージェントを構築およびテストする

主な機能
- 豊富な生成 AI モデルソース（GitHub、ONNX、OpenAI、Anthropic、Google など）を備えたモデルカタログ
- リモートでホストされているモデル、またはローカルで実行されている Ollama モデルを独自のモデルとして使用する
- チャットを介したモデル推論またはテスト用のプレイグラウンド
- マルチモーダル言語モデルの添付ファイルサポート
- 選択した AI モデルの一括実行プロンプト
- F1 スコア、関連性、類似性、一貫性など、サポートされている一般的な評価器を使用して、データセットで AI モデルを評価する
VS Code 拡張機能と Python を使用した迅速なプロトタイピング

制限

ウェブ版 VS Code はデスクトップ版 VS Code とほぼ同等ですが、開発環境にはいくつかの制限があります。

Cloud Shell 以外のターミナルアクセスは不可
一部のネイティブ拡張機能または言語機能のサポートが限定的
オフラインサポートなし

トラブルシューティング

ウェブ版 VS Code – Azure で問題が発生した場合は、弊社のGitHub リポジトリに問題を記録してください。

アカウントタイプのプロンプト問題

「このトンネルを開始するために使用したアカウントの種類は？」というプロンプトが表示される場合、vscode.dev/azure を使用しており、insiders.vscode.dev/azure を使用していない可能性があります。現在、この製品は Insiders でのみ利用可能です。これを修正するには、https://insiders.vscode.dev/azure に移動してください。

Screenshot that shows Account Type