これからはじめるReact Hooks

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

Twitter
https://twitter.com/__sakito__

Transcript

1. ͜Ε͔Β͸͡ΊΔ3FBDU
   )PPLT
   #POpSF
   'SPOUFOE
   
   d
   ࠷৽ͷϑϩϯτΤϯυٕज़ʢՆٳΈ૯෮शʣd
2. /BNF
   
   
   
   
   4BLJUP
   .VLBJ
   5XJUUFS

   
   
   
   !@@TBLJUP@@
   $PNQBOZ
   
   
   
   
   $ZCP[V
   JOD
   

   
   
   
   'SPOUFOE
   &YQFSU
   5FBN "CPVU
   NF
3. w3FBDU
   )PPLTͱ͸ʁ
   wVTF4UBUFͱVTF&⒎FDU
   w$VTUPN
   )PPLT
   w3VMFT
   PG
   )PPLTͱ&4-JOU
   1MVHJO
   w3FBDU
   )PPLT
   5FTU "HFOEB
4. 3FBDU
   )PPLTͱ͸ʁ
5. w3FBDU
   W͔Β৽͘͠௥Ճ͞Εͨػೳ
   w$MBTT
   DPNQPOFOUTΛ࢖༻͢Δ͜ͱͳ͘ɺ
 ؔ਺ίϯϙʔωϯτͰ༷ʑͳ"1*Λ࢖͑Δ
   w3FOEFS
   QSPQT΍)P$ͳͲΛ࢖༻͠ͳͯ͘΋
 ϩδοΫͷ෼཭͕Մೳʹͳͬͨ
   wݱࡏ͸$MBTT
   DPNQPOFOU͕࡟আ͞ΕΔΘ͚Ͱ͸ͳ͘ɺ
 ஈ֊తʹҠߦ͕Մೳ
   wഁյతมߋ͸ؚ·Εͳ͍ 3FBDU
   )PPLTͱ͸ʁ
6. w -JGFDZDMF΍4UBUFͷϩδοΫΛ࠶ར༻͔ͨͬͨ͠
   w ͦͷͨΊSFOEFS
   QSPQT΍)P$ͱ͍͏ख๏Λ࢖͍ͬͯͨ
   w ͔͠͠ɺ͜ͷख๏͸ίϯϙʔωϯτ֊૚͕ॏͳΓ
 ϥούʔ஍ࠈͱͳΓಡΈʹ͍͘໰୊఺͕͋ͬͨ
   w ͦ͜Ͱɺίϯϙʔωϯτ֊૚ͳͲʹґଘͤͣɺ
 ϩδοΫΛ࢖͍ճͤΔΑ͏ʹ)PPLT͕஀ੜͨ͠
   w ·ͨɺ-JGFDZDMF΍4UBUFΛ࢖༻͢Δࡍʹ
 ؔ਺ίϯϙʔωϯτ͔Β$MBTT
   DPNQPOFOUT΁
 ϦϑΝΫλϦϯάΛ͠ͳ͍ͱ͍͚ͳ͍ख͕ؒ͋ͬͨ 3FBDU
   )PPLT͸ͳͥಋೖ͞Εͨͷ͔
7. SFBDUKTSGDT
   SFBDUIPPLTNE IUUQTHJUIVCDPNSFBDUKTSGDTCMPCNBTUFSUFYUSFBDUIPPLTNE
8. SFBDUKTSGDT
   SFBDUIPPLTNE IUUQTHJUIVCDPNSFBDUKTSGDTQVMM
9. 3FBDU
   $POG
    IUUQTXXXZPVUVCFDPNXBUDI WEQX&)%IC.
10. .BLJOH
    4FOTF
    PG
    3FBDU
    )PPLT IUUQTEFWUPEBO@BCSBNPWNBLJOHTFOTFPGSFBDUIPPLTFJC
11. *OUSPEVDJOH
    )PPLT IUUQTSFBDUKTPSHEPDTIPPLTJOUSPIUNM
12. VTF4UBUFͱVTF&⒎FDU
13. VTF4UBUF
    
    $MBTT
    $PNQPOFOUͷ৔߹
    
    
14. VTF4UBUF
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    
15. VTF4UBUF
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    ঢ়ଶ஋ ߋ৽͢Δؔ਺ ॳظ஋
16. VTF4UBUF
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    wෳ਺ͷ4UBUF΋࣮૷Մೳ
17. VTF&⒎FDU
    
    $MBTT
    $PNQPOFOUͷ৔߹
    
18. VTF&⒎FDU
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    w DPNQPOFOU%JE.PVOU $PNQPOFOU%JE6QEBUF 
 DPNQPOFOU8JMM6ONPVOU͕·ͱ·ͬͨ΋ͷͱݴ͑Δ
    w ϨϯμϦϯάͷޙʹɺ࣮ߦ͞ΕΔ
19. VTF&⒎FDU
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    VTF&⒎FDU͸ෳ਺ఆٛ͢Δ͜ͱ΋Ͱ͖Δ
20. VTF&⒎FDU
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    w ୈೋҾ਺Λࢦఆ EFQT
    w ͜ͷͱ͖EFQTʹࢦఆ͞Εͨ஋ ͜ͷ৔߹͸ʮZFBSʯ ͕ൺֱ͞Εɺ
 มߋ͕͋Δ৔߹ͷΈɺಈ࡞͢Δ
21. VTF&⒎FDU
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    EFQTΛؒҧ͏ͱൺֱର৅͕ͳ͍ͷͰɺߋ৽͞Εͳ͍ͷͰ஫ҙ
22. VTF&⒎FDU
    
    'VODUJPO
    $PNQPOFOUͷ৔߹
    
    ؔ਺Λฦ٫͢Δ͜ͱͰɺDMFBOVQΛߦ͏͜ͱ͕Ͱ͖Δ
23. ࣮૷Λݟͳ͕ΒॲཧΛ௥͏
25. ϩʔσΟϯάදࣔޙɺऔಘ৘ใΛදࣔ
26. VTF4UBUFͰॳظ஋ͱTFUؔ਺Λఆٛ
27. ֤TUBUFΛߋ৽
28. w63-͸มߋ͞Εͳ͍ͷͰɺ
 ॳظϨϯμϦϯάޙͷΈ
 HFU"SUJDMF ͕ൃՐ͢Δ
29. ϩʔσΟϯάදࣔޙɺऔಘ৘ใΛදࣔ
30. $VTUPN
    IPPLT
31. ͜ͷ··Ͱ͸7JFXͱϩδοΫ͕ಉ͡Օॴʹ
33. ϩδοΫͷΈ
34. WJFXͷΈ
35. ͞Βʹৄ͍͠಺෦ͷ͜ͱ΋஌Γ͍ͨਓ IUUQTEFWUPEBO@BCSBNPWNBLJOHTFOTFPGSFBDUIPPLTFJC
36. ͦͷଞͷ)PPLT
    "1* IUUQTSFBDUKTPSHEPDTIPPLTSFGFSFODFIUNM
37. 3VMFT
    PG
    )PPLTͱ&4-JOU
    1MVHJO
38. w)PPLTΛѻ͏ࡍʹ͸ɺ͍͔ͭ͘஫ҙ͢Δඞཁ͕͋Δ
    w$VTUPN
    )PPLT͔3FBDU
    )PPLTͷதͰͷΈݺͼग़͢
    wϧʔϓɺ৚݅಺ɺωετ͞Εͨؔ਺಺Ͱ࢖Θͳ͍ 3VMFT
    PG
    )PPLT
39. 3VMFT
    PG
    )PPLT
40. w)PPLTͷ3VMFTʹԊΘͳ͍৔߹͸FSSPSʹ
    wVTF&⒎FDUͷEFQT͕ޡͬͯΔ৔߹͸XBSOʹ &4-JOU
    1MVHJO
    
    FTMJOUQMVHJOSFBDUIPPLT
    
    
41. 3FBDU
    )PPLT
    5FTU
42. SFBDUIPPLTUFTUJOHMJCSBSZ IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ
43. SFBDUIPPLTUFTUJOHMJCSBSZ IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ
44. )PX
    UP
    UFTU
    DPNQPOFOUT
    UIBU
    VTF
    )PPLT IUUQTSFBDUKTPSHEPDTIPPLTGBRIUNMIPXUPUFTUDPNQPOFOUTUIBUVTFIPPLT
45. ·ͱΊ
46. ·ͱΊ w໌೔͔Β3FBDU
    )PPLTΛ࢖͍ͬͯ͜͏ʂ
    w5ZQF4DSJQUͱͷ૬ੑ΋͍͍
    w$VTUPN
    )PPLTͷϥΠϒϥϦ͸ͨ͘͞Μ͋Δɺ
 ࣮૷Λࢀߟʹͯ࢝͠Ί͍͚ͯΔ
    w·ͣ͸ެࣜυΩϡϝϯτಡΉɺ'"2΋ॆ࣮͍ͯ͠Δ
47. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠