なんコパ祝電アプリの裏側 Azureリソースを簡単に解説！

なんコパ祝電アプリの裏側 Azureリソースを簡単に解説！ JAZUG×なんでもCopilot 夏休み特大号 2025/08/16 Maki Nagase

こちらのスライドで紹介されている アプリの裏側の話です https://speakerdeck.com/ponponmikankan/20250816-zhu-dian-apurimikanside

• https://speakerdeck.com/ponponmikankan/20250816-zhu-dian-apurimikanside

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

アジェンダ 01 みかんさんのPilot視点での気づき 02 インフラ（Azure）の解説 03 まとめ

みかんさんのPilot視点での気づき

みかんさんのPilot視点での気づき みかんさんが明らかに素人の動きではなかった • スムーズにGitHub Copilotを使いこなしていてつよかった 自分以外の人のプロンプトを見るのは勉強になる • 自分では書かないプロンプトの可能性を見ることができる ふわっとしたイメージが出力の自由度を生んで逆に良かった • アイディアが明確にあるときはプロンプトをがっつり書く • まだふわっとしているときは自由度が高いふわっとしたプロンプトにする（こっち の方がAIが活きそう）

みかんさんのPilot視点での気づき フロントで使用するライブラリを指定するといい • フロントの神 ふじたさん による指示のもと、よさげなライブラリを探してGitHub Copilotへの指示に入れることに • 自由度の高いプロンプトでも、ライブラリを指定することで見栄えする見た目に 初心者はモブバイブコーディングから始めるとよさそう なった • 一つアプリを作る流れでフロントからバックエンド、インフラまで話がでてくる • フロントとバックエンドで知見共有もできそう • バイブコーディングで一つのアプリ作成にかかる時間が格段に少なくなっている今 だからこそできること！ • なんとなく全体をかじる機会になって、アプリ開発の解像度が上がりそう

インフラ側の解説

Azureリソース構成 まずはホワイトボードで整理

Azureリソース構成 こんな構成

使用したサービスの解説 Azure Cosmos DB Azure Functions Azure Static Web Apps GitHub Actions

Azure Cosmos DB for NoSQL 特徴 • とても速いAzureのデータベースサービス • 惑星規模でスケールできる！ • JSON形式でデータを保存 • 世界中にデータを分散して保存。どの国からでも同じデータに素早くアクセス • 使った分だけ課金されるので、小規模なら比較的安い 活用シーン • リアルタイム分析が必要なシステム • SNSのユーザーデータ管理 • 大量データ処理

Azure Cosmos DBの使用箇所 • 送信されたコメントの保存 ※画像は別のアプリのデータ

Azure Functions そこで「サーバーレ ス」 プログラムを実行する には、サーバーが必要 サーバーの運用には専 門知識が必要。 運用コストもかかる • クラウド側でサー バーを管理してくれ る（※サーバーがな いわけではない） Azureのサーバーレスコンピューティングリソースと言えば Azure Functions ！

Azure Functions 特徴 • サーバー管理不要。アプリを発行するだけ！ • アプリの開発に集中できる！ • 利用量に応じて自動的に処理能力を調整してくれる • 必要なときだけ自動で動くので、無駄なコストが減る • 特定の条件で動く（イベント駆動） 活用シーン • ファイルがアップロードされたときの自動処理 • 定期的なデータ処理の自動化 • Web API

Azure Functionsの使用箇所 • 送信ボタンを押すと、Static Web Apps（フロント）からAzure Functions（バックエン ド）をHTTPSで呼び出し • HTTPトリガーでAzure Functionsが動き始める • 2つの関数（Functions）が存在 • 受け取ったメッセージをCosmos DBに保存する • Cosmos DBに保存されているメッセージを検索して返す

Azure Static Web Apps 特徴 • 作ったWebサイト（HTML、CSS、JavaScriptなどの静的ファイル）を、自動で世界中 に配信 • サーバーの準備や管理は不要 • GitHubと連携させて、ファイルを更新すると自動でWebサイトが再公開される仕組 みが便利！ 活用シーン • ランディングページ • 企業のWebサイト

Azure Static Web Appsの使用箇所 • この画面のコードをデプロイ（発行）している • Azure Functionsから受け取ったCosmos DBのデータ を画面に表示 • メッセージを受け取ってAzure Functionsを呼び出し

GitHub Actions 特徴 • 作業の自動化を簡単にできるGitHubのサービス • オープンソースの自動化テンプレート（Actions）がいろいろある • GitHubでの色々なイベントをトリガーにして実行できる • GitHub CopilotのCoding agentもGitHub Actionsで動いている 活用シーン • コードを変更したら自動でテストを実行する • ファイルを更新したら自動でサイトを公開する

GitHub Actionsの使用箇所 • バックエンド（Azure Functions）のコードの修正を mainブランチにプッシュ（マージ）すると自動で Azure Functionsのリソースを更新する • フロントの修正をmainにプッシュするとAzure Static Web Appsを更新する

まとめ

初心者はモブバイブコーディング から入るといい • 1人で始めると色々わからないままAIに振り回される • 何かよくわからないけどコードがたくさん生み出される…こわい… • 知見がある人とやることで、方向性をもってAIに指示ができる • そこから知識をつけるきっかけにもなる • なにより複数人でやると楽しい！

泥酔バイブコーディングも たのしいよ • なんコパアプリ作成メンバー4人でやってみました • 何も言ってないのに帰宅後酔ったまま3名がレポート記事を挙 げていて、うち1名は泥酔中におすすめされたヴァイオレッ ト・エヴァーガーデンを夜明けまで見ていて草でした • 真面目に泥酔するな！安全な「泥酔バイブコーディング」ガ イド

• https://zenn.dev/yuma_prog/articles/deisui-vibecoding

泥酔して書いた記事よりもこっちを 読んで欲しかった… 初めてカンファレンスの実行委員長を やって得た学び ～AOAI Dev Day 2025 裏話～ バックエンドでどこまでVibe Codingでき る？最小限の設定で精度を上げる方法 with GitHub Copilot

• https://zenn.dev/yuma_prog/articles/aoaidevday2025-report
• https://zenn.dev/yuma_prog/articles/ghcp-backend-vibecoding