私が考えるReactのよさ #fukuokajs

Transcript

1. 'VLVPLB+4
   !QJSPTJLJDL
   5VF
   
   

   View Slide

2. w ݀Ҫ޺޾
   w !QJSPTJLJDL
   w ϠϑʔגࣜձࣾΤϯδχΞ
   w "QFY-FHFOETʹڵຯ͕͋Γ·͢
   w 'BSDSZ/FX%BXOʹڵຯ͕͋Γ·͢
   w %BZT(POFʹʢҎԼུʣ
   

   View Slide

3. 3FBDUೖ໳ʢᠳӭࣾʣ
   ڞஶ
   8%#13&44

   ࿈ࡌʮͲΜͱ͍͜ϑϩϯτΤϯυ։ൃʯ
   ࿈ࡌ࠷ऴճʂ
   

   View Slide

4. ΑΖ͘͠
   ͓ئ͍க͠·͢
   

   View Slide

5. View Slide

6. ొஃऀͷํʑ͔Β͸ɺ

   ʮ˓˓͕޷͖ʂʯ

   ʮ˓˓͕ັྗʂʯ

   ʮ͕͜͜࠷ߴʂʯ

   ͳͲɺ

   ؾͷෝ͘··ʹ͓࿩͍ͯͨͩ͜͠͏ͱ

   ࢥ͍·͢ʂ
   

   View Slide

7. ࢲ͕ߟ͑Δ3FBDUͷΑ͞
   w γϯϓϧ͞
   w %9ͷΑ͞
   w એݴతʹ6*ΛఆٛͰ͖Δ
   

   View Slide

8. Α͞ᶃɿγϯϓϧ͞
   

   View Slide

9. 3FBDUͷγϯϓϧ͞
   w ʮ"+BWB4DSJQUMJCSBSZGPSCVJMEJOHVTFSJOUFSGBDFTʯ
   w ͣͬͱมΘͬͯͳ͍
   w 3FBDU୯ମͰΞϓϦέʔγϣϯΛ࡞Δ͜ͱ͸ك
   w Կ͔ͱ૊Έ߹Θͤͯ։ൃ
   w 3FEVYɺίϯϙʔωϯτूFUD
   

   View Slide

10. ݸਓͷ޷Έ͔΋͠Εͳ͍
    w ϞϊϦεͱൺ΂ΔͱϝϦσϝ͋Δͱࢥ͏
    w γϯϓϧͳύʔπΛ૊Έ߹ΘͤͯɺશମΛߏங͢Δ
    w ύʔπຖʹཧղ͢Ε͹Α͍ͷͰɺཧղ͠΍͍͢
    w ύʔπ୯ҐͰަ׵Մೳ
    w ։ൃπʔϧ͸ϞϊϦγοΫͰɺ

    ϥΠϒϥϦ͸γϯϓϧͳ΋ͷͷ૊Έ߹Θ͕ͤݸਓతͳ޷Έ
    

    View Slide

11. Α͞ᶄɿ%9
    

    View Slide

12. %9
    w %FWFMPQFS&YQFSJFODFʹ։ൃऀͷମݧ
    w %9%FWFMPQFS&YQFSJFODFʢ։ൃମݧʣ͸ॏཁͩ

    IUUQTHGYIBUFOBCMPHDPNFOUSZ
    w %9͸69ͷҰछͰ͋Δ
    w %9͕Α͍ͱ೔ʑͷ։ൃΛָ͠ΊΔΑ͏ʹͳΓɺ

    ؾ࣋ͪʹ༨༟͕Ͱ͖Δ
    w %9͕ѱ͍ͱ։ൃΛָ͠Ίͣɺ

    ʮఆΊΒΕͨλεΫʯҎ֎ͷ͜ͱΛͨ͘͠ͳ͘ͳΔ
    

    View Slide

13. ϥΠϒϥϦɾϑϨʔϜϫʔΫ
    ͷ%9
    w υΩϡϝϯτ͕ἧ͍ͬͯΔ͔ɺ຋༁͞Ε͍ͯΔ͔
    w σόοάπʔϧ͕͋Δ͔
    w ΤίγεςϜͱ਌࿨ੑ͕͋Δ͔
    w FY
    &4-JOUɺ5ZQF4DSJQUʹରԠ͍ͯ͠Δ͔ʁ
    

    View Slide

14. w &4-JOU 5ZQF4DSJQUͱͷ૬ੑ͸͔ͳΓ͍͍
    w ࢖͍࢝Ίͨࠒʢ೥ɺόʔδϣϯ͕͘Β͍ ʣ

    पลπʔϧͷରԠ͕Α͔ͬͨهԱ
    w &4-JOUͷ+49ରԠ͸೥݄ɺ

    #BCFMʢUPʣ΋೥݄ʹ͸+49αϙʔτ͍ͯͨ͠
    3FBDUͷ%9
    

    View Slide

15. 3FBDUͷ%9
    w 3FBDU%FW5PPMTʢެࣜʣ
    w 6TFS5JNJOH"1*Λ࢖ͬͯͷϓϩϑΝΠϦϯά
    w $ISPNF%FW5PPMTͷύϑΥʔϚϯελϒʹදࣔ͞ΕΔ

    IUUQTSFBDUKTPSHEPDTPQUJNJ[JOHQFSGPSNBODFIUNMQSPpMJOHDPNQPOFOUTXJUIUIF
    DISPNFQFSGPSNBODFUBC
    

    View Slide

16. 3FBDUͷ%9
    w ࠷ۙɺυΩϡϝϯτ΋຋༁͞Εͨ
    IUUQTKBSFBDUKTPSH
    

    View Slide

17. Α͞ᶅɿ

    એݴతʹ6*Λهड़Ͱ͖Δ
    

    View Slide

18. View Slide

19. ໋ྩతɾએݴత
    w ݸਓతͳղऍ
    w ໋ྩతɿ

    ʢ໨తΛୡ੒͢ΔͨΊͷʣखॱɾखଓ͖Λॻ͘
    w એݴతɿ

    ໨తΛॻ͘ʢͱखॱɾखଓ͖͸উखʹ΍ͬͯ͘ΕΔʣ
    

    View Slide

20. ໋ྩతɾએݴత
    w 3FBDUʹ౰ͯ͸ΊΔ
    w 6*ͷߏ଄Λએݴ͢Δ

    ʢͱɺखଓ͖ɾखॱ͸উखʹ΍ͬͯ͘ΕΔʣ
    w खଓ͖ɾखॱ

    σʔλͷ௥Ճɾมߋɾ࡟আʹର͢Δޮ཰తͳ%0.ͷߋ৽
    w Ծ૝%0.͕Χόʔ
    

    View Slide

21. +49
    w +BWB4DSJQUͷதʹ)5.-λά͕هड़Ͱ͖Δߏจ
    w 6*Λએݴతʹهड़Ͱ͖Δ
    w ͨͩͷ3FBDUDSFBUF&MFNFOUͷ౶ҥߏจɺม׵ޙͷ༧ଌָ͕
    w એݴతʹهड़Ͱ͖Δ͕+4ͷ࿮Λେ͖͘֎Ε͍ͯͳ͍
    ͜Ε͕+49
    

    View Slide

22. 3FBDU)PPLTͰ
    DMBTTίϯϙʔωϯτ΋એݴతʹ
    w 3FBDUʹ͸ɺίϯϙʔωϯτΛॻ͘ํ๏͕ͭ
    w ؔ਺PSΫϥε
    w ίϯϙʔωϯτͰঢ়ଶ΍ϥΠϑαΠΫϧͷར༻͕

    ඞཁͳ৔߹ɺΫϥεͰॻ͘ඞཁ͕͋ͬͨ
    

    View Slide

23. 3FBDU)PPLTͰ
    DMBTTίϯϙʔωϯτ΋એݴతʹ
    w 3FBDU)PPLT
    w ؔ਺ίϯϙʔωϯτͰঢ়ଶ΍ϥΠϑαΠΫϧΛ

    ѻ͏࢓૊Έ
    w 3FBDUͰ௥Ճ
    

    View Slide

24. ྫʣը໘αΠζͷऔಘ
    DMBTTίϯϙʔωϯτ൛
    

    View Slide

25. ྫʣը໘αΠζͷऔಘ
    DMBTTίϯϙʔωϯτ൛
    ໨తΛୡ੒͢ΔͨΊͷखଓ͖
    

    View Slide

26. ྫʣը໘αΠζͷऔಘ
    DMBTTίϯϙʔωϯτ൛
    ঢ়ଶΛѻ͏෦෼
    ϥΠϑαΠΫϧΛѻ͏෦෼
    

    View Slide

27. ྫʣը໘αΠζͷऔಘ
    3FBDU)PPLT൛
    ը໘αΠζΛ࢖͏͜ͱΛએݴ
    

    View Slide

28. w VTF8JOEPX4J[F
    w ը໘αΠζΛࢀর͢Δ͜ͱΛએݴ
    w SFNPWF&WFOU-JTUFOFS౳ͷखଓ͖͸એݴͷཪʹӅṭ
    w એݴతʹهड़Ͱ͖Δ͜ͱͰ໨త͕໌֬ʹͳΔ
    

    View Slide

29. ·ͱΊ
    w 3FBDUKTɺ͍͍Αʙ
    w 3FBDU)PPLTͰΑΓΑ͘ͳͬͨΑʙ
    w ϑϨʔϜϫʔΫɾϥΠϒϥϦಉ࢜Ͱ͍͍ͱ͜ΖΛ

    औΓೖΕ͍͋ͬͯΔͷͰɺ΄΅ಉ͜͡ͱ͕Ͱ͖Δ
    

    View Slide

30. ͋Γ͕ͱ͏
    ͍͟͝·ͨ͠
    

    View Slide