GitHub Copilotでバックエンドのバイブコーディングを極めた話
2K Views
October 12, 25
スライド概要
GitHub CopilotでバックエンドのVibe Codingを極めるイベントを実施した中で得た知見をまとめ、GitHub Copilotのカスタム方法やTipsをまとめました
Tech Boost Summit 2025（https://mct-summit.jp/sessions/session-013）の登壇スライドです
バックエンドエンジニア。 主にC#, Azure, Terraform, GitHub Actionsをいじっています。Microsoft MVP for Azure, AI Platform
関連スライド
各ページのテキスト
GitHub Copilotで バックエンドのVibe Codingを 極めた話 Tech Boost Summit 2025 2025/10/12 Maki Nagase
Maki Nagase @yuma_prog • My Info • 株式会社ゼンアーキテクツ所属 • Microsoft MVP for Azure, Azure AI Foundry • GitHub Star • 運営・主催コミュニティ • JAZUG(Japan Azure User Group), Azureわいがや会, GitHub Vibe Riders, Hack Everything., AI駆動開発勉強会, GitHub dockyard, AOAI Dev Day • 好きな技術 • Azure PaaS, Azure AI, C#, Terraform, GitHub Copilot • 趣味 • 技術コミュニティ,アニメ,キャンプ,しゃぼん玉,法螺貝, サバゲ,などなど
GitHub Vibe Riders – YouTube GitHub Copilotの更新情報キャッチアッ プや検証をゆるーくライブ配信するチャ ンネル Sora 2のおかげでショート動画デビュー できました！ GitHub Universe は現地 サンフランシスコ に行く予定なので、 そこから配信もしたい！
今日の話の背景
VS Code Meetup と GitHub dockyard のコラ ボイベント VS CodeのGitHub Copilotを使って 1時間でイベントのアンケート アプリを作成するライブVibe Codingを実施 https://www.youtube.com/live/pOYUgAn4qZM
アンケートアプリの構成 GitHub Actions HTTPトリガー Azure Static Web Apps Azure Functions Azure Cosmos DB
構成図 事前準備済み フロントエンドチーム バックエンドチーム HTTPトリガー GitHub Actions Azure Static Web Apps Azure Functions Azure Cosmos DB リソースは事前にデプロイ済み コードを書いてプッシュすればStatic Web Apps と Azure Functions にデプロイされる状態から スタート
バックエンドとフロント エンドに分かれて実装 【ルール】 GitHub Copilotに自然言語 で指示、コードは基本触 らない
バックエンドとフロント エンドに分かれて実装 【ルール】 GitHub Copilotに自然言語 で指示、コードは基本触 らない →フロントはアンケート フォームまで完成！
バックエンドとフロント エンドに分かれて実装 【ルール】 GitHub Copilotに自然言語 で指示、コードは基本触 らない →フロントはアンケート フォームまで完成！ バックエンドは 何の成果も得られませんでしたあああ！！！！
敗因をふりかえり • Cosmos DB側の構成（Partition Key）を、GitHub Copilotが確認せず推測で決めてコー ドを書いていた • Partition Key が異なるというエラーが出ていた • このエラーはCopilotに任せているだけでは解消できない
敗因をふりかえり • Cosmos DB側の構成（Partition Key）を、GitHub Copilotが確認せず推測で決めてコー ドを書いていた • Partition Key が異なるというエラーが出ていた • このエラーはCopilotに任せているだけでは解消できない Cosmos DBの構成を把握できていないことが一番の問題だった
バックエンドのVibe Codingの難しさ フロントエンド • コード内ですべて完結する（今回の ケースは） バックエンド • コードだけではコンテキストが不足し ている • コード外のリソースの構成がコードに 影響する
バックエンドのVibe Codingの難しさ フロントエンド • コード内ですべて完結する（今回の ケースは） バックエンド • コードだけではコンテキストが不足し ている • コード外のリソースの構成がコードに 影響する 「コード外のコンテキスト」＝「インフラ側のリソース情報」を GitHub Copilotが自律的に取得できればうまくいくのでは？
インフラ側の情報をコンテキストと して与える方法 1. IaC （Infrastructure as Code） 2. MCPやコマンド • インフラの状態をコードで管理する方 法 • インフラの構成を取得可能な MCP、も しくはコマンドを Agent に利用させる • インフラの情報をコード内に含めるこ とができる • GitHub Copilotがそのコードを参照でき ればインフラを考慮した提案が可能
インフラ側の情報をコンテキストと して与える方法 1. IaC （Infrastructure as Code） • インフラの状態をコードで管理する方 法 • インフラの情報をコード内に含めるこ とができる • GitHub Copilotがそのコードを参照でき ればインフラを考慮した提案が可能 以下の条件を満たす必要がある • インフラがIaC化されている • IaCの定義が同じリポジトリにあ る（必須ではないが） • 開発者とインフラ担当者の 権限を分離している場合な どはこの構成が難しい
インフラ側の情報をコンテキストと して与える方法 1. IaC （Infrastructure as Code） 2. MCPやコマンド • インフラの状態をコードで管理する方 法 • インフラの構成を取得可能な MCP、も しくはコマンドを Agent に利用させる • インフラの情報をコード内に含めるこ とができる • GitHub Copilotがそのコードを参照でき ればインフラを考慮した提案が可能 適用できるケースが限られる IaC化されていなくても実践可能 MCP Serverさえ提供されていればイン フラベンダーが異なっても同じこと ができる ＝汎用性が高い
今回のチャレンジ前に 仕込んでいたこと 1. Microsoft Learn MCP Serverの導入 • 入手 • https://github.com/microsoftdocs/mcp • 機能 • GitHub CopilotにMicrosoft 公式ドキュメントを参照させられる • 目的 • Azure Functionsのサンプルコードやベストプラクティスを自律的に取得してもらい、良 い感じのコードを提案させること • 結果 • しっかり機能はしていたが、Learnの内容をベースにエラーの原因を突き止める、とい うところまではいかなかった
今回のチャレンジ前に 仕込んでいたこと 2. GitHub Copilot for Azure 拡張 • 入手 • https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azure-githubcopilot • 機能 • Azureリソースの質問やAzure CLIコマンド生成、デプロイができる • 目的 • Azure Functionsのベストプラクティスを自律的に取得してもらい、良い感じのコードを 提案させること • 結果 • ベストプラクティスの取得では動いていた
今回のチャレンジ前に 仕込んでいたこと 3. Azure MCP Server • 入手 • https://github.com/microsoft/mcp/tree/main/servers/Azure.Mcp.Server • 機能 • 自分の環境のAzure リソースにアクセスできる • 目的 • Azure上のリソース構成（特にCosmos DBの構成情報）を自律的に取得してくること • 結果 • 呼ばれてほしい場面で呼ばれていなかった
今回のチャレンジ前に 仕込んでいたこと 3. Azure MCP Server • 入手 • https://github.com/microsoft/mcp/tree/main/servers/Azure.Mcp.Server • 機能 • 自分の環境のAzure リソースにアクセスできる • 目的 • Azure上のリソース構成（特にCosmos DBの構成情報）を自律的に取得してくること • 結果 • 呼ばれてほしい場面で呼ばれていなかった ここが意図通りに呼ばれなかったのが最大の敗因
２回戦
配信イベントで再挑戦 「Azureわいがや会」（モブプロ形 式で気になる技術を試す勉強会） にて、 １時間でバックエンドを完成させ るチャレンジの２回戦を実施！ https://azure-waigaya.connpass.com/event/360954/
前回の失敗をふりかり コード外のコンテキスト、特にCosmos DBの構成情報を取得できていなかった 【改善ポイント】 • 適切な場面でAzure MCP Serverが呼ばれてCosmos DBの構成情報を取得してくる よう工夫する • Azure MCP Serverがうまく動かないときのためにAzure CLIを実行して情報を取得 するという逃げ道を用意する 【こだわりポイント】 • 汎用性、導入しやすさ（最小限の準備工数）
設定した内容 • 前回同様 • Microsoft Learn MCP Server • GitHub Copilot for Azure 拡張 • Azure MCP Server • 今回追加 • Custom instructions の改良
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 側の構成を把握してか ら実装を考えてください" }, （省略） ]
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 側の構成を把握してか ら実装を考えてください" }, （省略） ] コンテキストが不足している場合は 聞き返してほしいため
結果は…
もう一回遊べるドン 惨敗 一週間後に３回戦目 （Azureわいがや会としては２ 戦目）を開催することに…
敗因 • エラーが解決できずタイムオーバーに • 主なエラーの原因はAzure Cosmos DB SDKの不具合 • 現状の微妙な仕様の問題（参照しているJSON系のパッケージ関連の問 題） • バージョンが上がってこの問題が解消されればうまくいっていたかも しかし、そこに至るまでの過程でごたついていて、再現度が低そうだった →再度原因分析
Azure の認証問題＝Azure MCP Server/Azure CLI が使えなかった • Agent Mode でどこから Azure の認証情報を取っているかわからず、希望のアカウントで認証できなかった Custom instructions の無視 • 「Azure 側の構成を把握してから実装」という Custom instructions を無視して Agent Mode が実装を始める 手順の揺らぎ • 「まずは手順を示して、許可が出たら実装して」のように指示しても、勝手に実装を始める Copilotの不具合 • その日はGeminiもClaude Sonnetもエラーになるという謎の外れ日で、GPT-4.1しか使えない状態だった Toolの整理不足 • Agent Mode で設定されている Tool が 128 を超えており、何かの拍子に選択解除した Tool が再選択される、など の不具合も発生していたため、リクエストを投げるたびに Tool 整理のロスタイムが発生していた
改善策① Azure の認証問題 Agent Mode でどこ から Azure の認証情 報を取っているかわ からず、希望のアカ ウントで認証できな かった GitHub Copilot for Azure 拡張については @azure 認証の状態を知りたい と Chat で聞くとどのアカウントでログインしていてどの サブスクリプションを参照しているか確認・変更できた
改善策② • Custom instructions の無視 • 手順の揺らぎ • Toolの整理不足 Custom Chat Modeを作成 • 使用する MCP Server の Tool を絞る • Custom instructions で指示していた内容を詳細化
Custom Chat Modeの設定方法 ワークスペースごとに設定したい場合 • .github/chatmodes/{{チャットモード名}}.chatmode.md を作成
Custom Chat Modeの設定方法 複数ワークスペースで使用したい場合 • ユーザープロファイルに保存 • Chat Mode作成時に「User Data Folder」 を選択
Custom Chat Modeの記述方法 (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-githubcopilot/azure_get_azure_verified_module', 'ms-azuretools.vscode-azure-githubcopilot/azure_summarize_topic', 'ms-azuretools.vscode-azure-githubcopilot/azure_query_azure_resource_graph', 'ms-azuretools.vscode-azure-githubcopilot/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-githubcopilot/azure_get_dotnet_template_tags', 'ms-azuretools.vscode-azure-githubcopilot/azure_get_dotnet_templates_for_tag', 'ms-vscode.vscode-websearchforcopilot/websearch'] --https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md
Custom Chat Modeの記述方法 (azure.chatmode.md) --- 処理の流れを指示 https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md
Custom Chat Modeの記述方法 (azure.chatmode.md) --- 出力形式を設定 https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md
Custom Chat Modeの記述方法 (azure.chatmode.md) --- https://github.com/yuma-722/azurewaigaya-share/blob/main/250709-backend-vibecoding/azure.chatmode.md
Custom Chat Modeで特に意識した 指示 Markdown のチェックリスト形式でタスクを書き出すようにする • 当時Todoが未実装だったため • 現在は不要 ローカル実行時は接続文字列で接続するようにする • ローカルではデバッグが難しい形で書かれてしまうことがあるため（Azure特有かも？） パッケージのインストールは必ずコマンドで実行する • パッケージファイルに誤ったバージョン名などで直書きしようとしてエラーになるケース が多いため
Custom Chat Modeの記述方法 イベント時は@taiga_kk322さんが公開しているこちらのチャットモードをベースに作成 （イベントの直前にちょうど公開されていたため使用） https://github.com/taiga-K/github-copilotrules/blob/main/.github/chatmodes/taskmode.chatmode.md おすすめ：コミュニティベースでまとめられているawesome-copilot https://github.com/github/awesome-copilot/tree/main/chatmodes →このリポジトリをベースに指示を修正していく
結果 40分ほどで「アンケートフォームのバックエンド作成」が完了！ • といってもほとんどの時間をAzureの認証情報問題に費やしていた • Azure CLIでもうまくいかず、結局Cosmos DBの設定をスクショしてCopilot Chatに投げた ２回戦までと大きく異なるのはカスタムチャットモードの指示を守って動いていたこと • Cosmos DBの構成についても、指示し忘れていることに気付けるような動きをしてくれていた • 勝手にインフラ側の構成（今回は主に Cosmos DB の Partition Key）を捏造してコードを書き始める、 という挙動がなくなったのは大きな一歩 • 知らぬ間に捏造されたインフラ側の情報をもとにコードを書かれて動かない状態になるのを回避
バックエンドでバイブコーディング を極めるコツ インフラ側の情報を自動で取ってくるか、人間に聞くように設定する • GitHub CopilotでいうCustom Chat Modeなどでこの指示を与える • コマンドもしくはMCP Serverを利用してシームレスにインフラ側の情報を取得可能にする • できない場合はAgent 側から設計段階で人間にヒアリングするよう指示する Copilot Chatに役割やワークフローを守らせたい場合は Custom instructions ではなくCustom Chat Modeを利用する • Agentが使用するToolとプロンプトを紐づけて管理でき、複数チャットモードの切り替えも容易なため 適切なモデルで実行する • ツール選択がうまいモデル、タスクに対する思考の深さがちょうどいいモデル
とはいえこれだけだとガチャ 成果物のブレが大きい
そこでSpec-Driven • 仕様(Spec)を先にがっちり固めてからAIにコード生成させる方法 • Vibe Coding流行時に一部ユーザーがすでに実践していたが、Kiroの登場で名前がついて 一気に広まった • ドキュメントがしっかりしているので成果物のブレが抑えられる • チームで仕様を共有しやすいというメリットも（従来のVibe Codingでは個人の中で思考が閉 じてしまいがちだった） • 以下をベースにカスタムしていくのがおすすめ • https://github.com/github/awesome-copilot/blob/main/instructions/spec-driven-workflowv1.instructions.md • https://github.com/github/spec-kit
開発者体験をさらに向上させるTips
GitHub Copilotに自分好みの人格を与えよう あのちょまどさんも実践！ https://x.com/chomado/status/1950750140664594682
人格を与えるメリット • やる気がでる • 楽しく開発・トラブルシュートできる • 残念な回答が返ってきても優しい気持ちで許せる • （人格によっては）自然と敬語を使わなくなりキータイプが減って時短にな る
人格を与えるメリット • やる気がでる • 楽しく開発・トラブルシュートできる • 残念な回答が返ってきても優しい気持ちで許せる • （人格によっては）自然と敬語を使わなくなりキータイプが減って時短にな る 開発者体験が向上！
人格の与え方 • いくつかあるが、User DataのCustom instructionsに設定するとどのプロジェクトでも 共通して使える お仕事で使うときは、カスタム人格バレに気を付けながら 楽しもう https://code.visualstudio.com/docs/copilot/customization/custom-instructions
人格カスタムと コンテキストエンジニアリングで よきVibe Codingライフを！