ぼくのかんがえたさいきょうの放置ゲームを作ってる話 / saikyou-houti-game

Transcript

1. "΅͘ͷ͔Μ͕͍͖͑ͨ͞ΐ͏ͷ์ஔήʔϜ" Λ࡞ͬͯΔ࿩ ͍ͯಘͨ஌ݟͷ࿩ by @kthatoto
2. ࣗݾ঺հ ͸ͱ ɾTwitterɿ@kthatoto ɾVue, Nuxt, TypeScript, Ruby, Rails, Go ɹFirebase, AWS ɾझຯɿLTۦಈ։ൃ, ์ஔήʔϜ ɾΤϯδχΞ6೥໨ ɾࠇ͍ը໘͔ͬ͜Αͯ͘޷͖Ͱ͢ ɾVue Composition API ͕޷͖Ͱ͢ ɹ (ྺ1೥ͪΐ͍)
3. ࿩͢಺༰ ʔ ์ஔήʔϜʹ͍ͭͯ ʔ ࣗ࡞์ஔήʔϜ(Λ໨ࢦͨ͠΋ͷ)ͷφϯόϦϯάλΠτϧͷ঺հ ʔ Vue Composition APIͷType Error͔ΒֶͿ Generics, Conditional Types, infer
4. ์ஔήʔϜ஌ͬͯ·͔͢ʁ ༗໊ͳͷ͸ Cookie Clicker খֶੜ࣌୅ͷ์ஔήʔϜ ҭͯ԰ʹ༬͚ͯΞΠεͷ๮Λચ୕όαϛͰ ڬΜͰ্Ωʔԡͬ͠ͺঢ়ଶͰֶߍ΁ (1าา͘ͱܦݧ஋1΋Β͑ΔγεςϜ) ॳΊͯLv100ʹͨ͠ϙέϞϯ͸ ΩϞϦ (ਐԽ͠ͳ͔ͬͨ) 2ສऑ࣌ؒ༡Μͩ ΅͘ΒͷΞΠϥϯυ 2018/12/28͔Βຖ೔ඞͣԿ͔͠Βͷߋ৽͕͋ͬͨήʔϜ 2021/4/30Ͱߋ৽ఀࢭɻ͔ͨ͠2019೥1݄͘Β͍͔Βࢀઓ
5. ࡞ΔʹࢸͬͨܦҢ λʔϛφϧ͕޷͖ (өըͰݟΔϋοΧʔΈ͍ͨͳײ͡) λʔϛφϧͰήʔϜ͕͍ͨ͠ʂʂʂ ୳ͦ͏ʂϛχήʔϜతͳ΋ͷ͸৭ʑ͋ͬͯ΋ ఢ౗ͯ͠Ϩϕϧ্͛ͨΓΞΠςϜूΊͨΓͯ͠΍ΓࠐΊΔήʔϜ͕ͳ͍ ࡞Ζ͏ʂʂʂ (ͪΌΜͱௐ΂ͨΒ͍͢͝લ͔Β͋ͬͨΈ͍ͨ... ࣗ෼Ͱ࡞Δ͜ͱʹมΘΓ͸ͳ͍͚Ͳ...) λʔϛφϧ಺ʹੈքΛ࡞Δɺͯ͜ͱ͸ήʔϜ໊ Termworld ͩʂ // TODO: ໊લͪΌΜͱߟ͑Δ
6. Ͳ͏͍͏ήʔϜʹ͢Δ͔ CLI͕͋ͬͯλʔϛφϧ্ͰͰ͖Δ ࣗ෼ҰਓͰෳ਺ΩϟϥΫλʔΛૢ࡞Ͱ͖Δ ʔ ήʔϜͷNPC AIͬͯऑ͔ͬͨΒ࢖͑ͳ͍͠ڧ͗ͯ͢΋ࣗ෼Ͱ ɹ ΍ͬͯΔײͳ͍͠ΧελϚΠζͰ͖ͯ΋͋Μ·Γࢥ͏௨Γ͍͔ͳ͍ શ෦ࣗ෼Ͱૢ࡞Ͱ͖ΔΑ͏ʹͯ͠͠·͑ʂ CLI͕͋Ε͹ࣗ෼ͰϓϩάϥϜ૊ΜͰ׬શʹࣗ෼Ͱෳ਺Ωϟϥૢ࡞Ͱ͖Δ Player1 Player2 Player3 Player4 ݋࢜໾ ຐ๏໾ ճ෮໾ ϐοέϧ܎ Player5 ϐοέϧ܎
7. ͭ·Γ͜͏͍͏͜ͱ ϢʔβʔPC ϒϥ΢β ݋࢜.rb ૐཿ.js $ ruby ݋࢜.rb ݋࢜ૢ࡞த... $ node ૐཿ.rb ૐཿૢ࡞த... ήʔϜαʔόʔ ௚઀ૢ࡞ ΞΧ΢ϯτσʔλ ϓϨΠϠʔσʔλ Ϟϯελʔσʔλ Ϛελʔσʔλ ϓϨΠϠʔૢ࡞ ότϧγεςϜ ΞΠςϜ࢖༻ ϞϯελʔAI etc... API API CLI JavaScript
8. Termworld 0 Α͠࡞Δͧʂ ຀৔෺ޠ΍ϧʔϯϑΝΫτϦʔͷΑ͏ʹ೶ۀܥίϯςϯπཉ͍͠ʂ ·ͣ೶ۀܥίϯςϯπͷΈͷίϚϯυΛ࡞ͬͯΈΑ͏ʂ λʔϛφϧ্Ͱ࡞෺Λҭͯͯग़ՙɺಘͨࢿۚࢿݯ Λผίϯςϯπ(๯ݥ,๵қ,ΞΠςϜ੡࡞ͱ͔ͱ͔) ͷࢿۚࢿݯͱͯ͠ѻ͑ΔΑ͏ʹ͠Α͏ʂ (ήʔϜͷϚΠΫϩαʔϏεԽͩʂ) rubyಘҙͩ͠gemͱͯ͠࡞ͬͯΈΔ gem install ͚ͩͨ͠Β༡ͼ͍ͨ ݴޠɾϥΠϒϥϦ Ruby thor (for CLI) sqlite3 (ϑΝΠϧʹσʔλॻ͖ࠐΈ) $ tw-farm show field --id=1 ┏━━━┳━━━┳━━━┓ ┃ b ┃ v ┃ ┃ ┣━━━╋━━━╋━━━┫ ┃ f ┃ v ┃ f ┃ ┗━━━┻━━━┻━━━┛ Πϝʔδ
9. Termworld 0 termworld 0-Ⅰ https://github.com/kthatoto/tw-farm--old छΛങͬͯ छΛ২͑ͯ ঢ়ଶΛ֬ೝͯ͠ ҭͬͨΒऩ֭ʂʂ ϓϩηεىಈ ์ஔ... ࣋ͪ෺֬ೝ (छͱ͓ۚ) DockerͰ༡΂·͢
10. Termworld 0 termworld 0-Ⅱ https://github.com/kthatoto/tw-farm छͷҰཡ ാͷҰཡ ാͷৄࡉΛγΣϧܳͰ֬ೝʂ ֬ೝͰ͖Δ͚ͩʂʂʂ ാ΍छʹݻ༗஋Λ࣋ͨͤͯ ඼छվྑ͕Ͱ͖ΔΑ͏ͳ ΋ͷΛߏ૝ɺ։ൃஅ೦... DockerͰ༡΂·͢
11. Termworld 0 ࢓ࣄͯͨ͠ΒཪଆͰ࡞෺͕ҭͬͯΔͷϫΫϫΫ ίϚϯυͰૢ࡞Ͱ͖Δ͠ҰݟήʔϜͬͯΘ͔ΓͮΒ͍͔Β ࢓ࣄதʹऩ֭΋Ͱ͖ͪΌ͏ ޮ཰Խ͢ΔͳΒγΣϧܳ΋ඞཁʹͳͬͯ͘Δֶָ͘͠͠΂Δ ͔͠͠ ͳΜ͔ҧ͏ɺ΍ͬͺRPGΈ͍ͨͳͷ͕͍͍ɺgem installͪ͠Ό͏͠ ݁ہ͜ͷ೶ۀܥίϯςϯπΛଞͱܨ͛Δ͜ͱͳ͘ɺ·ͯ͠΍͜Εࣗମ ࡞Γ͖Δ͜ͱΛͤͣ։ൃதࢭ
12. Termworld Ⅰ Α͠࡞Δͧʂʂ΍ͬͺ2DRPGΈ͍ͨͳͷ͕͍͍ʂ ͦΕʹͯ͠΋cursesͰͷඳը΍ͨΒΊΜͲ͍͘͞ ৭ͷѻ͍΋Կ͔ͱෆศͩ͠ ruby༻λʔϛφϧඳըϥΠϒϥϦ͔Β࡞Ζ͏ʂ https://github.com/kthatoto/term_canvas ΍ͬͺΓrubyͰͪΐͪΐ͍ͱ࡞ͬͪΌ͓͏ɺMMORPGͳγεςϜΛ࡞Γ͍͔ͨΒ αʔόʔ͕ඞཁʹͳΔͳɻͦͨ͠ΒΞΧ΢ϯτ࡞ΔͷʹϝʔϧΞυϨεೝূೖΕΑ͏ʂ ӬଓԽ͢ΔσʔλΛDBαʔόʔʹอଘͯ͠ شൃͯ͠΋͍͍σʔλΛΫϥΠΞϯτଆͰ sqlite3Ͱ࣋ͭ͜ͱʹ͠Α͏ɻ ϓϨΠϠʔΛૢ࡞͢ΔͷʹCLI΋ಋೖ͠Α͏ $ termworld user:<name> move up ࢖༻ݴޠɾϥΠϒϥϦ Ruby thor, sqlite3, Rails curses (λʔϛφϧඳը) Πϝʔδ
13. Termworld Ⅰ CLI: https://github.com/kthatoto/termworld-ruby Server: https://github.com/kthatoto/termworld-server-rails $ termworld login ϝʔϧΞυϨεೖྗ $ termworld user create PlayerΛ࡞੒ $ termworld user:<name> wakeup PlayerΛىಈ $ termworld user:<name> terminal ήʔϜλʔϛφϧΠϯλʔϑΣʔεΛىಈ खؒͱίπ͕͍ΔͷͰ Docker͚ͩͰ͸༡΂ͳ͍Ͱ͢
14. Termworld Ⅰ σϞɹhttps://github.com/kthatoto/termworld-ruby/blob/master/README.md ɹɹɹ⬛ ૢ࡞தϓϨΠϠʔ ɹɹɹ⬛ ࠨը໘ͷCLIͰૢ࡞͍ͯ͠ΔϓϨΠϠʔ ɹɹɹ⬛ Ϟϯελʔ
15. Termworld Ⅰ ήʔϜͬΆ͘ͳͬͨʂผϓϩηε͔Βૢ࡞Ͱ͖Δͷ΋͔͍͍ͬ͜ʂʂ ͔͠͠ Ϋϥεઃܭ͕ͪ͝Όͪ͝ΌʹͳͬͯԿ͕Ͳ͜ʹ͋Δ͔Θ͔ΒΜ rubyͷΈͰɺήʔϜαʔόʔ,UI,λʔϛφϧViewΛѻ͏ͷ͠ΜͲ͗͢Δ gem installͪ͠Ό͏͠ɺͦ΋ͦ΋ήʔϜαʔόʔ͕ΫϥΠΞϯτଆʹ͋Δ ࣌఺ͰΦϯϥΠϯԽͰ͖ͳ͍͡ΌΜɺ։ൃதࢭ
16. Termworld Ⅱ Α͠࡞Δͧʂʂʂ΍ͬͺΓgem install͡Όͳͯ͘όΠφϦ഑෍͍ͨ͠... CLI͸GoͰ࡞ͬͯ΍Δʂͦͨ͠Β͔ͤͬͩ͘͠αʔόʔ΋GoͰ࡞Γ͍ͨ ͣͬͱͩ͜ΘͬͯͨɺλʔϛφϧViewΛ΍ΊͯWeb Viewʹ͠Α͏ʂ Ϛελʔσʔλͱ͔࡞Βͳ͍ͱͳ ͍͍πʔϧͳ͍͔ͳ... ͳͦ͞͏ RPGπΫʔϧΈ͍ͨͳ΋ͷࣗ෼Ͱ࡞Δ͔ʂ CLI͔ΒϓϨΠϠʔपลঢ়ଶ(εςʔλε,Ϛοϓ, ଞΩϟϥͷҐஔ,࣋ͪ෺ͳͲ)ΛશͯऔಘͰ͖Δ Α͏ʹ͢Ε͹λʔϛφϧViewΫϥΠΞϯτ͸ ࡞ΕΔ͸ͣʂޙ͔Β࡞ΕΔ͜ͱ͕ॏཁ ࢖༻ݴޠɾϥΠϒϥϦ Go cobra(CLI), viper(config file), gin gorilla/websocket Nuxt, Express MongoDB, Cypress, GitHub Actions $ termworld up Πϝʔδ $ termworld attack
17. Termworld Ⅱ CLI: https://github.com/kthatoto/termworld Server: https://github.com/kthatoto/termworld-server ϝʔϧΞυϨεೝূػೳ $ termworld login ϝʔϧΞυϨεೖྗ ϩϯάϙʔϦϯάͯ͠ೝূ ͞ΕΔͷΛ଴ͭ Token෇͖URL͕ ϝʔϧͰಧ͘ GETϦΫΤετͰೝূ੒ޭΛ αʔόʔʹ௨஌ ϩϯάϙʔϦϯάͷϨεϙϯεͰ ೝূ͞Εͨ͜ͱΛऔಘ Login success! ϓϨΠϠʔ࡞੒/Ұཡ CLI $ termworld player create Player࡞੒ $ termworld player list PlayerҰཡ Player͕ىಈ͞Εͨ͜ͱΛ֬ೝ $ termworld g <name> start PlayerΛ໊લࢦఆͰىಈ ͦͷଞϓϨΠϠʔૢ࡞ (Ҡಈ/ΞΫγϣϯͳͲ) ΋͜ͷίϚϯυͰߦ͏
18. σʔλϕʔε Termworld Ⅱ ϢʔβʔPC αʔόʔ ௚઀ૢ࡞ ΞΧ΢ϯτσʔλ ϓϨΠϠʔσʔλ Ϟϯελʔσʔλ Ϛελʔσʔλ ϓϨΠϠʔૢ࡞ ότϧγεςϜ ΞΠςϜ࢖༻ ϞϯελʔAI etc... WebSocket ΤϯυϙΠϯτ JavaScript ϒϥ΢βGUI API ϫʔΧʔϓϩηε Ϣʔβʔೖྗ $ move up $ login CLI ݋࢜.rb $ ruby ݋࢜.rb HTTP௨৴ WebSocket௨৴ RPC௨৴ γεςϜίʔϧ ϚελʔσʔλϚωʔδϟʔ DBίωΫγϣϯ Ϛοϓσʔλ ΞΠςϜσʔλ Ϟϯελʔσʔλ https://github.com/kthatoto/tw-master-data-manager https://github.com/kthatoto/termworld https://github.com/kthatoto/termworld-server
19. ์ஔήʔϜͱͯ͠༡Ϳ ʔ ϞϯελʔΛङΓ·͘ΔεΫϦϓτΛॻ͘ ઓಆಛԽύʔςΟʹରͯ͠૸ΒͤΔ ʔ ՙ෺͕͍ͬͺ͍ʹͳͬͨΒ֗ʹ໭ͬͯՙ෺੔ཧ͢ΔεΫϦϓτΛॻ͘ ඇઓಆܥՙ෺࣋ͪಛԽϓϨΠϠʔʹରͯ͠૸ΒͤΔ ʔ ϞϯελʔΛආ͚ͯΞΠςϜऩू͚ͩ͢ΔεΫϦϓτΛॻ͘ ඇઓಆܥΞΠςϜऩूޮ཰ಛԽϓϨΠϠʔʹରͯ͠૸ΒͤΔ ʔ ҆શʹ֗ʑΛҠಈͯ͠ަқͯ͠ࢿۚΛՔ͙εΫϦϓτΛॻ͘ ඇઓಆܥճආ&ަқಛԽϓϨΠϠʔʹରͯ͠૸ΒͤΔ ʔ ͻͨ͢ΒࡶڕϞϯελʔΛ౗͠·͘ΓϨΞυϩοϓΛૂ͏εΫϦϓτΛॻ͘ ӡۃ޿ൣғ߈ܸಛԽϓϨΠϠʔʹରͯ͠૸ΒͤΔ ͳͲͳͲɻ͜͏͍͏ϓϨΠ͕Ͱ͖ΔήʔϜγεςϜΛ໨ࢦͯ͠·͢
20. ΍Δ͜ͱ ʔ طଘήʔϜͰ༡ΜͰΈΔɻήʔϜγεςϜࢀߟʹ͠Α͏ ʔ ·ͣϚοϓσʔλ࡞Βͳ͍ͱɻRPGπΫʔϧࢀߟʹ͠Α͏ ʔ Ϛοϓͷ൒ࣗಈੜ੒ɻ͔ͳΓ޿͍Ϛοϓ࡞Γ͍ͨ ʔ ը૾ͷ৭ҧ͍σʔλ൒ࣗಈੜ੒ɻڧͦ͏ͳ৭ͷϞϯελʔͱ͔࡞Γ͍ͨ ʔ ؅ཧը໘࡞Γ͍ͨɻϓϨΠϠʔ͕Ͳ͏͍͏ಈ͖ͯ͠Δ͔Λਆࢹ఺͍ͨ͠ ʔ υΩϡϝϯτॻ͔ͳ͍ͱɻCLIͩ͠ ʔ ϑϩϯτWebΞϓϦέʔγϣϯɻ͜Εͳ͍ͱ࿩ʹͳΒͳ͍
21. Vue Composition API with TypeScript ͍ͯͯ͠ ݟ׳Εͳ͍Type Errorʹૺ۰ͨ͠࿩ ͜͜
22. Sample Counter using Vue Composition API
23. ͜ͱͷൃ୺ ϩδοΫڞ௨Խ͍ͨ͠ʂ custom hookʹ੾Γग़ͦ͏ʂ ܕ͕ҧ͏͔ΒGenericsͩʂ reactiveʹGenericsܕͷϓϩύςΟΛηοτʂ Type Error...
24. TileList.vue
25. useResources.ts
26. 🤔 Genericsܕͷ͚࣌ͩൃੜ ιʔείʔυݟʹߦ͜͏ ͳʹ͜Ε... ͳʹ͜Ε...
27. node_modules/@vue/composition-api/dist/index.d.ts ֘౰෦෼ൈਮ 1ͭͣͭՄೳͳݶΓҙ༁͠ͳ͕Βݟ͍͖ͯ·͢💪
28. reactive ͱ͍͏ؔ਺ Ҿ਺ obj: T , ܕҾ਺ T ͕༩͑ΒΕΔ (ͦͯ͜͠ͷ T ͸ object ͷαϒλΠϓͰ͋Δ) ͜ͷؔ਺ͷ໭Γ஋ͷܕ͸ UnwrapRef<T> function reactive
29. UnwrapRef ͱ͍͏ܕ ܕҾ਺ T ͕༩͑ΒΕΔ ͜ͷܕ͸ T ͕ Ref<V> (V͸೚ҙ) ͷܗΛ͍ͯͨ͠Β UnwrapRefSimple<V> ͦ͏͡Όͳ͚Ε͹ UnwrapRefSimple<T> ͱ͍͏ܕʹͳΔ (Ref ʹ͍ͭͯ͸লུ) Conditional Types & infererence type UnwrapRef
30. Conditional Types case study toggleStringNumber ͱ͍͏ؔ਺ stringܕΛnumberܕʹม׵ɺͦΕҎ֎Λstringܕʹม׵͢Δؔ਺
31. Infererence case study getFirstValue ͱ͍͏ؔ਺ Ҿ਺͕"Կ͔(V)"ͷ഑ྻͩͬͨΒ഑ྻͷதͷ࠷ॳͷ"Կ͔(V)"Λ ͦ͏͡Όͳ͚Ε͹Ҿ਺(:T)Λͦͷ··ฦؔ͢਺
32. UnwrapRefSimple ͱ͍͏ܕ ܕҾ਺ T ͕༩͑ΒΕΔ T ͕ Function | CollectionTypes | BaseTypes | Ref ͷαϒλΠϓͰ͋Ε͹ ͦͷ·· T ͱ͍͏ܕʹͳΔ ͦ͏͡Όͳ͚Ε͹...(ଓ͘) type UnwrapRefSimple 1/3
33. T ͕ Array<any> ͷαϒλΠϓͰ͋Ε͹ ͜ͷ഑ྻͷͦΕͧΕͷཁૉͷܕΛ T[K] ͱ͢Δͱ ͦΕͧΕͷཁૉ͕ UnwrapRefSimple<T[K]> ͱ͍͏ܕʹͳΔ ͦ͏͡Όͳ͚Ε͹...(ଓ͘) type UnwrapRefSimple 2/3 ྫ) UnwrapRefSimple<[number, Resource]> = [UnwrapRefSimple<number>, UnwrapRefSimple<Resource>]
34. T ͕ object ͷαϒλΠϓͰ͋Ε͹ UnwrappedObject<T> ͱ͍͏ܕʹͳΓ ͦ͏͡Όͳ͚Ε͹ T ͱ͍͏ܕʹͳΔ type UnwrapRefSimple 3/3
35. UnwrappedObject ͱ͍͏ܕ ܕҾ਺ T ͕༩͑ΒΕΔ (T extends object Λຬͨ͢લఏͰ) T ͷͦΕͧΕͷ key,value pairͷ͏ͪvalue(T[P])Λ UnwrapRef<T[P]> ʹม׵ͨ͠ܕʹͳΔ type UnwrappedObject ྫ) UnwrappedObject<{ key1: number, key2: Resource }> = { key1: UnwrapRef<number>, key2: UnwrapRef<Resource> } ͋·Γॏཁ͡Όͳׂ͍ʹෳࡶͳͷͰ লུ͠·͢ (& ͷه๏͸ Intersection Typesͱ͍͏ػೳͰ͢)
36. Q1. ͳΜͰܕͷܭࢉ్͕த·ͰͳΜͩΖ͏ʁ🤔 Q2. ͳΜͰUnwrapRefSimpleͱUnwrapRef͕ ɹɹผʑͰ͋ΔΜͩΖ͏ʁ🤔
37. Q1. ͳΜͰܕͷܭࢉ్͕த·ͰͳΜͩΖ͏ʁ🤔 A. ͦΕҎ্͸ܾ·͍ͬͯͳͯ͘ܭࢉͰ͖ͳ͍͔Βɻ ͜͜Ͱ৚݅෼ذ࢝·Δ͚ͲResource͕ܾ·Β ͳ͍͔Β͜ΕҎ্͸ແཧ
38. A. ยํ͕Resourceɺยํ͕Array<Resource>͔ͩΒ Array<Resource>ͷํ͸ Array<any> ͱ్ͯ͠த·ͰܭࢉͰ͖Δ͔Βɻ Q2. ͳΜͰUnwrapRefSimpleͱUnwrapRef͕ผʑͰ͋ΔΜͩΖ͏ʁ🤔 Array<Resource>ͬͯ͜ͱͰ Ref<V> ͷܗ ͯ͠ͳ͍͔Βͬͪͩ͜ʂ reactive<{ resource: Array<Resource> }> UnwrapRef<Array<Resource>> =>
39. reactive<{ resources: Array<Resource> }> => UnwrapRef<{ resources: Array<Resource> }> => UnwrapRefSimple<{ resources: Array<Resource> }> => UnwrappedObject<{ resources: Array<Resource> }> => { resources: UnwrapRef<Array<Resource>> } => { resources: UnwrapRefSimple<Array<Resource>> } => { resources: Array<UnwrapRefSimple<Resource>> } ऴྃ UnwrapRefSimple<Resource> ͜͜ͷܭࢉ͕Ͱ͖ͳ͍ ͪΌΜͱܭࢉͯ͠ΈΔ
40. ͦ΋ͦ΋͡Ό͋Ͳ͏͢Δ͔ ࠓͷͱ͜Ζ as Λ࢖͏͔͠ͳͦ͞͏... reactiveʹΑΓੜ੒͞Εͨ΋ͷΛී௨ͷObjectͱͯ͠ѻ͏ͷ͕ࠓͷͱ͜Ζͷղܾࡦ😢