YonaAz x Gh-CUGコラボ会 登壇資料 Via ロホマン シャヒン

265 Views

October 22, 26

スライド概要

2026年10月22日に行われたYonaYona Azure Club × GitHub Copilot User Group Japan(Gh-CUG)による、オンラインコラボイベントでの登壇資料です。
タイトル:
GitHub CopilotでAzureアプリ開発が変わる?Azure Toolsの新機能を検証
概要:
GitHub CopilotによるAzureアプリ開発は、コード生成だけでなく、構成検討、ローカル実行、インフラ生成、Azureへのデプロイまでを支援する体験へと広がり始めています。本セッションでは、9/16に初期PurviewでVS CodeのAzure Toolsに追加された新しいガイド付きCopilot体験をデモし、従来の自由形式のチャットとの違いを整理します。実際に利用して分かったメリットや制約、本番利用に向けて確認すべきポイントも紹介します。

profile-image

Microsoft Azure Solutions Architect Expert取得(計8種) Microsoft Student Ambassador GithubCopilot User Group Japan運営 XAI学会発表 / Google Innovator Developer / TEC Member 外資ハッカソン決勝進出 / chrome拡張機能リリース / 技育祭学生アンバサダー 元技育展学生審査員 / 学内コンテストRAGシステム構築 Azureコミュニティ登壇経験 / Microsoftパートナー企業インターン

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

YonaAz × GH-CUG コラボ会 GitHub Copilot Night GitHub Copilot で Azure アプリ開発が変わる? Azure Tools の新機能を検証 計画承認・統合結果・デプロイ前レビューを確認 認証不一致への案内から、確認ポイントを考える ロホマン シャヒン(Gh-CUG 運営) 2026年10月22日(木)オンライン(Teams) #YonaAz #ghcug 1

2.

自己紹介 ロホマン シャヒン Microsoft Student Ambassador ・ Gh-CUG運営 20歳/情報学部二年/AI専攻/クラウドエンジニア 高校時代 大学1〜2年 ・情報処理学会 全国大会で講演 ・技育CAMPハッカソン参加 ・Google × Zenn ハッカソン参加・受賞 ・Google Cloud Innovator / TEC ・技育展 学生審査員 ・技育祭 春 学生アンバサダー ・業務委託にてシステム開発 ・42Tokyo Piscine(インターン参加のため辞退) ・Chrome拡張機能リリース ・SaaS スタートアップにてインターン ・AIスタートアップでインターン ・外資ハッカソン EGH 決勝進出 ・学内コンテストにてRAGシステム構築 ・プログラミング講師を経験 ・技育祭秋学生アンバサダー就任 ・現在はMicrosoftパートナー企業にてインターン 中 ・Microsoft 学生アンバサダー ・複数の登壇/ブログ執筆 ・Github Copilot User Group Japan運営 YonaAz × GH-CUG | 2026.10.22 Portfolio 2

3.

はじめに 今日の結論:変わったのは「何を作るか」より 「どこで人間が承認するか」 01 整理する 02 試した 03 試して分かった、人の判断 Azure Tools・3つの名前・各手段の役割・公式の流れと対応範囲 計画承認・統合結果・見積り・リスク・停止時の案内 使いどころ・Interactive Canvases・Azure Canvases・使い分け・操作例 ゴール:自分のプロジェクトで試すか、試すなら何を確認するかを判断できる YonaAz × GH-CUG | 2026.10.22 3

4.

はじめに|公式の問題設定 公式は「体験の形」を課題に挙げる 自由チャットで挙げられた課題 ガイド付きの設計目標 インフラや前提が抜ける 計画を確認・承認してから生成 会話の途中で文脈が失われる アーキテクチャの文脈を保つ 長文の往復・結果のばらつき フォームで構造化/決定性・一発成功を目指す 計画と承認を挟み、確認する場所を整える追加の選択肢。 YonaAz × GH-CUG | 2026.10.22 4

5.

整理する 01 Azure Tools と3つの名前、実行手段との関係、公式の流れ YonaAz × GH-CUG | 2026.10.22 5

6.

01|整理する:Azure Tools Azure Tools は、VS Code で Azure 開発を始める拡張機能パック 何者か ・Microsoft 提供の、無料の VS Code 拡張機能パック パックに含まれる主な拡張 Azure Resource Manager Azure MCP Server App Service ・Azure 開発でよく使う拡張を、 まとめて入れられる Functions Container Apps Cosmos DB ・目的は『VS Code を出ずに、 Azure アプリを作る・ デプロイする・管理する』こと Static Web Apps Virtual Machines Storage ・今回は、Copilot による ガイド付き体験を利用 Azure MCP Server:AI に Azure のツールを提供 Azure Resource Manager:リソースの閲覧・管理 9月16日、このパックにガイド付き Copilot 体験(Public Preview)が加わった YonaAz × GH-CUG | 2026.10.22 6

7.

01|整理する:3つの名前 3つの名前は、役割と動く場所で分ける 名前 役割 動く場所 Azure Tools Azure開発の拡張機能パ ック ガイド付き体験の 入口 VS Code GitHub Copilot for Azure Azure向けのスキル・ エ VS Code など ージェント・ツール連携 Azure canvases GitHub Copilot アプリ 会話の横で対象や状態を (Awesome Copilot 経 確認・操作する作業面 由) VS Code には、別途 Interactive Canvases(1.142〜、Preview)が入った。 Azure Tools は拡張パック、Copilot for Azure は拡張機能、Azure canvases は Copilot アプリの作業面。 YonaAz × GH-CUG | 2026.10.22 7

8.

01|整理する:従来の手段との違い Azure への入口と、裏側の実行手段を分ける 優劣ではなく役割で整理し、目的に応じて併用する 手段 何をするものか 向いている場面 組み合わせる際の確認 Azure Portal Web の管理画面 リソースを見て回る・ 単発の設定 手作業の手順をコードとして 再利用しにくい Azure CLI(az) Azure を操作する汎用コマン ド スクリプト化・自動化・ 細かい操作 コマンドとオプションを 自分で調べて組み立てる azd + Bicep azd:アプリの作成・運用 Bicep:構成をコードで定義 繰り返し使う テンプレート・チーム共 有 構成の設計と IaC の理解は 自分で行う Azure MCP Server AI に Azure の ツールを提供 クライアントと連携し 検索や操作に利用 進行と確認点はクライアント・ スキル・指示の設計による ガイド付き Copilot 体験 (Azure Tools) 進め方と確認点を構造化 計画・ローカル・デプロイ 新しく作って Azure に載せる場面 プレビューの対応範囲と 環境・承認を確認 ガイド付き体験は入口。Portal・az・azd・Bicep・MCP と役割を分けて使う。 YonaAz × GH-CUG | 2026.10.22 8

9.

01|整理する:公式の紹介 公式は3ステージで説明する 1 プロジェクト計画 文章で依頼し、フォームで補足。 計画承認までコードは書かない。 2 ローカル開発 ランタイムとエミュレーターを確認。 デバッグ構成を用意する。 3 デプロイ 作成リソースと見積りを確認。 az / azdで実行する。 公式の設計目標:決定性・一発成功・構造化・VS Code内で完結 計画 → ローカル開発 → デプロイ。公式が示す進め方と確認ポイント。 YonaAz × GH-CUG | 2026.10.22 9

10.

01|整理する:対応範囲 初期プレビューの対応範囲: まずは JavaScript / TypeScript から 言語 アプリの種類 連携サービス JavaScript Web アプリ PostgreSQL TypeScript Azure Functions Azure Storage Container Apps Azure Key Vault Static Web Apps Azure OpenAI .NET と Python は今後対応予定 ステータス:Public Preview / ガイド付きは追加の選択肢 今回選んだのは TypeScript。フォームには Python / C# (.NET) の選択肢も表示。 自由チャットを置き換えるのではなく、決まった道筋のある「追加の選択肢」 YonaAz × GH-CUG | 2026.10.22 10

11.

試した 02 計画承認・統合結果・デプロイ前レビューと、 認証不一致への案内まで確認 YonaAz × GH-CUG | 2026.10.22 11

12.

02|試した:準備・認証確認 使うツールから、対象が見えるか 今回の体験で用意したもの Azureサブスクリプション/Copilotは別契約 VS Code + Copilot Chat az login az account list --output table 今回のフローでは、VS Code の Azure 側でも 同じテナントと対象サブスクリプションを確認。 CLI が報告した認証コンテキスト 今回のフローでは C L I 認証済みでも停止。利用するツールごとに対象を確認。 Y onaAz × GH - C U G | 2026.10.22 12

13.

02|試した:導入 Azure Tools とスキルを導入する ① VS Code で「Azure Tools」を検索して Install ② Azure スキルのインストールは確認つき。 「untrusted third-party code」の警告が出る Allow を押す前に、取得元が microsoft/azure-skills か確認する YonaAz × GH-CUG | 2026.10.22 13

14.

02|試した:スキル導入の結果 導入結果は「28 skills」と報告 28 Azure skills 導入済みとの報告 表示されなければ VS Code の再読み込みを案内。 導入結果のチャット部分を拡大 導入数と、表示されないときの対処が案内された。 YonaAz × GH-CUG | 2026.10.22 14

15.

02|試した:入力プロンプト 空のフォルダから、意図を伝える 依頼の要点(抜粋) azure-project-plan を起動 Azure Functions Node.js (TypeScript) の API データベースは PostgreSQL ローカル → Azure で動かしたい 起動する担当と許可の範囲を読み、 Allow in this Session / Skip を選ぶ。 依頼は「T ypeS c ript の AP I + P os tg reS Q L 」。 Y onaAz × GH - C U G | 2026.10.22 15

16.

02|試した:要件確認 フォームで、事前入力を見直す 事前入力された言語・サービス・機能を見直して Submit。 YonaAz × GH-CUG | 2026.10.22 16

17.

02|試した:計画承認 計画を読み、承認して進める 前提ツールも確認 構成とAPI onlyを確認。 Unknownのツールは、 状態と説明を読む。 Approve Plan が関門。承認するまで足場づくりへ進まない。 YonaAz × GH-CUG | 2026.10.22 17

18.

02|試した:足場づくり 承認後、設定ファイルが並ぶ azure-project-scaffold package.json / tsconfig.json host.json / local.settings.json 環境変数用ファイルなどを作成 9 files changed / +151 の表示 設定ファイルの一部を拡大 ファイルの差分を読み、Keep / Undo を判断して統合へ。 YonaAz × GH-CUG | 2026.10.22 18

19.

02|試した:統合 統合結果から、次の進み方を選ぶ 計画承認 → 統合結果 登録関数(エージェント報告) ユニットテスト(エージェント報告) 約19分 6 49件 画面時刻の経過/ベンチマークではない AP Iのみ/フロントエンドなし 全件通過と報告 次の進み方を選べる Set up local development / Deploy to Azure 今回は Deploy to Azure を選択。 登録関数とテスト数は、統合結果として表示されたエージェント報告。 Y onaAz × GH - C U G | 2026.10.22 19

20.

02|試した:担当と引き継ぎ 実機の流れは、4つの担当 azure-project-plan 計画 azure-project-scaffold 足場づくり azure-project-integrate 統合 azure-deploy デプロイ 足場づくりの後に、統合を担当するエージェントも登場した。 計画・足場づくり・統合・デプロイへ、確認を挟んで引き継ぐ。 YonaAz × GH-CUG | 2026.10.22 20

21.

02|試した:デプロイ前の見積り 月額見積りの大半は P os tg reS QL japaneast/低負荷を想定 月約10万実行 ログ約1GB $ 23.43 / 月 $ 18 .98 + $ 4.42 + $ 0.03 = $ 23.43 月額内訳(US D )/ゼロ基準 P os tg reS QL c omp ute $ 18.98 P os tg reS QL s torag e $ 4.42 S torage A c c ount $ 0.03 F unc tions ・監視 $ 0.00 0 5 10 15 20 画面の低負荷・無料枠前提の見積り。実際の費用は構成と利用量に応じて変わる。 Y onaAz × GH - C U G | 2026.10.22 21

22.

02|試した:エージェントの指摘 Copilotが挙げたリスクを読む DBの広い公開 アプリIDの管理者権限 匿名API Self-review:14 verified / 8 plausible / 0 flagged エージェントの自己レビュー。独立監査ではない。 指摘を判断材料にし、公開・権限・認証を見直す。 YonaAz × GH-CUG | 2026.10.22 22

23.

02|試した:承認前の判断 公開・権限・認証は人が決める 人が決める3点 公開:DBをどこまで開くか 権限:管理者権限が必要か 認証:匿名APIのままでよいか ポリシー・クォータの不足も確認。 根拠が足りなければ編集・中止。 Y es だけでなく、R un m anually / E dit plan / C anc el も選べる。 Y onaAz × GH - C U G | 2026.10.22 23

24.

02|試した:停止時の原因と診断 認証の食い違いで停止した エージェントが示した原因 az CLI はサインイン済み。 VS Code側では対象の サブスクリプションが見えない。 インベントリ取得で停止。 What-if の報告:作成15 / 削除0 / 変更0 Unsupported 4項目は、この評価では判断できない。 認証の食い違いを説明し、対象をそろえるための案内が出た。 YonaAz × GH-CUG | 2026.10.22 24

25.

02|試した:原因と次の一手 止まっても、原因と次の一手が分かる エージェントが提案した手順 今回得られたこと 1 同じテナントへサインイン 2 対象サブスクリプションを選択 3 retry と返信 計画承認 統合結果 デプロイ前レビュー 認証不一致への案内 原因の説明と、次に確認する操作がセットで示された。 YonaAz × GH-CUG | 2026.10.22 25

26.

02|試した:デプロイの確認チェックリスト デプロイ時に確認する4つのこと 画面に提示された実行フロー 1 main.bicep をデプロイ サブスクリプションスコープ 2 API をビルドし、zip デプロイ Function App へ配置 実行後の確認項目 ・作成リソース ・API 応答 ・権限と公開範囲 ・不要リソースと課金状況 3 tasks の DB マイグレーション 一時的な IP 許可は確認して開き、使用後に削除 4 /api/health と /api/tasks を確認 不要なリソースは削除し、 残存リソースと課金状況を確認 実行フローと確認項目をセットで読み、変更後の環境まで確かめる。 YonaAz × GH-CUG | 2026.10.22 26

27.

試して分かった、人の判断 03 使いどころを整理し、Interactive Canvases(VS Code 1.142・10/14・Preview)と Azure Canvases(Copilot アプリ)の違いから、人が決めることへ YonaAz × GH-CUG | 2026.10.22 27

28.

03|試して分かった:確認ポイントの変化 試して分かった、確認ポイントの変化 確認したいこと 今回見えたこと 作業する場所が分かれる → VS Code の中で、 計画からデプロイ前レビューまで進んだ 実機で確認 不足する要件を埋めたい → 不足はフォームで聞かれ、 回答は事前入力済みだった 実機で確認 どこで承認するか知りたい → 計画の承認と、最終確認が決まっている (Yes / Run manually / Edit plan / Cancel) 実機で確認 実行前に費用とリスクを見たい → デプロイ前に月額見積り($23.43)と リスク一覧が出た 実機で確認 公式が狙う再現性 → 同じ入力から同じ種類の結果を目指す 公式の設計目標 今回注目したのは、速さより確認しやすさ。 YonaAz × GH-CUG | 2026.10.22 28

29.

03|試して分かった:使いどころ 既存の手段と組み合わせる入口 変わらないこと 使いどころ(私の見立て) ・公式の実行手段は az / azd、構成は Bicep 今回も Bicep 9ファイルが生成された ・向いている:Azure に不慣れな人が、 小さな API や検証環境を通しで作る ・今回は CLI 認証済みでも VS Code 側で停止 使うツールから対象が見えるか確認する ・併用が現実的:既存環境の細かい運用や自動化は Portal・CLI・azd と使い分ける ・公開範囲・権限・承認・コストの判断は人が行う ・まず検証環境で、計画と差分を読みながら試す 公開・権限・費用を自分で判断する ・公式の初期プレビュー対象:JavaScript / TypeScript ガイド付き体験は、既存の手段の上に乗った入口 YonaAz × GH-CUG | 2026.10.22 29

30.

03|Canvas:VS Code 1.142 VS Code 1.142(10月14日)で、Canvas がチャットの横に登場 Interactive Canvases とは 始め方(Preview) ・VS Code のエディター/Agents ウィンドウで、 チャットの横に開く ① chat.canvases.enabled を有効にして、 Copilot harness で新しいセッションを開始 (デスクトップのローカルセッション) ・ユーザーとエージェントが 同じ成果物を見て更新する ・例:Kanban で実装計画を管理 カードを自分で作成・移動でき、 エージェントがタスク分解と状態更新 ② /create-canvas で画面を説明して、 自分で作る または、canvas 拡張を含む チャットプラグインを入れる 会話で意図を伝え、成果物は横の画面で確認する YonaAz × GH-CUG | 2026.10.22 30

31.

03|Canvas:VS Code 1.142 VSCodeのCanvasの看板ダッシュボードの例: YonaAz × GH-CUG | 2026.10.22 31

32.

03|Canvas:Azure 向け 公式の Azure 向け Canvas は、まず3種類 Azure 向け Canvas の3種 用途 Azure Functions Hosted Skills Function Appのホステッドスキルを組み立てる Azure Resources Query サブスクリプション内のリソースを探す Azure Cost Health Check コスト・予測・削減余地を確認する Azure 向け Canvas の導入の流れ(Awesome Copilot のプラグイン) Azure CLI で az login → Copilot アプリの Plugins → Azure canvas を追加し、新しいセッションで利用 Azure 向けの公式 Canvas は、GitHub Copilot アプリで使う。 YonaAz × GH-CUG | 2026.10.22 32

33.

03|Canvas:使い分け Canvas は2種類。公式の Azure Canvases と、VS Code の Interactive Canvases 項目 公式の Azure Canvases VS Code の Interactive Canvases(1.142〜) 動かす場所 GitHub Copilot アプリ (Awesome Copilot マーケットプレイス経由) VS Code (エディター・Agents ウィンドウ、Preview) 目的 公式のツール(コスト、リソース検索、 Functions)を、AIと共有する画面で使う 自分のプロジェクトに合う画面を、 エージェントと一緒に作って使う(例:Kanban) 開発の必要性 不要 用意されたプラグインを入れて使う 自分で作る(/create-canvas)、 または canvas 拡張を入れる 公式のツールをそのまま使うなら Copilot アプリ。自分の開発に合わせるなら VS Code で作る YonaAz × GH-CUG | 2026.10.22 33

34.

03|Canvas の操作例:会話と作業面 会話の横で、対象と変更を見る 会話から作業面へ チャットの横に作業面を開く、 VS Code 1.142 の Canvas と 同じ考え方の画面例。 Container Apps の スケール設定を扱う画面例。 ガイド付きでは承認する場所、Canvas の画面例では対象と変更が見える。 YonaAz × GH-CUG | 2026.10.22 34

35.

03|Canvas の操作例:対象と変更の確認 対象と変更を、適用前に確認 1 対象を確認 サブスクリプション・アプリ 2 変更を指定 Minimum / Maximum replicas 3 確認して適用 Preview change → Apply scale change 対象の選択 → 値の入力 → Preview → Apply。チャットの横の作業面で、適用前に確認する。 YonaAz × GH-CUG | 2026.10.22 35

36.

03|試して分かった:人の判断 確認しやすさを、人の判断につなげる 判断ポイント 見える材料 人が決めて実行すること 環境と認証 利用ツールごとの 認証と対象 検証用の環境を選ぶ 使うツールから対象が見えるか確認 公開と権限 DB 公開・匿名 API 管理者権限 認証・公開範囲・最小権限を見直す 必要なら Edit plan / Cancel 費用と 後片付け 低負荷前提の 月額見積り 自分の負荷で再計算し、不要なものを削除 残存リソースと課金状況を確認 環境・公開・権限・費用を、自分の条件に合わせて判断する。 YonaAz × GH-CUG | 2026.10.22 36

37.

まとめ GitHub Copilot で Azure アプリ開発が変わる? Azure Tools の新機能を検証 1 Azure Tools は拡張パック。新しいガイド付き体験は確認点を整える Portal・az・azd・Bicep・MCP と役割を分けて使う 2 フォーム → 計画承認 → 統合報告 → 見積り・リスク → 停止時の案内 今回確認した範囲は、デプロイ前レビューと認証の案内まで 3 環境・公開・権限・費用は人が判断する 必要なら Edit plan / Cancel を選び、不要なリソースも見直す 4 Canvas は2種類:VS Code の Interactive Canvases(1.142〜)と Copilot アプリの公式 Azure Canvases 「何を作るか」より「どこで人間が承認するか」が設計されている。 YonaAz × GH-CUG | 2026.10.22 39

38.

ご清聴ありがとうございました 感想・ご質問は #YonaAz #ghcug まで / X:@code_shahin 30