これからはじめるReact Hooks

Bonfire Frontend #4
https://yj-meetup.connpass.com/event/136480/

Twitter
https://twitter.com/__sakito__

Transcript

1. ͜Ε͔Β͸͡ΊΔ3FBDU)PPLT
   #POpSF'SPOUFOEd࠷৽ͷϑϩϯτΤϯυٕज़ʢՆٳΈ૯෮शʣd
   

   View Slide

2. /BNF
   4BLJUP.VLBJ
   5XJUUFS

   !@@TBLJUP@@
   $PNQBOZ
   $ZCP[VJOD

   'SPOUFOE&YQFSU5FBN
   "CPVUNF
   

   View Slide

3. w3FBDU)PPLTͱ͸ʁ
   wVTF4UBUFͱVTF&⒎FDU
   w$VTUPN)PPLT
   w3VMFTPG)PPLTͱ&4-JOU1MVHJO
   w3FBDU)PPLT5FTU
   "HFOEB
   

   View Slide

4. 3FBDU)PPLTͱ͸ʁ
   

   View Slide

5. w3FBDUW͔Β৽͘͠௥Ճ͞Εͨػೳ
   w$MBTTDPNQPOFOUTΛ࢖༻͢Δ͜ͱͳ͘ɺ

   ؔ਺ίϯϙʔωϯτͰ༷ʑͳ"1*Λ࢖͑Δ
   w3FOEFSQSPQT΍)P$ͳͲΛ࢖༻͠ͳͯ͘΋

   ϩδοΫͷ෼཭͕Մೳʹͳͬͨ
   wݱࡏ͸$MBTTDPNQPOFOU͕࡟আ͞ΕΔΘ͚Ͱ͸ͳ͘ɺ

   ஈ֊తʹҠߦ͕Մೳ
   wഁյతมߋ͸ؚ·Εͳ͍
   3FBDU)PPLTͱ͸ʁ
   

   View Slide

6. w -JGFDZDMF΍4UBUFͷϩδοΫΛ࠶ར༻͔ͨͬͨ͠
   w ͦͷͨΊSFOEFSQSPQT΍)P$ͱ͍͏ख๏Λ࢖͍ͬͯͨ
   w ͔͠͠ɺ͜ͷख๏͸ίϯϙʔωϯτ֊૚͕ॏͳΓ

   ϥούʔ஍ࠈͱͳΓಡΈʹ͍͘໰୊఺͕͋ͬͨ
   w ͦ͜Ͱɺίϯϙʔωϯτ֊૚ͳͲʹґଘͤͣɺ

   ϩδοΫΛ࢖͍ճͤΔΑ͏ʹ)PPLT͕஀ੜͨ͠
   w ·ͨɺ-JGFDZDMF΍4UBUFΛ࢖༻͢Δࡍʹ

   ؔ਺ίϯϙʔωϯτ͔Β$MBTTDPNQPOFOUT΁

   ϦϑΝΫλϦϯάΛ͠ͳ͍ͱ͍͚ͳ͍ख͕ؒ͋ͬͨ
   3FBDU)PPLT͸ͳͥಋೖ͞Εͨͷ͔
   

   View Slide

7. SFBDUKTSGDTSFBDUIPPLTNE
   IUUQTHJUIVCDPNSFBDUKTSGDTCMPCNBTUFSUFYUSFBDUIPPLTNE
   

   View Slide

8. SFBDUKTSGDTSFBDUIPPLTNE
   IUUQTHJUIVCDPNSFBDUKTSGDTQVMM
   

   View Slide

9. 3FBDU$POG
   IUUQTXXXZPVUVCFDPNXBUDI WEQX&)%IC.
   

   View Slide

10. .BLJOH4FOTFPG3FBDU)PPLT
    IUUQTEFWUPEBO@BCSBNPWNBLJOHTFOTFPGSFBDUIPPLTFJC
    

    View Slide

11. *OUSPEVDJOH)PPLT
    IUUQTSFBDUKTPSHEPDTIPPLTJOUSPIUNM
    

    View Slide

12. VTF4UBUFͱVTF&⒎FDU
    

    View Slide

13. VTF4UBUF$MBTT$PNQPOFOUͷ৔߹
    
    

    View Slide

14. VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹
    
    

    View Slide

15. VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹
    
    ঢ়ଶ஋ ߋ৽͢Δؔ਺
    ॳظ஋
    

    View Slide

16. VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹
    
    wෳ਺ͷ4UBUF΋࣮૷Մೳ
    

    View Slide

17. VTF&⒎FDU$MBTT$PNQPOFOUͷ৔߹
    

    View Slide

18. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹
    
    w DPNQPOFOU%JE.PVOU $PNQPOFOU%JE6QEBUF 

    DPNQPOFOU8JMM6ONPVOU͕·ͱ·ͬͨ΋ͷͱݴ͑Δ
    w ϨϯμϦϯάͷޙʹɺ࣮ߦ͞ΕΔ
    

    View Slide

19. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹
    
    VTF&⒎FDU͸ෳ਺ఆٛ͢Δ͜ͱ΋Ͱ͖Δ
    

    View Slide

20. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹
    
    w ୈೋҾ਺Λࢦఆ EFQT
    
    w ͜ͷͱ͖EFQTʹࢦఆ͞Εͨ஋ ͜ͷ৔߹͸ʮZFBSʯ
    ͕ൺֱ͞Εɺ

    มߋ͕͋Δ৔߹ͷΈɺಈ࡞͢Δ
    

    View Slide

21. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹
    
    EFQTΛؒҧ͏ͱൺֱର৅͕ͳ͍ͷͰɺߋ৽͞Εͳ͍ͷͰ஫ҙ
    

    View Slide

22. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹
    
    ؔ਺Λฦ٫͢Δ͜ͱͰɺDMFBOVQΛߦ͏͜ͱ͕Ͱ͖Δ
    

    View Slide

23. ࣮૷Λݟͳ͕ΒॲཧΛ௥͏
    

    View Slide

24. View Slide

25. ϩʔσΟϯάදࣔޙɺऔಘ৘ใΛදࣔ
    

    View Slide

26. VTF4UBUFͰॳظ஋ͱTFUؔ਺Λఆٛ
    

    View Slide

27. ֤TUBUFΛߋ৽
    

    View Slide

28. w63-͸มߋ͞Εͳ͍ͷͰɺ

    ॳظϨϯμϦϯάޙͷΈ

    HFU"SUJDMF
    ͕ൃՐ͢Δ
    

    View Slide

29. ϩʔσΟϯάදࣔޙɺऔಘ৘ใΛදࣔ
    

    View Slide

30. $VTUPNIPPLT
    

    View Slide

31. ͜ͷ··Ͱ͸7JFXͱϩδοΫ͕ಉ͡Օॴʹ
    

    View Slide

32. View Slide

33. ϩδοΫͷΈ
    

    View Slide

34. WJFXͷΈ
    

    View Slide

35. ͞Βʹৄ͍͠಺෦ͷ͜ͱ΋஌Γ͍ͨਓ
    IUUQTEFWUPEBO@BCSBNPWNBLJOHTFOTFPGSFBDUIPPLTFJC
    

    View Slide

36. ͦͷଞͷ)PPLT"1*
    IUUQTSFBDUKTPSHEPDTIPPLTSFGFSFODFIUNM
    

    View Slide

37. 3VMFTPG)PPLTͱ&4-JOU1MVHJO
    

    View Slide

38. w)PPLTΛѻ͏ࡍʹ͸ɺ͍͔ͭ͘஫ҙ͢Δඞཁ͕͋Δ
    w$VTUPN)PPLT͔3FBDU)PPLTͷதͰͷΈݺͼग़͢
    wϧʔϓɺ৚݅಺ɺωετ͞Εͨؔ਺಺Ͱ࢖Θͳ͍
    3VMFTPG)PPLT
    

    View Slide

39. 3VMFTPG)PPLT
    

    View Slide

40. w)PPLTͷ3VMFTʹԊΘͳ͍৔߹͸FSSPSʹ
    wVTF&⒎FDUͷEFQT͕ޡͬͯΔ৔߹͸XBSOʹ
    &4-JOU1MVHJOFTMJOUQMVHJOSFBDUIPPLT
    
    

    View Slide

41. 3FBDU)PPLT5FTU
    

    View Slide

42. SFBDUIPPLTUFTUJOHMJCSBSZ
    IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ
    

    View Slide

43. SFBDUIPPLTUFTUJOHMJCSBSZ
    IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ
    

    View Slide

44. )PXUPUFTUDPNQPOFOUTUIBUVTF)PPLT
    IUUQTSFBDUKTPSHEPDTIPPLTGBRIUNMIPXUPUFTUDPNQPOFOUTUIBUVTFIPPLT
    

    View Slide

45. ·ͱΊ
    

    View Slide

46. ·ͱΊ
    w໌೔͔Β3FBDU)PPLTΛ࢖͍ͬͯ͜͏ʂ
    w5ZQF4DSJQUͱͷ૬ੑ΋͍͍
    w$VTUPN)PPLTͷϥΠϒϥϦ͸ͨ͘͞Μ͋Δɺ

    ࣮૷Λࢀߟʹͯ࢝͠Ί͍͚ͯΔ
    w·ͣ͸ެࣜυΩϡϝϯτಡΉɺ'"2΋ॆ࣮͍ͯ͠Δ
    

    View Slide

47. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide