2026年2月版 GitHub Copilotでバックエンドのバイブコーディングを極めた話

1K Views

February 26, 26

スライド概要

[AIエージェント実例:GitHub Copilotでバックエンドのバイブコーディングを極めた話 - connpass](https://wake-career.connpass.com/event/382816/) のスライドです。
現状のCopilotでどこまでできるのかと、開発の流れを説明しています。

profile-image

バックエンドエンジニア。  主にC#, Azure, Terraform, GitHub Actionsをいじっています。Microsoft MVP for Azure, Azure AI Foundry, GitHub Star

シェア

またはPlayer版

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

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

2026年2月版 GitHub Copilotで バックエンドのVibe Codingを極めた話 WAKE Career 2026/02/26 Maki Nagase

2.

Maki Nagase @yuma_prog • My Info • 株式会社ゼンアーキテクツ所属 • GitHub Star • Microsoft MVP for Azure, Microsoft Foundry • 運営・主催コミュニティ • AI駆動開発勉強会, JAZUG(Japan Azure User Group), Azure わいがや会, GitHub Vibe Riders, Hack Everything., GitHub dockyard, AOAI Dev Day • 好きな技術 • Azure PaaS, Azure AI, C#, Terraform, GitHub Copilot • 趣味 • 技術コミュニティ,アニメ,キャンプ,しゃぼん玉,法螺貝, サバゲ,などなど

3.

GitHub Vibe Riders – YouTube GitHub Copilotの更新情報キャッチアッ プや検証をゆるーくライブ配信するチャ ンネル 来週はCopilot CLIを取り上げる予定

4.

今日のお話 • 去年の挑戦の振り返り • ツールが進化した今だとどうなるのか • 今現在の開発スタイル

5.

今日の話の背景

6.

VS Code Meetup と GitHub dockyard の コラボイベント VS CodeのGitHub Copilotを使って 1時間でイベントのアンケートアプリ を作成するライブVibe Codingを実施 https://www.youtube.com/live/pOYUgAn4qZM

7.

アンケートアプリの構成 GitHub Actions HTTPトリガー Azure Static Web Apps Azure Functions Azure Cosmos DB

8.

構成図 事前準備済み フロントエンドチーム バックエンドチーム HTTPトリガー GitHub Actions Azure Static Web Apps Azure Functions (.NET) Azure Cosmos DB リソースは事前にデプロイ済み コードを書いてプッシュすればStatic Web Apps と Azure Functions にデプロイされる状態から スタート

9.

バックエンドとフロント エンドに分かれて実装 【ルール】 GitHub Copilotに自然言語 で指示、コードは基本触 らない

10.

バックエンドとフロント エンドに分かれて実装 【ルール】 GitHub Copilotに自然言語 で指示、コードは基本触 らない →フロントはアンケート フォームまで完成!

11.

バックエンドとフロント エンドに分かれて実装 【ルール】 GitHub Copilotに自然言語 で指示、コードは基本触 らない →フロントはアンケート フォームまで完成! バックエンドは 何の成果も得られませんでしたあああ!!!!

12.

敗因をふりかえり • Cosmos DB側の構成(Partition Key)を、GitHub Copilotが確認せず推測で決めてコー ドを書いていた • Partition Key が異なるというエラーが出ていた • このエラーはCopilotに任せているだけでは解消できない

13.

敗因をふりかえり • Cosmos DB側の構成(Partition Key)を、GitHub Copilotが確認せず推測で決めてコー ドを書いていた • Partition Key が異なるというエラーが出ていた • このエラーはCopilotに任せているだけでは解消できない Cosmos DBの構成を把握できていないことが一番の問題だった

14.

バックエンドのVibe Codingの難しさ フロントエンド • コード内ですべて完結する(今回の ケースは) バックエンド • コードだけではコンテキストが不足し ている • コード外のリソースの構成がコードに 影響する

15.

バックエンドのVibe Codingの難しさ フロントエンド • コード内ですべて完結する(今回の ケースは) バックエンド • コードだけではコンテキストが不足し ている • コード外のリソースの構成がコードに 影響する 「コード外のコンテキスト」=「インフラ側のリソース情報」を GitHub Copilotが自律的に取得できればうまくいくのでは?

16.

インフラ側の情報を コンテキストとして与える方法 1. IaC (Infrastructure as Code) 2. 外部から取得(MCPやコマンド) • インフラの状態をコードで管理する方 法 • インフラの構成を取得可能な MCP、も しくはコマンドを Agent に利用させる • インフラの情報をコード内に含めるこ とができる • GitHub Copilotがそのコードを参照でき ればインフラを考慮した提案が可能

17.

インフラ側の情報をコンテキストと して与える方法 1. IaC (Infrastructure as Code) • インフラの状態をコードで管理する方 法 • インフラの情報をコード内に含めるこ とができる • GitHub Copilotがそのコードを参照でき ればインフラを考慮した提案が可能 以下の条件を満たす必要がある • インフラがIaC化されている • IaCの定義が同じリポジトリにあ る(必須ではないが) • 開発者とインフラ担当者の 権限を分離している場合な どはこの構成が難しい

18.

インフラ側の情報をコンテキストと して与える方法 1. IaC (Infrastructure as Code) 2. MCPやコマンド • インフラの状態をコードで管理する方 法 • インフラの構成を取得可能な MCP、も しくはコマンドを Agent に利用させる • インフラの情報をコード内に含めるこ とができる • GitHub Copilotがそのコードを参照でき ればインフラを考慮した提案が可能 適用できるケースが限られる IaC化されていなくても実践可能 MCP Serverさえ提供されていればイン フラベンダーが異なっても同じこと ができる =汎用性が高い

19.

今回のチャレンジ前に 仕込んでいたこと 1. Microsoft Learn MCP Serverの導入 • 入手 • https://github.com/microsoftdocs/mcp • 機能 • GitHub CopilotにMicrosoft 公式ドキュメントを参照させられる • 目的 • Azure Functionsのサンプルコードやベストプラクティスを自律的に取得してもらい、良 い感じのコードを提案させること • 結果 • しっかり機能はしていたが、Learnの内容をベースにエラーの原因を突き止める、とい うところまではいかなかった

20.

今回のチャレンジ前に 仕込んでいたこと 2. GitHub Copilot for Azure 拡張 • 入手 • https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azure-githubcopilot • 機能 • Azureリソースの質問やAzure CLIコマンド生成、デプロイができる • 目的 • Azure Functionsのベストプラクティスを自律的に取得してもらい、良い感じのコードを 提案させること • 結果 • ベストプラクティスの取得では動いていた

21.

今回のチャレンジ前に 仕込んでいたこと 3. Azure MCP Server • 入手 • https://github.com/microsoft/mcp/tree/main/servers/Azure.Mcp.Server • 機能 • 自分の環境のAzure リソースにアクセスできる • 目的 • Azure上のリソース構成(特にCosmos DBの構成情報)を自律的に取得してくること • 結果 • 呼ばれてほしい場面で呼ばれていなかった

22.

今回のチャレンジ前に 仕込んでいたこと 3. Azure MCP Server • 入手 • https://github.com/microsoft/mcp/tree/main/servers/Azure.Mcp.Server • 機能 • 自分の環境のAzure リソースにアクセスできる • 目的 • Azure上のリソース構成(特にCosmos DBの構成情報)を自律的に取得してくること • 結果 • 呼ばれてほしい場面で呼ばれていなかった ここが意図通りに呼ばれなかったのが最大の敗因

23.

再戦

24.

配信イベントで再挑戦 「Azureわいがや会」(モブプロ形 式で気になる技術を試す勉強会) にて、 1時間でバックエンドを完成させ るチャレンジの2回戦を実施! https://azure-waigaya.connpass.com/event/360954/

25.

前回の失敗をふりかり コード外のコンテキスト、特にCosmos DBの構成情報を取得できていなかった 【改善ポイント】 • 適切な場面でAzure MCP Serverが呼ばれてCosmos DBの構成情報を取得してくる よう工夫する • Azure MCP Serverがうまく動かないときのためにAzure CLIを実行して情報を取 得するという逃げ道を用意する 【こだわりポイント】 • 汎用性、導入しやすさ(最小限の準備工数)

26.

設定した内容 • 前回同様 • Microsoft Learn MCP Server • GitHub Copilot for Azure 拡張 • Azure MCP Server • 今回追加 • Custom instructions の改良

27.

Custom instructions • Copilot Chatでのやりとりで必ず特定の プロンプトを付け加える設定ができる 機能 • いつも書いている指示がある場合はこ れで設定すると楽 • イベントではVS Codeの設定 github.copilot.chat.codeGeneration.instruct ionsに右のような内容を直書き • ※設定ファイル(settings.json)への直 書きは現在非推奨。推奨は、別ファイ ルを作成しての参照 Customize AI responses in VS Code "github.copilot.chat.codeGeneration.instructi ons": [ { "text": "必ず Azure MCP Server、Azure CLI を使って Azure 側の構成を把握してか ら実装を考えてください" }, (省略) ]

28.

Custom instructions • Copilot Chatでのやりとりで必ず特定の プロンプトを付け加える設定ができる 機能 • いつも書いている指示がある場合はこ れで設定すると楽 • 当時はVS Codeの設定 github.copilot.chat.codeGeneration.instruct ionsに右のような内容を直書き ※今なら .github/instructions/~instructions.md に書 くような内容 Customize AI responses in VS Code "github.copilot.chat.codeGeneration.instructi ons": [ { "text": "必ず Azure MCP Server、Azure CLI を使って Azure 側の構成を把握してか ら実装を考えてください" }, (省略) ] コンテキストが不足している場合は 聞き返してほしいため

29.

結果は…

30.

もう一回遊べるドン 惨敗 一週間後に3回戦目を開催す ることに…

31.

敗因 • エラーが解決できずタイムオーバーに • 主なエラーの原因はAzure Cosmos DB SDKの問題 • 現状の微妙な仕様の問題(SDKが参照しているJSON系のパッケージ関連 の問題) • バージョンが上がってこの問題が解消されればうまくいっていたかも(2026 年2月時点でも同じ問題が発生している) しかし、そこに至るまでの過程でごたついていて、再現度が低そうだった →再度原因分析

32.

Custom instructions の無視 手順の揺らぎ • 「Azure 側の構成を把握して • 「まずは手順を示して、許 Sonnetもエラーになるとい から実装」という Custom 可が出たら実装して」のよ う謎の外れ日で、GPT-4.1し instructions を無視して Agent うに指示しても、勝手に実 か使えない状態だった Mode が実装を始める 装を始める Copilotの不具合 • その日はGeminiもClaude Azure の認証問題 =Azure MCP Server/Azure CLI が使えなかった Toolの整理不足 • Agent Mode でどこから Azure の認証情報を取っているか • Agent Mode で設定されている Tool が 128 を超えており、 わからず、希望のアカウントで認証できなかった 何かの拍子に選択解除した Tool が再選択される、など の不具合も発生していたため、リクエストを投げるたび に Tool 整理のロスタイムが発生していた

33.

改善策① Azure の認証問題 Agent Mode でどこ から Azure の認証情 報を取っているかわ からず、希望のアカ ウントで認証できな かった GitHub Copilot for Azure 拡張については @azure 認証の状態を知りたい と Chat で聞くとどのアカウントでログインしていてどの サブスクリプションを参照しているか確認・変更できた

34.

改善策② • Custom instructions の無視 • 手順の揺らぎ • Toolの整理不足 Custom Chat Mode(今でいうCustom agent)を作成 • 使用する MCP Server の Tool を絞る • Custom instructions で指示していた内容を詳細化

35.

Custom Chat Modeの記述方法 (2025/07時点) ワークスペースごとに設定したい場合 • .github/chatmodes/{{チャットモード名}}.chatmode.md を作成 ※現在Custom Chat Modeは廃止され、Custom agentsに移行されています Custom agents は .github/agents/~.agent.md に配置します

36.

Custom Chat Modeの記述方法 (2025/07時点) 複数ワークスペースで使用したい場合 • ユーザープロファイルに保存 • Chat Mode作成時に「User Data Folder」 を選択(現在はCustom agents)

37.

Custom Chat Modeの記述方法 (2025/07時点) (azure.chatmode.md) Microsoft, Azure系Toolを設定 --description: 'Azureとの連携用' tools: ['runCommands', 'runTasks', 'edit/editFiles', 'search', 'new', 'Microsoft Docs/*', 'Azure MCP/search', 'Azure MCP Server/*', 'context7/*', 'extensions', 'usages', 'vscodeAPI', 'problems', 'changes', 'testFailure', 'openSimpleBrowser', 'fetch', 'githubRepo', 'ms-azuretools.vscode-azure-github-copilot/azure_get_azure_verified_module', 'ms-azuretools.vscode-azuregithub-copilot/azure_summarize_topic', 'ms-azuretools.vscode-azure-github-copilot/azure_query_azure_resource_graph', 'ms-azuretools.vscode-azure-github-copilot/azure_generate_azure_cli_command', 'ms-azuretools.vscode-azure-githubcopilot/azure_get_auth_context', 'ms-azuretools.vscode-azure-github-copilot/azure_set_auth_context', 'msazuretools.vscode-azure-github-copilot/azure_diagnose_resource', 'ms-azuretools.vscode-azure-githubcopilot/azure_list_activity_logs', 'ms-azuretools.vscode-azure-github-copilot/azure_get_dotnet_template_tags', 'msazuretools.vscode-azure-github-copilot/azure_get_dotnet_templates_for_tag', 'ms-vscode.vscodewebsearchforcopilot/websearch'] --- https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md 現在はツール名が整理され、このくらいの記述で済む(VS Codeのツールピッカーで選択可能)

38.

Custom Chat Modeの記述方法 (2025/07時点) (azure.chatmode.md) --- 処理の流れを指示 https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md

39.

Custom Chat Modeの記述方法 (2025/07時点) (azure.chatmode.md) --- 出力形式を設定 https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md

40.

Custom Chat Modeの記述方法 (2025/07時点) (azure.chatmode.md) --- https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md

41.

特に意識した指示 Markdown のチェックリスト形式でタスクを書き出すようにする • 当時Todoが未実装だったため • 現在は不要 ローカル実行時は接続文字列で接続するようにする • ローカルではデバッグが難しい形で書かれてしまうことがあるため(Azure特有かも?) パッケージのインストールは必ずコマンドで実行する • パッケージファイルに誤ったバージョン名などで直書きしようとしてエラーになるケース が多いため

42.

結果 40分ほどで「アンケートフォームのバックエンド作成」が完了! • といってもほとんどの時間をAzureの認証情報問題に費やしていた • Azure CLIでもうまくいかず、結局Cosmos DBの設定をスクショしてCopilot Chatに投げた 2回戦までと大きく異なるのはカスタムチャットモードの指示を守って動いていたこと • Cosmos DBの構成についても、指示し忘れていることに気付けるような動きをしてくれていた • 勝手にインフラ側の構成(今回は主に Cosmos DB の Partition Key)を捏造してコードを書き始める、 という挙動がなくなったのは大きな一歩 • 知らぬ間に捏造されたインフラ側の情報をもとにコードを書かれて動かない状態になるのを回避

43.

バックエンドでバイブコーディング を極めるコツ インフラ側の情報を自動 2025年時点 で取ってくるか、人間に 聞くように設定する Copilot Chatに役割やワー クフローを守らせたい場 合は Custom instructions で はなくCustom Chat Mode 適切なモデルで実行する

44.

バックエンドでバイブコーディング を極めるコツ インフラ側の情報を自動 2025年時点 で取ってくるか、人間に 聞くように設定する 2026年 2月時点 何も言わなくても askQuestions ツールで聞き 返してくれる(モデル次 第ではあるが) Copilot Chatに役割やワー クフローを守らせたい場 合は Custom instructions で はなくCustom Chat Mode 適切なモデルで実行する

45.

バックエンドでバイブコーディング を極めるコツ インフラ側の情報を自動 2025年時点 で取ってくるか、人間に 聞くように設定する 2026年 2月時点 何も言わなくても askQuestions ツールで聞き 返してくれる(モデル次 第ではあるが) Copilot Chatに役割やワー クフローを守らせたい場 合は Custom instructions で はなくCustom Chat Mode 特定の拡張子・場所に自動で 効かせたいものはCustom instructions 特定ユースケースでのみ効か せたい・ツールを明示したい 場合はCutom agent 適切なモデルで実行する

46.

バックエンドでバイブコーディング を極めるコツ インフラ側の情報を自動 2025年時点 で取ってくるか、人間に 聞くように設定する 2026年 2月時点 何も言わなくても askQuestions ツールで聞き 返してくれる(モデル次 第ではあるが) Copilot Chatに役割やワー クフローを守らせたい場 合は Custom instructions で 適切なモデルで実行する はなくCustom Chat Mode 特定の拡張子・場所に自動で 効かせたいものはCustom instructions 特定ユースケースでのみ効か せたい・ツールを明示したい 場合はCutom agent それはそう プレミアムリクエスト0 のモデルだとまだツール の使い方が下手で呼び出 されない

47.

2026年2月現在で再戦するとどうなるか

48.

結果:28分で完成 • 同じものを今のGitHub Copilot で作り上げる配信を昨日やっ ていました

49.

事前設定 • バックエンドのコードにだけ効くbackend.instructions.md • Custom agent + Skills で構成した自作のCopilotのカスタマイズファイル生成Custom agent 「GitHub Copilot Consultant」を使って生成 • すべてに効くspec-driven-workflow.instructions.md • GitHub Copilot Consultant に置いているものをそのまま持ってきた • Microsoft Learn MCP Server, Azure MCP Server をインストール • .vscode/mcp.jsonに配置

50.

「バックエンドのAzure Functionsの実装をするた めの設計をしたい」:Plan agent 「Open in Editor」ボタン でPromptファイルplanazureFunctionsBackend.pro mpt.mdができる 「Cosmos DBはすでにあ Copilotから、 るものを使います」 askQuestionsでCosmos DB Planをレビューし、前提 の情報をヒアリングされ がずれていたので たので答える 「/planazureFunctionsBackend Spec作って」:Agent mode 「バックエンド実装し て」 「実行したい」 この時点で以前同様Cosmos DBのSDK側の問題でエ ラーが起きていたがCopilot側で検知して修正 実装の流れ

51.

2025年時点と現在 変わらないこと • 仕様と手順が明確なほど意図したコー ドが生成される • 「仕様駆動開発」はまだ有効 • 不足しているコンテキストに実装前に 気づくのがポイント 変わったこと • Plan agent(Custom agent)がある • 指示をしておくとかなり言うことを聞 く • ツールを使うのがうまくなった • 挙動を制御する方法(カスタマイズ方 法)がたくさんある

52.

2025年時点と現在 変わらないこと • 仕様と手順が明確なほど意図したコー ドが生成される • 「仕様駆動開発」はまだ有効 • 不足しているコンテキストに実装前に 気づくのがポイント 変わったこと • Plan agent(Custom agent)がある • 指示をしておくとかなり言うことを聞 く • ツールを使うのがうまくなった • 挙動を制御する方法(カスタマイズ方 法)がたくさんある 前まではAIの暴走・怠惰を制御するのに手を焼いていた 今はモデルとツールの進化により、 「適切にカスタマイズをしておけば」かなり期待通り自律的に動いてくれるように

53.

現在の開発の流れ • まずはそのプロジェクトでやりたいことに合わせてCopilotをカスタマイズ • VS Codeのドキュメントをみて自分で判断していくこともできる • https://code.visualstudio.com/docs/copilot/customization/overview • 個人的には都度参照が面倒なので、それらの情報を読ませた状態のGitHub Copilot Consultantに作らせている • Plan agent(もしくはEdit権限を奪ったCustom agentなど)で設計 • 一度設計をファイルに落とす • それをベースに仕様ドキュメントを書かせる • Spec Driven WorkflowをInstructionsで指示しておくと勝手にやってくれる • 仕様をもとに実装させる

54.

カスタマイズを整備するメリット • プロンプトを頑張らなくていい • 誰でも同じような品質のコードを生成できる • 使いこなす能力・知識による格差が生まれにくくなる 「実装して」というだけで品質が担保され、規約にも則ったコードが生成 されるのが理想 そのためにカスタマイズを重ねていく!

55.

カスタマイズを改善していく方法案 日々のCopilotへの不満をIssue コメントにためておく • GitHub MCP Serverを使えばVS Codeから Issueにコメントさせることも可能 定期的にチームで見返し、採 IssueをCoding agnetに委任して、 用する不満を決め、Issueを整 カスタマイズファイルを更新 理 させる

56.

Copilotをいい感じに縛り上げて 良きバイブコーディングライフを!

57.

イベント告知

58.

2/28 AgentCon https://globalai.community/chapters/tokyo/events/agentcon-tokyo/

59.

3/4 JAZUG for Women https://jazug.connpass.com/event/382036/

60.

3/20 GitHub Copilot 祭り! https://azure-waigaya.connpass.com/event/384269/