Upgrade to Pro — share decks privately, control downloads, hide ads and more …

これからはじめるReact Hooks

sakito
September 03, 2019

これからはじめるReact Hooks

sakito

September 03, 2019
Tweet

More Decks by sakito

Other Decks in Technology

Transcript

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

    View full-size slide

  2. /BNF
    4BLJUP.VLBJ
    5XJUUFS

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

    'SPOUFOE&YQFSU5FBN
    "CPVUNF

    View full-size slide

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

    View full-size slide

  4. 3FBDU)PPLTͱ͸ʁ

    View full-size slide

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

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

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

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

    View full-size slide

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

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

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

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

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

    View full-size slide

  7. SFBDUKTSGDTSFBDUIPPLTNE
    IUUQTHJUIVCDPNSFBDUKTSGDTCMPCNBTUFSUFYUSFBDUIPPLTNE

    View full-size slide

  8. SFBDUKTSGDTSFBDUIPPLTNE
    IUUQTHJUIVCDPNSFBDUKTSGDTQVMM

    View full-size slide

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

    View full-size slide

  10. .BLJOH4FOTFPG3FBDU)PPLT
    IUUQTEFWUPEBO@BCSBNPWNBLJOHTFOTFPGSFBDUIPPLTFJC

    View full-size slide

  11. *OUSPEVDJOH)PPLT
    IUUQTSFBDUKTPSHEPDTIPPLTJOUSPIUNM

    View full-size slide

  12. VTF4UBUFͱVTF&⒎FDU

    View full-size slide

  13. VTF4UBUF$MBTT$PNQPOFOUͷ৔߹

    View full-size slide

  14. VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹

    View full-size slide

  15. VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹

    ঢ়ଶ஋ ߋ৽͢Δؔ਺
    ॳظ஋

    View full-size slide

  16. VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹

    wෳ਺ͷ4UBUF΋࣮૷Մೳ

    View full-size slide

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

    View full-size slide

  18. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹

    w DPNQPOFOU%JE.PVOU $PNQPOFOU%JE6QEBUF 

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

    View full-size slide

  19. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹

    VTF&⒎FDU͸ෳ਺ఆٛ͢Δ͜ͱ΋Ͱ͖Δ

    View full-size slide

  20. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹

    w ୈೋҾ਺Λࢦఆ EFQT

    w ͜ͷͱ͖EFQTʹࢦఆ͞Εͨ஋ ͜ͷ৔߹͸ʮZFBSʯ
    ͕ൺֱ͞Εɺ

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

    View full-size slide

  21. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹

    EFQTΛؒҧ͏ͱൺֱର৅͕ͳ͍ͷͰɺߋ৽͞Εͳ͍ͷͰ஫ҙ

    View full-size slide

  22. VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹

    ؔ਺Λฦ٫͢Δ͜ͱͰɺDMFBOVQΛߦ͏͜ͱ͕Ͱ͖Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. ֤TUBUFΛߋ৽

    View full-size slide

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

    ॳظϨϯμϦϯάޙͷΈ

    HFU"SUJDMF
    ͕ൃՐ͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. ϩδοΫͷΈ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  33. 3VMFTPG)PPLTͱ&4-JOU1MVHJO

    View full-size slide

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

    View full-size slide

  35. 3VMFTPG)PPLT

    View full-size slide

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

    View full-size slide

  37. 3FBDU)PPLT5FTU

    View full-size slide

  38. SFBDUIPPLTUFTUJOHMJCSBSZ
    IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ

    View full-size slide

  39. SFBDUIPPLTUFTUJOHMJCSBSZ
    IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ

    View full-size slide

  40. )PXUPUFTUDPNQPOFOUTUIBUVTF)PPLT
    IUUQTSFBDUKTPSHEPDTIPPLTGBRIUNMIPXUPUFTUDPNQPOFOUTUIBUVTFIPPLT

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide