趣味コーディングってやっぱ楽しいんだから

「初心者・初登壇Welcome！LINEを使ったLT大会 #10」での登壇資料です。
https://linedevelopercommunity.connpass.com/event/333879/

Transcript

1. ॳ৺ऀɾॳొஃ8FMDPNFʂ-*/&Λ࢖ͬͨ-5େձ
   
   BU
    झຯίʔσΟϯάͬͯ
   ΍ͬͺָ͍͠Μ͔ͩΒ ͛͠Δɻ
   !HFSV
2. ͛͠Δɻ
   !HFSV w ॴଐɿϚωʔϑΥϫʔυ
   w झຯɿϏϦϠʔυ
   w ڵຯ͋Δٕज़ɿNBLF
   4VQBCBTF
   w ೥ͷτϐοΫɿ
   w ϋοΧιϯͷ࢘ձɺೖ੶ɺνʔϜҟಈ ࣗݾ঺հ
3. Έͳ͞Μझຯ͸࣋ͬͯ·͔͢ʁ
   
4. ࣗ෼͸ϏϦϠʔυ͕޷͖Ͱ͢ɻ
5. ࡞Ζ͏ͱࢥ͖͔͚ͬͨͬ wରઓཤྺΛڞ༗͍ͨ͠
   WT
   ΞϓϦΛμ΢ϯϩʔυͨ͘͠ͳ͍
   
   wϏϦϠʔυΞϓϦ͸͋Δ͕ɺ޿ࠂ͕ଟ͍
   ˠ
   ࢖͍ͮΒ͍
   w؆୯ʹ૬खΛট଴Ͱ͖Δ࢓૊Έ͕ཉ͍͠
6. #PU
   ͷ֓ཁ wػೳ
   wϚονϯάɺήʔϜঢ়گͷొ࿥ɺཤྺӾཡ
   wήʔϜͷϧʔϧ
   w+1"ϧʔϧ
   Ϙʔϧʢ൪
   ఺ɺଞ
   ఺ʣ
   wϋϯσϚον
7. Ϛονϯά #PU
   ͷ֓ཁ w ট଴
   w ൪߸ʹೖྗ
   w ରઓཤྺ͔Βট଴
   w Ϛονޙʹೋਓʹϝοηʔδૹ৴
8. ήʔϜঢ়گͷొ࿥ #PU
   ͷ֓ཁ w ήʔϜͷঢ়گʹԠͯ͡Ϙλϯ͕มԽ
   w ϓϨΠϠʔަ୅ػೳ͋Γ
   w ޡೖྗͷ৔߹΋ʮ໭͢ʯ͕Մೳ
   w ࢼ߹ऴྃޙελϯϓͱϝοηʔδૹ৴
9. ཤྺӾཡ #PU
   ͷ֓ཁ w ઓ͍தͷ৔߹ɿ⚔ɹউഊɿ😊
   😭
   w ઓ͍தͷ৔߹͸ɺ࠶։͕Մೳ
   w উഊ͕ܾ·͍ͬͯΔ৔߹͸ɺ݁ՌΛදࣔ
10. ͜ͷ
    -5
    Ͱ࣋ͪؼͬͯཉ͍͜͠ͱ ͪΐͬͱϓϩάϥϛϯά
    ͍ͨͬͯ͠ࢥ͑Δ
11. ίΞϩδοΫ͸࿈ٳͰ࣮૷
12. ָ͍͠ϙΠϯτ w ϩδοΫΛ૊Ήͷָ͕͍͠
    w ύζϧΛ࡞͍ͬͯΔΈ͍ͨ
    w 6*
    ͱܨ͕ͬͯಈ͍ͨͱ͖ͱͬͯ΋خ͍͠
13. ϑΝΠϧߏ੒ game.ts postbackEvent.ts postbackEventType.ts messages ├── ... ├── matchGameMessage │ └── matchGameService.ts ├── matchGameMessage.ts ├── scoreBoardMessage │ ├── gameScoreElement.ts │ └── scoreInputElement.ts └── scoreBoardMessage.ts postBackEvents ├── GameEvent.ts ├── ScoreEvent.ts ├── ... └── base.ts w HBNFUTɿίΞϩδοΫ
    w QPTUCBDL&WFOUUTɿϙετόοΫͷॲཧ
    w QPTUCBDL&WFOUTYYɿ֤ϙετόοΫॲཧ
    w QPTUCBDL&WFOU5ZQFUTɿUZQFΛ؅ཧ
    w NTTBHFTYYɿ6*ͱϩδοΫΛ෼཭
14. HBNF
    ͷղઆ game.ts postbackEvent.ts postbackEventType.ts messages ├── ... ├── matchGameMessage │ └── matchGameService.ts ├── matchGameMessage.ts ├── scoreBoardMessage │ ├── gameScoreElement.ts │ └── scoreInputElement.ts └── scoreBoardMessage.ts postBackEvents ├── GameEvent.ts ├── ScoreEvent.ts ├── ... └── base.ts w HBNFUTɿίΞϩδοΫ
    w QPTUCBDL&WFOUUTɿϙετόοΫͷॲཧ
    w QPTUCBDL&WFOUTYYɿ֤ϙετόοΫॲཧ
    w QPTUCBDL&WFOU5ZQFUTɿUZQFΛ؅ཧ
    w NTTBHFTYYɿ6*ͱϩδοΫΛ෼཭
15. HBNF
    ͷղઆ // const gameData = (await supabase.from('games') // .select() // .eq('id', user.current_game_id)).data[0] // const game = new Game(gameData) export class Game { constructor(gameData: any) { /* ... */ } scoreByA() { /* ... */ } scoreByB() { /* ... */ } undo() { /* ... */ } shot(ball) { /* ... */ } dead() { /* ... */ } switch() { /* ... */ } status() { /* ... */ } winner() { /* ... */ } } w 4VQBCBTF
    ͷΦϒδΣΫτΛ 
 ͦͷ··౉͢
    w ήʔϜͷ৚݅Λ؅ཧ͢Δ
    w ݱঢ়ɺ໭͢ɺަ୅ɺউར৚݅
    w 6*
    ͱ
    ϩδοΫΛ෼͚ͯɺ 
 ؆୯ʹςετ͠΍͘͢
16. QPTUBCBDL
    ͷղઆ game.ts postbackEvent.ts postbackEventType.ts messages ├── ... ├── matchGameMessage │ └── matchGameService.ts ├── matchGameMessage.ts ├── scoreBoardMessage │ ├── gameScoreElement.ts │ └── scoreInputElement.ts └── scoreBoardMessage.ts postBackEvents !"" GameEvent.ts !"" ScoreEvent.ts !"" ... #"" base.ts w HBNFUTɿίΞϩδοΫ
    w QPTUCBDL&WFOUUTɿϙετόοΫͷॲཧ
    w QPTUCBDL&WFOUTYYɿ֤ϙετόοΫॲཧ
    w QPTUCBDL&WFOU5ZQFUTɿUZQFΛ؅ཧ
    w NTTBHFTYYɿ6*ͱϩδοΫΛ෼཭
17. QPTUBCBDL
    ͷղઆ /* postbackEvent/base.ts */ export class PostbackEvent { static events: number[] = [] static isTarget(event: number) { return this.events.includes(event); } execute(...) { throw new Error('ະ࣮૷Ͱ͢'); } } w #BTF
    DMBTT
    Ͱ͸ɺ
    w JT5BSHFUɿର৅͔൱͔
    w &YFDVUFɿ࣮ߦ͢Δίʔυ
18. QPTUBCBDL
    ͷղઆ /* postbackEvent/GameEvent.ts */ export class GameEvent extends PostbackEvent { static events = [ postbackEventType.shot, postbackEventType.shoted, postbackEventType.dead, postbackEventType.undo, postbackEventType.switch ] async execute(postback: any, supabase: any, user: any, lineBotClient: any) { let game = new Game(...) if( game.status() === gameStatus.Done && // ήʔϜ͕ऴ͍ྃͯ͠Δ৔߹͸มߋͰ͖ͳ͍ postback.t !== postbackEventType.undo // ͨͩɺ undo ͸Մೳ ) { return [{type: "text", text: "ήʔϜ͕ऴ͍ྃͯ͠·͢"}] } switch(postback.t) { case postbackEventType.shot: game.shot(postback.ball); break; case postbackEventType.dead: game.dead(); break; case postbackEventType.undo: game.undo(); break; case postbackEventType.switch: game.switch(); break; } await supabase.from('games').update({ score: game.scores, status: game.status() }).eq('id', user.current_game_id).select() ... return replyMessages } } w (BNF&WFOUͰঢ়ଶΛߋ৽
    w JT5BSHFU
    Ͱར༻͢Δ 
 FWFOUT
    Λఆٛ
    w &YFDVUF
    ͷதͰɺΠϕϯτ͝ͱʹ 
 ॲཧΛมߋ
    w ઌ΄Ͳͷ
    (BNF
    DMBTT
    ͷॲཧΛ 
 ࣮ߦͯ͠σʔλΛߋ৽͢Δ
19. QPTUBCBDL
    ͷղઆ /* postbackEvent.ts */ export const postbackEvent = async (event: any, ...) => { const postback = JSON.parse(event.postback.data); const targetEvent = [GameEvent, ...] .find( (eventClass) => eventClass.isTarget(postback.t) ) || NotFoundEvent const targetEventInstance = new targetEvent() return await targetEventInstance.execute(...) } /* postbackEventType.ts */ export const postbackEventType = { score: 2, showScore: 12, shot: 3, shoted: 4, dead: 5, undo: 6, switch: 7, start: 8, } w QPTUCBDL&WFOUUT
    w QPTUCBDL&WFOU
    ͷॲཧΛ͢Δ
    w JGFMTF
    Ͱ͸ͳ͘഑ྻͰ؅ཧ
    w QPTUCBDL&WFOU5ZQFUT
    w UZQF
    Λ؅ཧ͢Δ
    w QPTUCBDL
    BDUJPO
    Ͱɺ 
 จࣈ਺੍ݶ͕͋ΔͷͰɺ 
 ൪߸Ͱ؅ཧ
20. NFTTBHFT game.ts postbackEvent.ts postbackEventType.ts messages !"" ... !"" matchGameMessage $ #"" matchGameService.ts !"" matchGameMessage.ts !"" scoreBoardMessage $ !"" gameScoreElement.ts $ #"" scoreInputElement.ts #"" scoreBoardMessage.ts postBackEvents ├── GameEvent.ts ├── ScoreEvent.ts ├── ... └── base.ts w TDPSF#PBSE.FTTBHFUT
    w NFTTBHF
    ͷ
    +40/
    Λ؅ཧ͢Δ
    w TDPSF#PBSE.FTTBHFYYYYUT
    w NFTTBHF
    Ͱར༻͢ΔϩδοΫΛهड़
    w &MFNFOU
    
    ࢠཁૉʹ෼͚Δ
    w 4FSWJDF
    
    ඞཁͳϩδοΫΛ࢖͏
21. ࡞ͬͯΈͯ w NBLF
    ΋ָ͍͚͠ͲɺίʔσΟϯά΋ָ͍͠
    w ΍Γ͍ͨ͜ͱΛখ͘͞෼ղ͢Δ͜ͱ͕େࣄɻ
    w ࣮ࡍ࢖͏ͱόά΋ؾ͚ͮΔ͠ɺ༑ୡͱ༡΂Δ
    w $PQJMPU
    Y
    $IBU(15
    ͳͲ͕ศར
    w 4VQBCBTF
    ࠷ߴʂʂ
22. ࠷ޙʹ w 4VQBCBTF
    ͷϋϯζΦϯಈը
    
    ࢿྉ͋ΔͷͰΈ͍ͯͩ͘͞
    w ؆୯ʹͰ͖·͢ʂʂ
    w ͪΐͬͱͰ΋ɺϓϩάϥϛϯά޷͖ͳਓ͕ 
 ૿͑ͨΒ͍͍ͳʙ