マインスイーパで学ぶReact / Pepabo Frontend Tech Meeting #1

https://purple-jwl.github.io/react-minesweeper/

Transcript

1. 
   ϑϩϯτΤϯυςοΫϛʔςΟϯά
   
   !QVSQMF@KXM ϚΠϯεΠʔύͰֶͿ3FBDU
2. ࠷ۙϑϩϯτΤϯυ෼໺ʹڵຯ௡ʑ͓͡͞Μ ͺʔΆʔ
   !QVSQMF@KXM
   
3. ໨࣍ wϚΠϯεΠʔύͱ͸
   w3FBDUͱ͸
   w3FBDUͰϚΠϯεΠʔύΛ࡞Δ
   w·ͱΊ
4. ϚΠϯεΠʔύͱ͸
5. ϚΠϯεΠʔύ w೥୅ʹൃ໌͞Εͨਓ༻ͷίϯϐϡʔλήʔϜ
   wϘʔυ 3
   Y
   $ ্ʹଘࡏ͢Δ.ݸͷ஍ཕͷ৔ॴΛώϯτΛݩʹಛఆ͢ Δ͜ͱ͕໨త
6. ࡞ͬͨ΍ͭͷσϞ IUUQTQVSQMFKXMHJUIVCJPSFBDUNJOFTXFFQFS
7. 3FBDUͱ͸
8. 3FBDU w'BDFCPPL͕։ൃΛߦ͍ͬͯΔ+BWB4DSJQUϥΠϒϥϦ
   w.7$Ͱݴ͏ͱ͜ΖͷWJFXͷΈΛ୲౰͢Δ
   wίϯϙʔωϯτΛఆٛ͠ɺͦΕΛ૊Έ߹Θͤͯը໘Λ࡞Δ
   w୯ํ޲σʔλϑϩʔɺԾ૝%0.ɺ+49͕ಛ௃ͱͯ͠ڍ͛ΒΕΔ
9. ίϯϙʔωϯτ wը໘Λߏ੒͢Δ෦඼ͷ͜ͱ
   wঢ়ଶʢTUBUFʣΛ࣋ͭ͜ͱ͕Ͱ͖Δ
10. ୯ํ޲σʔλϑϩʔ wجຊతʹ͸਌ίϯϙʔωϯτ͔Βࢠίϯϙʔωϯτʹঢ়ଶ͕ྲྀΕΔ
    wࣗ਎͕࣋ͭঢ়ଶΛTUBUFɺ਌ίϯϙʔωϯτ͔ΒྲྀΕ͖ͯͨঢ়ଶΛ QSPQTͱ͍͏
    wTUBUF͸ॻ͖׵͑ՄೳɺQSPQT͸ಡΈࠐΈઐ༻
    w਌ίϯϙʔωϯτ͕શͯͷTUBUFΛҰݩ؅ཧ͢Δ͜ͱ͕ଟ͍
11. Ծ૝%0. wੜ%0.ͱରʹͳΔ΋ͷ
    wԾ૝%0.Λ3FBDUͰ؅ཧ͠ɺঢ়ଶมԽʹΑΔԾ૝%0.ͷࠩ෼ͷΈΛ ੜ%0.ʹ൓өͤ͞Δ࢓૊Έ
    w͜ͷ࢓૊ΈʹΑͬͯੜ%0.ͷૢ࡞ΛۃྗݮΒ͠ɺύϑΥʔϚϯε޲ ্Λ࣮ݱ͍ͯ͠Δ
12. +49 w+BWB4DSJQUͷߏจ֦ுͰ)5.-ͷΑ͏ʹهड़Ͱ͖Δ
    w3FBDUͱҰॹʹར༻͢Δ͜ͱ͕ਪ঑͞Ε͍ͯΔʢඞਢͰ͸ͳ͍ʣ const App = () => ( <div className=“MyApp”> = </div> );
13. 3FBDUͰϚΠϯεΠʔύΛ࡞Δ
14. 
    DSFBUFSFBDUBQQͰ؀ڥߏங
15. DSFBUFSFBDUBQQ w'BDFCPPL͕։ൃΛߦ͍ͬͯΔπʔϧ
    wίϚϯυҰൃͰ3FBDUͷ؀ڥߏஙͯ͘͠ΕΔ
    w8FCQBDL΍#BCFMͳͲͷઃఆ͕ෆཁͰɺ3FBDUΛαΫοͱࢼͯ͠Έͨ ͍ͱ͖ʹศར $ create-react-app react-minesweeper
16. 
    ίϯϙʔωϯτͷઃܭΛߟ͑Δ
    
17. ίϯϙʔωϯτͷઃܭ wը໘Λίϯϙʔωϯτ֊૚ʹ෼ղ͢Δ
    wͭͷίϯϙʔωϯτʹͤ͞Δ͜ͱ͸͚ͭͩʹ͢Δͷ͕ϕετ
 ʢ͍ΖΜͳ͜ͱΛ΍Βͤͳ͍ʣ
19. ʜ
20. ʜ "QQ #PBSE $POUSPM"SFB $FMM
21. 
    ͲͷίϯϙʔωϯτʹTUBUFΛ
    ࣋ͨͤΔ͔ߟ͑Δ
22. ୯ํ޲σʔλϑϩʔʢ࠶ܝʣ wجຊతʹ͸਌ίϯϙʔωϯτ͔Βࢠίϯϙʔωϯτʹঢ়ଶ͕ྲྀΕΔ
    wࣗ਎͕࣋ͭঢ়ଶΛTUBUFɺ਌ίϯϙʔωϯτ͔ΒྲྀΕ͖ͯͨঢ়ଶΛ QSPQTͱ͍͏
    wTUBUF͸ॻ͖׵͑ՄೳɺQSPQT͸ಡΈࠐΈઐ༻
    w਌ίϯϙʔωϯτ͕શͯͷTUBUFΛҰݩ؅ཧ͢Δ͜ͱ͕ଟ͍
23. ʜ "QQ #PBSE $POUSPM"SFB $FMM
24. "QQ #PBSE $POUSPM"SFB $FMM $FMM $FMM ʜ
25. "QQ #PBSE $POUSPM"SFB $FMM $FMM $FMM ʜ ˡ͍ͭͩ͜ʂʂ
26. 
    ͲͷΑ͏ͳঢ়ଶΛ࣋ͨͤΔ͔
    ߟ͑Δ
27. ʜ
28. ͲͷΑ͏ͳঢ়ଶΛ࣋ͨͤΔ͔ wඞཁͳ৘ใ͕͍Ζ͍Ζ͋Δ
    w൫໘ͷαΠζɺ஍ཕͷ਺ɺ֤ηϧͷ։ดঢ়ଶɺ֤ηϧͷضͷ༗ແɺ ֤ηϧͷपғͷ஍ཕ਺ʢώϯτʣɺήʔϜͷܦա࣌ؒɺͳͲͳͲʜ
    wʢήʔϜϩδοΫͷ࣮૷ํ๏ʹΑͬͯඞཁͳ৘ใ͕มΘΔ͔΋ʣ
29. 
    ͲͷΑ͏ͳΠϕϯτ͕͋Δͷ͔
    ߟ͑Δ
30. ʜ
31. ͲͷΑ͏ͳΠϕϯτ͕͋Δͷ͔ߟ͑Δ w͜Ε΋͍Ζ͍Ζ͋Δ
    wήʔϜͷ೉қ౓બ୒ɺηϧΛ։͚ΔɺضΛཱͯΔɺλΠϚʔͷ։࢝ ΍ఀࢭͳͲ
32. 
    ࣮૷͢Δ
33. ࣮૷͢Δ w͜͜·Ͱߟ͑ͨ಺༰Λݩʹ࣮૷͢Δ
    w֤ίϯϙʔωϯτ͕΍Δ͜ͱ͕ఆ·͍ͬͯΕ͹ɺͦΕʹඞཁͳঢ়ଶ͕ ෼͔ΔΑ͏ʹͳΔͷͰɺ਌ίϯϙʔωϯτ͔Βඞཁͳঢ়ଶΛྲྀͤ͹Α ͍
    wࢠίϯϙʔωϯτͷQSPQT͸ಡΈऔΓઐ༻ͳͷͰɺTUBUFΛॻ͖׵͑ͨ ͍৔߹͸਌ίϯϙʔωϯτͷΠϕϯτϋϯυϥΛݺͼग़͢Α͏ʹ͢Δ
34. Ͱ͖ͨؾ͕͢Δʂ
35. ·ͱΊ
36. ·ͱΊ wϚΠϯεΠʔύΛ୊ࡐʹ3FBDUΛֶΜͩ
    w3FBDUࣗମ͸γϯϓϧͳͷͰڽͬͨ͜ͱΛ͠ͳ͍෼ʹ͸؆୯ʹॻ͚Δ ͜ͱ͕෼͔ͬͨ
    wͳΜͱͳ͘3FBDUʹڵຯΛ࣋ͬͯ͘ΕΔਓ͕૿͑Δͱخ͍͠
    wϚΠϯεΠʔύ͕͏·͘ͳͬͨ