Vibe-Coding で作ったアプリを 文化祭で運用した話 / The story of running an app I built with Vibe-Coding at a school festival

Transcript

1. 2025-11-12 ͕͜͜ਏ͍Α Vibe Coding LTձ Vibe-Coding Ͱ࡞ͬͨΞϓϦΛ จԽࡇͰӡ༻ͨ͠࿩ Katsuya Ogata
2. Agenda 1. ·͔ͪͶࡇͰग़లͨ͠΋ͷ 2. ΞϓϦέʔγϣϯͷ֓ཁ 3. ࣮૷ (Vibe-Coding) 4. ݁Ռ 5. ࠔͬͨ͜ͱ/ྑ͔ͬͨ͜ͱ 6. ·ͱΊ
3. 1. ·͔ͪͶࡇͰग़లͨ͠΋ͷ
4. ·͔ͪͶࡇͰग़లͨ͠΋ͷ ԰֎ɾ԰಺ܕͷṖղ͖ ԰಺ܕͷνϥγ ԰֎ܕͷνϥγ
5. ·͔ͪͶࡇͰग़లͨ͠΋ͷ ԰֎ɾ԰಺ܕͷṖղ͖ ԰಺ܕͷνϥγ ԰֎ܕͷνϥγ
6. 2. ΞϓϦέʔγϣϯͷ֓ཁ
7. ΞϓϦέʔγϣϯͷ֓ཁ ԰֎୳ݕܕṖղ͖ (https://outdoor.machikane-2025.i-maker.org)
8. ΞϓϦέʔγϣϯͷ֓ཁ ԰֎୳ݕܕṖղ͖ (https://outdoor.machikane-2025.i-maker.org) • Ṗղ͖ػೳ • ౴͑Λॻ͍ͨΒਖ਼ޡ൑ఆΛߦ͏ • ਐḿػೳ • શ4ষ͋ΓɺԿνʔϜ͕ͦͷষ·ͰਐΜͰ͍Δ͔Λه࿥ɾදࣔ • ϒϥ΢βΛམͱͨ͠ޙ΋ετϨʔδ͔ΒਐḿΛ෮ݩ͢Δ
9. 3. ࣮૷ (Vibe-Coding)
10. νʔϜߏ੒ • ͓͕ͨ(PM, Ṗղ͖ͷ಺༰ΛΆͪΆͪೖྗ) • Claude Code (designer, programmer) • Cursor (SRE) • Gemini CLI (browser) • Ṗղ͖࡞੒ (i.makerͷϝϯόʔ)
11. ࣮૷ৄࡉ Full-Vibe-Coding • ԰಺ͷํ͸1ϲ݄લ͔Βɺ԰֎ͷํ͸1िؒ͘Β͍Ͱ։ൃ • σβΠϯ͔ΒCloud fl are΁ͷσϓϩΠ·ͰશͯΛVibe-Coding • جຊతͳ࣮૷͸શͯClaude Code • CursorΛ༻͍ͯMCPܦ༝ͰCloud fl are΁σϓϩΠ
12. Πϯϑϥ • 13ͷMCPΛެ։͍ͯ͠Δ • https://developers.cloud fl are.com/agents/model-context-protocol/mcp-servers- for-cloud fl are/ • Workers Bindings ServerΛར༻ • Workers • KV (key-valueͷσʔλετΞ) • R2 (ΦϒδΣΫτετϨʔδ) • D1 (αʔόʔϨεSQL) ࠓճͷΞϓϦέʔγϣϯͷΠϯϑϥ
13. 4. ݁Ռ
14. དྷ٬ऀ਺ / ച্ https://outdoor.machikane-2025.i-maker.org/metrics • ԰֎Ṗղ͖ΊͪΌͪ͘Ό޷ධͰͨ͠(΋ͪΖΜṖղ͖ͷΫΦϦςΟͷ͓͔͛) • ച্ • 300 * 589 =176,700 (JPY) • ϝϯόʔ͋ͨΓͷചΓ্͛ͩͬͨΒશαʔΫϧͷதͰ1Ґͷࣗ৴͕͋Δ(԰಺ͷച্ؚΊͯ)
15. ϝτϦΫε ·͔ͪͶࡇظؒதͷKV
16. (༨ஊ) Cloud fl are͸͍͍ͧ • ͜Μ͚ͩͷΞΫηε਺ͰɺWebαʔόʔͱσʔλετΞΛϗετͯ͠ແྉ • KVͷΞΫηε਺͸ແྉ࿮ΧπΧπ͕ͩͬͨͳ͔ͥ଱͑ͨ • Cloud fl are Bindingsͱ͍͏ڧྗͳػೳ • https://developers.cloud fl are.com/workers/runtime-apis/bindings/ • CI/CD͕؆୯ʹ૊ΊΔ • wrangler deployͰ؆୯ʹϩʔΧϧ͔ΒσϓϩΠ
17. 5. ࠔͬͨ͜ͱ
18. ࠔͬͨ͜ͱ • ಛʹͳ͍ • ͕ɺ • ΍͸Γ٧·ͬͨ࣌ʹσόοά͕Ͱ͖ͳ͍ • Vite+HTML+JavascriptͰ࠷ॳ͸ॻ͍͕ͯͨɺṖͷΤϥʔʹ٧·ͬͯNext.jsʹ Ҡߦ͠·ͨ͠ • ͋ͱ͸ظؒͰσʔλΛߜΓࠐΉػೳ࣮૷ͷ࣌ʹ2024೥ͩͱࢥͬͯͯҤ͑·ͨ͠
19. ྑ͔ͬͨ͜ͱ • ΍͸Γ࣮૷͕ૣ͍ • ूத͍ͨ͠෦෼ʹूதͰ͖Δͷ͕ྑ͍ • ͋Δఔ౓ಡΈ΍͍͢ίʔυΛॻ͍ͯ͘ΕΔͷͰख௚͠͠΍͍͢ • ͨͩɺେن໛ͳΞϓϦʹͳΔͱ΋ͬͱ޻෉͕ඞཁ
20. ޻෉఺ • ಛʹͳ͠ • ӡΑ͘ྑ͍ग़ྗΛҾ͚ͨҹ৅ • ڧ͍͍ͯ͏ͳΒٕज़બఆ • Next.jsͰϑϧελοΫ։ൃ • Cloud fl are·ͰҰ؏࣮ͯ͠૷ͯ͠΋Β͏ • AI͕σόοά͠΍͘͢ͳΔ͠ɺίϯςΩετ΋খͯ͘͞ࡁΉ • ݴޠͷεΠονϯάίετ͕ͳ͍ • Cloud fl are Bindingsͷ͓͔͛ͰϦιʔεؒͷ઀ଓ͕༰қ • Wranglerͷ͓͔͛ͰϩʔΧϧͰΤϛϡϨʔλΛ࢖͑ΔͷͰɺσϓϩΠޙͷࣄނ͕ͳ͍
21. 6.·ͱΊ
22. ·ͱΊ • ୹ظؒͰগͳ͍ਓ਺ͰՁ஋Λಧ͚ΒΕΔ • ͨͩɺେਓ਺ɾେن໛ͳΞϓϦέʔγϣϯʹରͯ͠͸ऑ͍ • Vibe-CodingͰॻ͍ͨͱͯ͠΋Ձ஋͸ಧ͚ΒΕΔ͠ɺӡ༻Ͱ͖Δ • ੜଘऀόΠΞεɺ݁Ռ࿦ɺͰ΋ྑ͍ܦݧʹͳͬͨ • ࠓճ࣮૷ͨ͠ίʔυ • ԰಺ɾ԰֎ɾυΩϡϝϯτɾޙ೔ऩूͨ͠σʔλɾσʔλͷՄࢹԽશͯΛ1ͭͷ ϨϙδτϦͰ؅ཧͯ͠·͢ • https://github.com/ogatakatsuya/machikane-2025
23. (༨ஊ) ԰಺ܕ • ԰಺͸ϋΠϒϦουͰ։ൃ͠·ͨ͠ • ϥϯΩϯάػೳ౳ɺ࣮૷ΛϛεΔͱམͪͪΌ͏Α͏ͳػೳ͸खಈ࣮૷ • ΠϯϑϥपΓ΋IaC͸͋Γ·͕͢ϛεΔͱා͍ͷͰखಈͰ࡞Γ·ͨ͠ • ϑϩϯτΤϯυͷ೉͍͠ػೳ΋खಈͰ࣮૷ͯ͠΋Β͍·ͨ͠ • 2ਓͰ։ൃ • όοΫΤϯυɾΠϯϑϥɾҰ෦ϑϩϯτΤϯυ • ϑϩϯτΤϯυ • શͯ΋ͷΕΆͰυΩϡϝϯτ΋ஞ࣍AIʹߋ৽ͤ͞Δ • ࠶։࣌͸υΩϡϝϯτΛಡΜͰ࣮૷࠶։ͱ͍͏ײ͡