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

by Ogata Katsuya

Slide 1

Slide 1 text

2025-11-12 ͕͜͜ਏ͍Α Vibe Coding LTձ Vibe-Coding Ͱ࡞ͬͨΞϓϦΛ จԽࡇͰӡ༻ͨ͠࿩ Katsuya Ogata

Slide 2

Slide 2 text

Agenda 1. ·͔ͪͶࡇͰग़లͨ͠΋ͷ 2. ΞϓϦέʔγϣϯͷ֓ཁ 3. ࣮૷ (Vibe-Coding) 4. ݁Ռ 5. ࠔͬͨ͜ͱ/ྑ͔ͬͨ͜ͱ 6. ·ͱΊ

Slide 3

Slide 3 text

1. ·͔ͪͶࡇͰग़లͨ͠΋ͷ

Slide 4

Slide 4 text

·͔ͪͶࡇͰग़లͨ͠΋ͷ ԰֎ɾ԰಺ܕͷṖղ͖ ԰಺ܕͷνϥγ ԰֎ܕͷνϥγ

Slide 5

Slide 5 text

·͔ͪͶࡇͰग़లͨ͠΋ͷ ԰֎ɾ԰಺ܕͷṖղ͖ ԰಺ܕͷνϥγ ԰֎ܕͷνϥγ

Slide 6

Slide 6 text

2. ΞϓϦέʔγϣϯͷ֓ཁ

Slide 7

Slide 7 text

ΞϓϦέʔγϣϯͷ֓ཁ ԰֎୳ݕܕṖղ͖ (https://outdoor.machikane-2025.i-maker.org)

Slide 8

Slide 8 text

ΞϓϦέʔγϣϯͷ֓ཁ ԰֎୳ݕܕṖղ͖ (https://outdoor.machikane-2025.i-maker.org) • Ṗղ͖ػೳ • ౴͑Λॻ͍ͨΒਖ਼ޡ൑ఆΛߦ͏ • ਐḿػೳ • શ4ষ͋ΓɺԿνʔϜ͕ͦͷষ·ͰਐΜͰ͍Δ͔Λه࿥ɾදࣔ • ϒϥ΢βΛམͱͨ͠ޙ΋ετϨʔδ͔ΒਐḿΛ෮ݩ͢Δ

Slide 9

Slide 9 text

3. ࣮૷ (Vibe-Coding)

Slide 10

Slide 10 text

νʔϜߏ੒ • ͓͕ͨ(PM, Ṗղ͖ͷ಺༰ΛΆͪΆͪೖྗ) • Claude Code (designer, programmer) • Cursor (SRE) • Gemini CLI (browser) • Ṗղ͖࡞੒ (i.makerͷϝϯόʔ)

Slide 11

Slide 11 text

࣮૷ৄࡉ Full-Vibe-Coding • ԰಺ͷํ͸1ϲ݄લ͔Βɺ԰֎ͷํ͸1िؒ͘Β͍Ͱ։ൃ • σβΠϯ͔ΒCloud fl are΁ͷσϓϩΠ·ͰશͯΛVibe-Coding • جຊతͳ࣮૷͸શͯClaude Code • CursorΛ༻͍ͯMCPܦ༝ͰCloud fl are΁σϓϩΠ

Slide 12

Slide 12 text

Πϯϑϥ • 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) ࠓճͷΞϓϦέʔγϣϯͷΠϯϑϥ

Slide 13

Slide 13 text

4. ݁Ռ

Slide 14

Slide 14 text

དྷ٬ऀ਺ / ച্ https://outdoor.machikane-2025.i-maker.org/metrics • ԰֎Ṗղ͖ΊͪΌͪ͘Ό޷ධͰͨ͠(΋ͪΖΜṖղ͖ͷΫΦϦςΟͷ͓͔͛) • ച্ • 300 * 589 =176,700 (JPY) • ϝϯόʔ͋ͨΓͷചΓ্͛ͩͬͨΒશαʔΫϧͷதͰ1Ґͷࣗ৴͕͋Δ(԰಺ͷച্ؚΊͯ)

Slide 15

Slide 15 text

ϝτϦΫε ·͔ͪͶࡇظؒதͷKV

Slide 16

Slide 16 text

(༨ஊ) Cloud fl are͸͍͍ͧ • ͜Μ͚ͩͷΞΫηε਺ͰɺWebαʔόʔͱσʔλετΞΛϗετͯ͠ແྉ • KVͷΞΫηε਺͸ແྉ࿮ΧπΧπ͕ͩͬͨͳ͔ͥ଱͑ͨ • Cloud fl are Bindingsͱ͍͏ڧྗͳػೳ • https://developers.cloud fl are.com/workers/runtime-apis/bindings/ • CI/CD͕؆୯ʹ૊ΊΔ • wrangler deployͰ؆୯ʹϩʔΧϧ͔ΒσϓϩΠ

Slide 17

Slide 17 text

5. ࠔͬͨ͜ͱ

Slide 18

Slide 18 text

ࠔͬͨ͜ͱ • ಛʹͳ͍ • ͕ɺ • ΍͸Γ٧·ͬͨ࣌ʹσόοά͕Ͱ͖ͳ͍ • Vite+HTML+JavascriptͰ࠷ॳ͸ॻ͍͕ͯͨɺṖͷΤϥʔʹ٧·ͬͯNext.jsʹ Ҡߦ͠·ͨ͠ • ͋ͱ͸ظؒͰσʔλΛߜΓࠐΉػೳ࣮૷ͷ࣌ʹ2024೥ͩͱࢥͬͯͯҤ͑·ͨ͠

Slide 19

Slide 19 text

ྑ͔ͬͨ͜ͱ • ΍͸Γ࣮૷͕ૣ͍ • ूத͍ͨ͠෦෼ʹूதͰ͖Δͷ͕ྑ͍ • ͋Δఔ౓ಡΈ΍͍͢ίʔυΛॻ͍ͯ͘ΕΔͷͰख௚͠͠΍͍͢ • ͨͩɺେن໛ͳΞϓϦʹͳΔͱ΋ͬͱ޻෉͕ඞཁ

Slide 20

Slide 20 text

޻෉఺ • ಛʹͳ͠ • ӡΑ͘ྑ͍ग़ྗΛҾ͚ͨҹ৅ • ڧ͍͍ͯ͏ͳΒٕज़બఆ • Next.jsͰϑϧελοΫ։ൃ • Cloud fl are·ͰҰ؏࣮ͯ͠૷ͯ͠΋Β͏ • AI͕σόοά͠΍͘͢ͳΔ͠ɺίϯςΩετ΋খͯ͘͞ࡁΉ • ݴޠͷεΠονϯάίετ͕ͳ͍ • Cloud fl are Bindingsͷ͓͔͛ͰϦιʔεؒͷ઀ଓ͕༰қ • Wranglerͷ͓͔͛ͰϩʔΧϧͰΤϛϡϨʔλΛ࢖͑ΔͷͰɺσϓϩΠޙͷࣄނ͕ͳ͍

Slide 21

Slide 21 text

6.·ͱΊ

Slide 22

Slide 22 text

·ͱΊ • ୹ظؒͰগͳ͍ਓ਺ͰՁ஋Λಧ͚ΒΕΔ • ͨͩɺେਓ਺ɾେن໛ͳΞϓϦέʔγϣϯʹରͯ͠͸ऑ͍ • Vibe-CodingͰॻ͍ͨͱͯ͠΋Ձ஋͸ಧ͚ΒΕΔ͠ɺӡ༻Ͱ͖Δ • ੜଘऀόΠΞεɺ݁Ռ࿦ɺͰ΋ྑ͍ܦݧʹͳͬͨ • ࠓճ࣮૷ͨ͠ίʔυ • ԰಺ɾ԰֎ɾυΩϡϝϯτɾޙ೔ऩूͨ͠σʔλɾσʔλͷՄࢹԽશͯΛ1ͭͷ ϨϙδτϦͰ؅ཧͯ͠·͢ • https://github.com/ogatakatsuya/machikane-2025

Slide 23

Slide 23 text

(༨ஊ) ԰಺ܕ • ԰಺͸ϋΠϒϦουͰ։ൃ͠·ͨ͠ • ϥϯΩϯάػೳ౳ɺ࣮૷ΛϛεΔͱམͪͪΌ͏Α͏ͳػೳ͸खಈ࣮૷ • ΠϯϑϥपΓ΋IaC͸͋Γ·͕͢ϛεΔͱා͍ͷͰखಈͰ࡞Γ·ͨ͠ • ϑϩϯτΤϯυͷ೉͍͠ػೳ΋खಈͰ࣮૷ͯ͠΋Β͍·ͨ͠ • 2ਓͰ։ൃ • όοΫΤϯυɾΠϯϑϥɾҰ෦ϑϩϯτΤϯυ • ϑϩϯτΤϯυ • શͯ΋ͷΕΆͰυΩϡϝϯτ΋ஞ࣍AIʹߋ৽ͤ͞Δ • ࠶։࣌͸υΩϡϝϯτΛಡΜͰ࣮૷࠶։ͱ͍͏ײ͡