Web サイトをプロンプトだけで作った話

Transcript

1. Web サイトをプロンプト だけで作った話 2025.11.7 @ NEOSYSTEM 東京本社 Satoru Fujimori / KJ Systems, Inc.
2. ✅ 藤森 智 / Satoru Fujimori 株式会社ケイジェイシステムズ代表 株式会社ゼンアーキテクツ メンバー ✅ やっていること 各種開発支援（Azure, モバイルアプリ） C#, Python, Flutter ✅ 取り組んでいるプロジェクト 古典データ検索サービス 　「日本文学Web図書館」 電子書籍の生成サービス など About me
3. アジェンダ 🌿ヨガ予約サイト 🤖Coding Agent とは ⚙️GitHub Copilot と Coding Agent の違い 🗂️GitHub Issue 主導開発 🧾.github/copilot-instructions.md ✍️issue を書いてみる 💡issue を書く上でのコツ 🎁おまけ 🚀まとめ
4. 🌿ヨガ予約サイト ユーザーページ 管理者ページ
5. Azure Function Azure AD B2C アーキテクチャ図 SendGrid Flutter (Web) 管理者ページ カレンダー イベントの予約 お問い合わせ イベントの管理 予約の管理 ユーザーページ Cosmos DB
6. 🤖 Coding Agent とは GitHub Copilot Chat / Workspace 内で動作するエージェント Issueの内容を理解して自動でコードを生成・修正 リポジトリ全体の構造や依存関係を考慮して提案 Issueを読んで動くAIエンジニアのような存在 開発者は「何をしたいか」を書くだけでOK
7. ⚙️GitHub Copilot と Coding Agent の違い GitHub Copilot コード補完や行単位の提案を行う エディタ上で開発者と対話しながら支援 目の前のファイルに集中して提案 ゴールは「コーディングの効率化」 Coding Agent Issueをもとにタスクを自動で実装 リポジトリ全体の構造・依存関係を理解して動く より広い文脈で判断・生成を行う ゴールは「開発タスクの自動遂行」
8. 🗂️GitHub Issue 主導開発 Issue の書き方 AI が理解しやすいように 明確・構造的に書く 目的（What/Why） 期待する動作（Expected behavior） 制約や前提（Constraints） 関連コード or スクリーンショット
9. 🧾.github/copilot-instructions.md プロジェクト全体の開発方針・ルールをAIに共有するファイル Copilot / Coding Agent で有効 Copilot（エディタ補完）でも有効 AI に「このプロジェクトではどう書くか」を理解させる 例：使用するライブラリ、命名規則、エラーハンドリング方針など チーム全員と AI が共通の文化・文脈を共有できる AI がブレない提案をするための「開発の憲法」
10. ✍️issueを書いてみる issue を書く copilot をレビュアに割り当てる copilot がプルリクを生成する
11. 💡issueを書く上でのコツ まずコードではなくドキュメントを書く 役割を分けて進める（Frontend / Backendを明確に） 自然言語で“目的”を正確に伝える 前提条件や制約を明記する ステップごとに出力を検証して進める Issue タイトルは「成果物」を表す Issue 本文に「受け入れ条件」を書く 生成されたコードは“素材”として扱う 小さな単位で Issue を分割する 完了後に成果を再利用できるよう記録する
12. 💡おまけ 💩うまくいかなかったプロンプト ✅うまくいったプロンプト
13. Issue は AI への「指示書」 AI に任せるほど、伝える力・考える力が重要 AI と共に考え、創る時代のエンジニアリングへ コードを書くのではなく AI と対話して開発を進める未来へ 🚀まとめ
14. ご清聴ありがとうございました!!