に参加して、VS Code の AI 支援開発について学びましょう。

Web 用 VS Code - Azure

VS Code for the Webは、インストール不要でブラウザベースの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 for the Webのステータスバーにある[作業を続行する]ボタンを使用して、コードを選択したGitHubリポジトリにコミットし、ローカル環境に移行できます。

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

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

Azureのエントリポイント

/azureエクスペリエンスはAzure AI Foundryと統合されており、コードを開発者により近くします。Chat PlaygroundAgent Playgroundなどの環境では、Web用VS Codeで開くなどのボタンが直接利用できます。詳細については、サンプルユースケースまたはシナリオのセクションを参照してください。

はじめに

  1. モデルを選択します。
  2. エージェントを構築してテストします。
  3. [コードを表示]を選択し、プログラミング言語とSDKを選択します。
  4. ワンクリック[VS Codeで開く]ボタンを使用してWeb用VS Codeを直接起動します。

さらに、開発者はAIアプリギャラリー (https://aka.ms/aiapps) を使用してテンプレートを開始し、[VS Codeで開く]を選択することで、テンプレートを/azure環境に一操作で起動できます。

はじめに

  1. AIアプリギャラリー (https://aka.ms/aiapps) に移動します。
  2. 実行したいテンプレートを選択するか、テンプレートを検索します。
  3. ドロップダウンメニューから[VS Codeで開く]を選択します。
  4. 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を使用します。

      Screenshot that shows Azure AI Foundry Portal

    2. gpt-4o-miniモデルカードからモデルエンドポイントをプロビジョニングします。

      Screenshot that shows Azure AI Foundry Portal Model

    3. エージェントプレイグラウンドに到着し、最大応答数や過去のメッセージなどの生成制御を変更します。知識、ツール、アクションを追加します。

      Screenshot that shows model output

    4. サンプルプロンプトを繰り返し、エージェントプレイグラウンドで実験を続けます。

    5. 満足したら、[コードを表示]ボタンを選択して、エージェントプレイグラウンドでのエージェントとのインタラクションのコンテキストコードサンプルを表示します。

      Screenshot that shows view code button

      そこでは、エージェント用のPython、C#、JavaScriptによる多言語コードサンプルと、モデル用のJSON、cURL、JavaScript、C#、Goが含まれており、Entra IDを使用してエージェントを認証できます。「キー認証」がモデルで利用可能になりました。

      Screenshot that shows EntraID auth

    6. 準備ができたら、[VS Codeで開く]を選択して、Web用VS Codeの/azure環境にリダイレクトされます。

      Screenshot that shows Open in VS Code button

      環境が設定されると、コードサンプル、APIエンドポイント、キーが新しいWeb用VS Codeワークスペースに自動的にインポートされることに気づくでしょう。

      Screenshot that shows loading dial

      右下隅に、APIキーがターミナルの環境変数に設定され、サンプルコードが正常にダウンロードされたことが表示されます。

      Screenshot that shows loaded environment

    7. python agent_run.pyを介してターミナルからモデルをローカルで実行します。数秒で、モデルが正常に応答するのを確認できます。

      Screenshot that shows agent python file

    8. azdコマンドを使用して、エージェントを使用してWebアプリをプロビジョニングおよびデプロイできます。azd initはgitリポジトリを初期化し、エージェントをアプリケーションで使用できるデフォルトのAzureワークスペースを作成します。

      Screenshot that shows azd init

    9. azd upは関連するAzureリソースを作成してWebアプリをプロビジョニングします。完了すると、ターミナルに表示されるリンクを選択することで、ブラウザでアプリケーションが実行されているのを確認できます。

      Screenshot that shows azd up

    10. 左下隅の「Continue on Desktop」を選択して、デスクトップのVS CodeまたはGitHub Desktopで続行します。このボタンを使用すると、ワークスペースをローカル環境にワン操作で移動できます。既存のアプリケーションに開発コンテナがアタッチされている場合は、そのコンテナを使用するか、ローカル環境に移動するかを選択できます。

      Screenshot that shows Continue On button

  • 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による迅速なプロトタイピング

制限

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

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

トラブルシューティング

Web用VS Code - Azureで問題が発生した場合は、GitHubリポジトリに問題をログしてください。

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

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

Screenshot that shows Account Type

接続の問題

https://insiders.vscode.dev/azureに接続できない場合は、通常、Azure Cloud Shellをリセットすることで解決できます。これはAzure Portalから実行できます。

右上隅のボタンを使用して、Azure PortalでCloud Shellを開きます。

Screenshot that shows Azure Portal

次に、設定ドロップダウンで[ユーザー設定のリセット]を選択します。

Screenshot that shows Settings

完了すると、この画面が表示されるはずです。

Screenshot that shows Azure Cloud Shell

ログの収集

拡張機能のログは、vscode.dev/azureに関する問題を診断するのに役立ちます。出力ビューに移動し、[Web用VS Code - Azure]出力チャネルを選択することでアクセスできます。

Screenshot that shows Logs

Screenshot that shows Logs

以下のリソースで学習と探索を続けます。

フィードバックとサポート

vscode.dev/azureを使用中に見つけた問題は、GitHubリポジトリで作成してください。詳細であればあるほど良いです。可能であれば、「Web用VS Code - Azure」出力チャネルからのログを含めてください。

© . This site is unofficial and not affiliated with Microsoft.