Flutterと Vibe Coding で個人開発！

第8回 FlutterGakkai

吹き出し素材は https://kage-design.com のものを使用させていただいております

Transcript

1. ୈճ
   'MVUUFS(BLLBJ
    ͱ
   Vibe Coding
   Ͱ ݸਓ։ൃʂ BR
   )BZBNJ
   4IVIFJ
2. ݸਓ։ൃɺしていますか？ ࠙਌ձͰͷௐࠪʢBRௐ΂ʣ
   ͍͔ͭ΍Γ͍͚ͨͲ͕࣌ؒͳ͍ʜ໿ AIがあるので時間がなくても作れます🙆
3. ·ͣ͸$IBU(15ʹ࣭໰ 何か良い感じに便利な Flutterアプリを沢山考えてください
4. ͢Δͱݸ͘Β͍ߟ͑ͯ͘ΕΔ IUUQTDIBUHQUDPNTIBSFCEFDCGD 
   
   
   23ίʔυҰׅεΩϟφʔ
   
   ཤྺ؅ཧ
   
   
   
   εϚʔτ5P%P
   
   श׳τϥοΧʔ
   
   
   
   ࣸਅʹࣸͬͯΔจࣈΛॠ࣌ʹϦετԽ͢Δ0$3ϝϞா
   
   
   
   1%'஫ऍˍॺ໊πʔϧ
   
   
   
   8J'J
   
   #MVFUPPUIࣗಈ੾Γସ͑πʔϧʢ"OESPJEͷΈʣ
   
   
   
   "*ͱձ࿩ֶͯ͠Ϳӳձ࿩࿅शΞϓϦ
   
   
   
   ୯ޠாϝʔΧʔ
   
   ΧϝϥऔΓࠐΈ
   
   
   
   ඵͰ෮शɿ௨஌Ͱ೔໰খςετ
   
   
   
   ίʔυεχϖοτه࿥ˍݕࡧΞϓϦ
   
   ϚΠϯυϑϧωε
   
   ݺٵτϨʔφʔ
   
   ৯ࣄϩάʴࣸਅ͔ΒࣗಈΧϩϦʔܭࢉ
   
   εϚʔτਫ෼ิڅϦϚΠϯμʔ
   
   ࢄาϧʔτه࿥ˍؾ෼ϩά
   
   "*ٞࣄ࿥ϥΠλʔʢԻ੠ˠཁ໿ʣ
   
   γϯϓϧग़ୀۈλΠϜΧʔυ 
   ΧελϜςϯϓϨʔτ੥ٻॻδΣωϨʔλʔ
   
   ΫϥΠΞϯτผϝϞ
   
   λεΫ
   
   ਐḿՄࢹԽ
   
   ϛχ7MPH࡞੒
   
   ౤ߘΞϓϦ
   
   ಗ໊͓೰Έ૬ஊܝࣔ൘ʢ"*෇͖ʣ
   
   Ұ೔Ұࣸਅ4/4ʢ࣌ؒͰফ͑Δʣ
   
   झຯϚονϯάΞϓϦʢ஍ݩɾΦϯϥΠϯରԠʣ
   
   ෦԰ͷ໛༷ସ͑γϛϡϨʔλʔʢ"3
   
   %ʣ
   
   ϖοτͷ݈߁ه࿥ΞϓϦ
   
   ಡॻϩά
   
   ཁ໿ϊʔτΞϓϦ
   
   Πϕϯτ؅ཧˍ23νΣοΫΠϯ
   
   ఱؾ༧ใ΢ΟδΣοτ
   
   ੈք࣌ܭʢෳ਺౎ࢢରԠʣ
   
   ͪΐ͍ϝϞʢϩοΫը໘ͰݟΒΕΔʣ
   
   ετοϓ΢Υον
   
   ϥοϓه࿥
   
   ΧϨϯμʔ༧ఆ؅ཧʢ(PPHMF࿈ܞʣ ͜ͷத͔ΒબΜͰ࡞ͬͨΓɺ͜ΕΛى఺ʹ࡞Γ͍ͨ΋ͷΛߟ͑ͨΓʜ
5. 猫の餌やり記録アプリの 企画書を考えてください ࣍ʹاըॻΛ࡞ͬͯ΋Β͏
6. ೣͷ㕒΍Γه࿥ΞϓϦ
   اըॻ
   ˙
   ΞϓϦ໊ʢԾʣ
   ʹΌΜϩάʢ/ZBN-PHʣ
   ʙೣͷ͝͸Μه࿥Λ؆୯ɾ࣮֬ʹʙ
   ⸻
   ˙
   എܠɾ໨త
   ଟ಄ࣂ͍ͷՈఉ΍ෳ਺ਓͰೣͷੈ࿩Λ͍ͯ͠Δ؀ڥͰ͸ɺʮೣʹ㕒Λ͔͋͛ͨͲ͏͔෼͔Βͳ͍ʯͱ͍͏τϥ ϒϧ͕ൃੜ͕ͪ͠Ͱ͢ɻ
   ·ͨɺ݈߁؅ཧͷͨΊʹ΋ɺʮ͍ͭɾͲͷ͘Β͍㕒Λ৯΂͔ͨʯͷه࿥͸ॏཁͰ͢ɻ
   ͦ͜Ͱɺ㕒΍ΓͷཤྺΛ؆୯ʹه࿥ɾڞ༗Ͱ͖ΔεϚϗΞϓϦΛ։ൃ͠ɺೣͷ݈߁ͱࣂ͍ओͷ҆৺Λαϙʔτ ͠·͢ɻ
   ⸻
   ҎԼུ IUUQTDIBUHQUDPNTIBSFFDFDBDFEGGFF
7. ೣͷ㕒΍Γه࿥ΞϓϦ
   اըॻ
   ˙
   ΞϓϦ໊ʢԾʣ
   ʹΌΜϩάʢ/ZBN-PHʣ
   ʙೣͷ͝͸Μه࿥Λ؆୯ɾ࣮֬ʹʙ
   ⸻
   ˙
   എܠɾ໨త
   ଟ಄ࣂ͍ͷՈఉ΍ෳ਺ਓͰೣͷੈ࿩Λ͍ͯ͠Δ؀ڥͰ͸ɺʮೣʹ㕒Λ͔͋͛ͨͲ͏͔෼͔Βͳ͍ʯͱ͍͏τϥ ϒϧ͕ൃੜ͕ͪ͠Ͱ͢ɻ
   ·ͨɺ݈߁؅ཧͷͨΊʹ΋ɺʮ͍ͭɾͲͷ͘Β͍㕒Λ৯΂͔ͨʯͷه࿥͸ॏཁͰ͢ɻ
   ͦ͜Ͱɺ㕒΍ΓͷཤྺΛ؆୯ʹه࿥ɾڞ༗Ͱ͖ΔεϚϗΞϓϦΛ։ൃ͠ɺೣͷ݈߁ͱࣂ͍ओͷ҆৺Λαϙʔτ ͠·͢ɻ
   ⸻
   ҎԼུ 'MVUUFSͰҎԼͷΞϓϦΛ࡞͍ͬͯͩ͘͞ɻ ௥Ճ ͓޷ΈͰػೳ΍ઃܭɾ࢖͍͍ͨύοέʔδͳͲΛ௥ه͍ͯ͘͠
8. ͲΕ΋඼࣭ʹ͋·Γࠩ͸ͳ͍΋ͷͷɺ͔͔Δख͕ؒҟͳΔ खؒ
   ଟΊ গͳΊ ແྉ ʙ ʙ
9. $MJOF
   Y
   (FNJOJ
   
   1SP
   ແྉ"1*Ωʔ
10. $VSTPS
    Y
    $MBVEF
    4POOFU
     (FNJOJͱͷੑೳࠩ͸ߕԵ͚ͭ೉͍͕ɺ$MBVEF͸Ұ౓ͷࢦࣔͰ௕͘ಈ͍ͯ͘Εָͯ
    ͲͪΒ΋ະ࣮૷΍ෆ۩߹͕݁ߏ͋ΔͷͰɺҰͭͣͭࢦࣔΛग़ͯ͠मਖ਼͍ͯ͘͠
11. Ұ൪ָΛ͍ͨ͠ͷͳΒ
    $MBVEF
    $PEF ˞ݱ࣌఺Ͱͷ࿩Ͱ͢ 1SPϓϥϯ  Ͱ
    े෼Ͱ͢
12. ϧʔϓͰλεΫ͕
    ࣮ߦͰ͖Δ͔Β $MBVEF
    $PEF
    ָ͕ͳཧ༝ DDSVOOFSͱ͍͏͜ͷҝͷ$-*΋࡞Γ·ͨ͠
    IUUQTHJUIVCDPNIZTIVDDSVOOFS
    ZBNMͰॻ͚ΔɺϨʔτϦϛοτղআ·Ͱࣗಈ଴ػʣ
13. λεΫϦετͷ࡞੒͔Βϧʔϓ࣮ߦ·Ͱ   اըॻ QMBONE ΛλεΫϦετʹม׵͠ɺUBTLNEͱͯ͠ॻ͍ͯ΋Β͏
    اըॻΛషΓ෇͚ɺʮاըॻΛ࣮૷͢ΔͨΊͷλεΫΛUBTLNEʹ೔ຊޠͷν ΣοΫϦετܗࣜͰॻ͍͍ͯͩ͘͞ʯͱࢦࣔ͢Δͱॻ͍ͯ͘Ε·͢
     UBTLNEΛख௚͢͠Δ
    εέδϡʔϧ΍কདྷతͳ࣮૷ܭըͳͲ͕ॻ͔Εͨ৔߹͸࡟আ͠·͢
     ৽ن'MVUUFSϓϩδΣΫτΛ࡞੒
    fl VUUFS
    DSFBUF
    ͷࡍʹ
    ŠFNQUZ
    ΦϓγϣϯΛ෇͚ΔͱແବͳϑΝΠϧ͕ग़ͳ ͓ͯ͘͢͢ΊͰ͢ʢҙ֎ͱ஌ΒΕ͍ͯͳ͍Φϓγϣϯʣ
14. λεΫϦετͷ࡞੒͔Βϧʔϓ࣮ߦ·Ͱ   8JEHFU#PPLϓϩδΣΫτ΋࡞੒ʢ೚ҙʣ
    $-"6%&NEʹ
    ʮ6*ίϯϙʔωϯτΛ࡞੒ɾߋ৽ͨ͠ࡍ͸
    !XJEHFU@CPPL
    ʹ൓ө͍ͯͩ͘͠͞ʯ
    ౳ͱࢦࣔ͢Δͱॻ͍ͯ͘Ε·͢ʢ΋͘͠͸UBTLNEʹλεΫͱͯ͠௥Ճʣ
    $MBVEF
    $PEF
    ͸8JEHFU#PPLͷηοτΞοϓ͕ۤखͳͷͰςϯϓϨʔτϓϩδΣ ΫτΛ༻ҙ͓ͯ͘͠ͱָͰ͢
     UBTLNEɺQMBONEɺSVOOFSZBNM
    DDSVOOFSΛ࢖͏৔߹
    Λ'MVUUFSϓϩδΣΫτ಺ʹ഑ஔͯ͠ϧʔϓ࣮ߦ
    ϧʔϓͰDMBVEFίϚϯυΛݺ΂Ε͹DDSVOOFSʹݶΒͣγΣϧεΫϦϓτ౳Ͱ΋ྑ ͍ͷͰ͕͢ɺϨʔτϦϛοτ͕དྷͨ࣌ʹ୹ظؒʹԿ౓΋࣮ߦͯ͠͠·Θͳ͍Α͏ʹ ͝஫ҙ
15. $MBVEF
    $PEF
    ͷ࢖͍ํ npm install -g @anthropic-ai/claude-code Πϯετʔϧ claude ର࿩ϞʔυΛىಈʢ$VSTPS΍$MJOFͷΑ͏ʹ౎౓ࢦࣔΛग़ͤΔϞʔυʣ claude -p "͜ͷϓϩδΣΫτΛղઆͯ͠" -—allowedTools "Read" ϓϩϯϓτΛ࣮ߦ͠ɺऴΘͬͨΒऴྃ
    ϑΝΠϧͷಡΈࠐΈͷΈڐՄ claude -p "ϦϑΝΫλϦϯά͢΂͖߲໨Λڭ͑ͯ" -c લճͷ࣮ߦ݁ՌΛҾ͖ܧ͍ͩঢ়ଶͰϓϩϯϓτΛ࣮ߦ claude -p "@task.md Λ࣮૷ͯ͠" --dangerously-skip-permissions શͯͷૢ࡞ΛڐՄͨ͠ঢ়ଶͰϓϩϯϓτΛ࣮ߦ
    :0-0Ϟʔυ
16. DDSVOOFS npm install -g @hyshu/ccrunner yolo: true steps: - type: loop steps: - type: prompt name: ImplementTask prompt: "@task.md Λ࣮૷͍ͯͩ͘͠͞" Πϯετʔϧ ˡ
    :0-0Ϟʔυ ࣗಈঝೝ Λ0/ʹ͢Δͱɺ΄ͱΜͲͷίϚϯυΛ
    $MBVEF
    $PEF
    ͕࢖͑ΔΑ͏ʹͳΔ SVOOFSZBNM
    ͷྫ
    ͻͨ͢Β$MBVEF
    $PEF
    ͕
    UBTLNE
    ͷ࣮૷ΛਐΊΔ SVOOFSZBNM
    Λ࣮ߦ ccrunner
17. yolo: true steps: - type: loop name: Process until finish marker condition: "[ ! -e finish ]" steps: - type: prompt name: ImplementTask prompt: '@task.md Λ࣮૷͍ͯͩ͘͠͞ɻҰ౓ʹશͯͷλεΫΛߦ͏ඞཁ͸͋Γ·ͤΜɻख़ߟ͠ద੾ͳ࣮૷Λ৺͕͚͍ͯͩ͘͞ɻ' - type: prompt name: Testing prompt: 'flutter analyze ͱ flutter test Λ࣮ߦ͠ɺΤϥʔ͕͋Ε͹मਖ਼͍ͯͩ͘͠͞ɻ' continuedFrom: before - type: prompt name: UpdateTask prompt: 'ݱࡏͷ࣮૷Λௐ΂ɺ task.md ʹ͋Δ࣮ࢪࡁΈͷλεΫʹνΣοΫΛೖΕ͍ͯͩ͘͞ɻશͯ׬ྃࡁΈͷηΫγϣϯ͸࡟আ͠ɺ్தܦա΍׬ྃใࠂ͸ॻ͔ͳ͍ɻ' saveResultAs: result continuedFrom: ImplementTask - type: prompt name: GitCommitPush prompt: 'git add -A ͱ git commit Λ͍ͯͩ͘͠͞' continuedFrom: before - type: prompt name: Refactroing prompt: 'ϦϑΝΫλϦϯάΛߦ͍ͬͯͩ͘͞ɻྨࣅͷ࣮૷͸Ұͭʹ·ͱΊɺ࢖ΘΕ͍ͯͳ͍Ϋϥε΍ϝιου͸࡟আ͍ͯͩ͘͠͞ɻ' - type: prompt name: Testing prompt: 'flutter analyze ͱ flutter test Λ࣮ߦ͠ɺΤϥʔ͕͋Ε͹मਖ਼͍ͯͩ͘͠͞ɻ' continuedFrom: before - type: prompt name: GitCommitPush prompt: 'git add -A ͱ git commit Λ͍ͯͩ͘͠͞' continuedFrom: before - type: command command: rm finish && rm task.md && git add -A && git commit -m "finish" ˡ
    fi OJTIͱ͍͏ϑΝΠϧ·ͨ͸σΟϨΫτϦʔ͕࡞ΒΕΔͱऴྃ͢Δ
    
    
    
    UBTLNEͷ຤ඌʹʮશͯͷ<
    >͕<Y>ʹͳͬͨΒAUPVDI
    fi OJTIAΛ࣮ߦ͢ΔʯͱՃ͍͑ͯͩ͘͞ ˢҰ౓ʹλεΫΛ࣮૷ͤ͗͢͞Δͱ඼࣭͕Լ͕ΔͷͰগͣͭ͠ߦΘͤΔ ˢ$MBVEF
    $PEF
    ͸࡞ۀਐḿΛUBTLNEʹॻ͍ͯ͘ΔͷͰγϯϓϧͳঢ়ଶΛҡ࣋ͤ͞Δ ˡ
    ࣮૷ͱϦϑΝΫλϦϯάΛަޓʹͤͯ͞ίʔυͷ૿͑ա͗Λ๷͙ SVOOFSZBNM
    ʹΑΔλεΫͷϧʔϓ࣮૷ͷྫ
18. $MBVEF
    $PEF
    ͓खܰݸਓ։ൃελΠϧ w ೔༵ʹاըॻλεΫϦετ࡞੒ɻλεΫ࣮૷ΛϧʔϓͰճ͢
    w ৸Δ
    w ࣍ͷ೔ձ͔ࣾΒؼ͖ͬͯͯ6*౳͕ྑ͍ײͩͬͨ͡Β
    λεΫϦετʹػೳ௥Ճ΍ෆ۩߹मਖ਼λεΫͳͲΛ௥Ճ
    w ৸Δ
    w ࣍ͷ೔ձ͔ࣾΒؼ͖ͬͯͨΒमਖ਼׬͍ྃͯ͠ΔͷͰλεΫϦετʹ ུ
    w ݄ʙۚͰ΄΅׬੒͢ΔͷͰɺ࢒Γͷ࡞ۀΛ౔೔ʹͯ͠׬੒
19. ͓ΘΓʹʜ੒ޭ͠΍͍͢ݸਓ։ൃͱ͸ ࣗ෼͕ཉ͍͠ͷͰʢετΞʹͳ͍͔Βʣ࡞ͬͨΞϓϦ
    ˠࣗવͱϢʔβʔ໨ઢʹͳΔ
    ɹͩ͜ΘΓ΍69 Ϣʔβʔମݧ ͕ॆ࣮͠΍͍͢
    ɹ࢖͏ػձ͕ݶఆత͗͢ͳ͚Ε͹ଟগχονͰ΋0,
    
    ૂͬͯώοτͤ͞ΔΞϓϦ͸೉қ౓͕ߴ͍ʜ
    ˠಡΈ͕౰ͨΔ֬཰͕ͦ΋ͦ΋௿͘ɺ
    ɹਓؾ͕ग़ͯ΋ࣗ෼͕࢖͏༁Ͱ͸ͳ͍ͷͰɺ"#ςετ΍Ϣʔβʔͷߦಈϩά
    ɹ͔Βਪଌ͍ͯ͘͠ඞཁ͕͋ΓɺΞϓϦ։ൃͱ͸ผͷٕज़͕ඞཁ
    ࣗ෼ͷͩ͜ΘΓΛΞϓϦʹࠐΊͯྑ͍ݸਓ։ൃϥΠϑΛ🙆
20. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ X: @aqhayami