これからはじめるReact Hooks

by sakito

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

/BNF 4BLJUP.VLBJ 5XJUUFS  !@@TBLJUP@@ $PNQBOZ $ZCP[VJOD  'SPOUFOE&YQFSU5FBN "CPVUNF

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

3FBDU)PPLTͱ͸ʁ

Slide 5

Slide 5 text

w3FBDUW͔Β৽͘͠௥Ճ͞Εͨػೳ w$MBTTDPNQPOFOUTΛ࢖༻͢Δ͜ͱͳ͘ɺ  ؔ਺ίϯϙʔωϯτͰ༷ʑͳ"1*Λ࢖͑Δ w3FOEFSQSPQT΍)P$ͳͲΛ࢖༻͠ͳͯ͘΋  ϩδοΫͷ෼཭͕Մೳʹͳͬͨ wݱࡏ͸$MBTTDPNQPOFOU͕࡟আ͞ΕΔΘ͚Ͱ͸ͳ͘ɺ  ஈ֊తʹҠߦ͕Մೳ wഁյతมߋ͸ؚ·Εͳ͍ 3FBDU)PPLTͱ͸ʁ

Slide 6

Slide 6 text

w -JGFDZDMF΍4UBUFͷϩδοΫΛ࠶ར༻͔ͨͬͨ͠ w ͦͷͨΊSFOEFSQSPQT΍)P$ͱ͍͏ख๏Λ࢖͍ͬͯͨ w ͔͠͠ɺ͜ͷख๏͸ίϯϙʔωϯτ֊૚͕ॏͳΓ  ϥούʔ஍ࠈͱͳΓಡΈʹ͍͘໰୊఺͕͋ͬͨ w ͦ͜Ͱɺίϯϙʔωϯτ֊૚ͳͲʹґଘͤͣɺ  ϩδοΫΛ࢖͍ճͤΔΑ͏ʹ)PPLT͕஀ੜͨ͠ w ·ͨɺ-JGFDZDMF΍4UBUFΛ࢖༻͢Δࡍʹ  ؔ਺ίϯϙʔωϯτ͔Β$MBTTDPNQPOFOUT΁  ϦϑΝΫλϦϯάΛ͠ͳ͍ͱ͍͚ͳ͍ख͕ؒ͋ͬͨ 3FBDU)PPLT͸ͳͥಋೖ͞Εͨͷ͔

Slide 7

Slide 7 text

SFBDUKTSGDTSFBDUIPPLTNE IUUQTHJUIVCDPNSFBDUKTSGDTCMPCNBTUFSUFYUSFBDUIPPLTNE

Slide 8

Slide 8 text

SFBDUKTSGDTSFBDUIPPLTNE IUUQTHJUIVCDPNSFBDUKTSGDTQVMM

Slide 9

Slide 9 text

3FBDU$POG IUUQTXXXZPVUVCFDPNXBUDI WEQX&)%IC.

Slide 10

Slide 10 text

.BLJOH4FOTFPG3FBDU)PPLT IUUQTEFWUPEBO@BCSBNPWNBLJOHTFOTFPGSFBDUIPPLTFJC

Slide 11

Slide 11 text

*OUSPEVDJOH)PPLT IUUQTSFBDUKTPSHEPDTIPPLTJOUSPIUNM

Slide 12

Slide 12 text

VTF4UBUFͱVTF&⒎FDU

Slide 13

Slide 13 text

VTF4UBUF$MBTT$PNQPOFOUͷ৔߹

Slide 14

Slide 14 text

VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹

Slide 15

Slide 15 text

VTF4UBUF'VODUJPO$PNQPOFOUͷ৔߹ ঢ়ଶ஋ ߋ৽͢Δؔ਺ ॳظ஋

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

VTF&⒎FDU$MBTT$PNQPOFOUͷ৔߹

Slide 18

Slide 18 text

VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹ w DPNQPOFOU%JE.PVOU $PNQPOFOU%JE6QEBUF   DPNQPOFOU8JMM6ONPVOU͕·ͱ·ͬͨ΋ͷͱݴ͑Δ w ϨϯμϦϯάͷޙʹɺ࣮ߦ͞ΕΔ

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

VTF&⒎FDU'VODUJPO$PNQPOFOUͷ৔߹ w ୈೋҾ਺Λࢦఆ EFQT w ͜ͷͱ͖EFQTʹࢦఆ͞Εͨ஋ ͜ͷ৔߹͸ʮZFBSʯ ͕ൺֱ͞Εɺ  มߋ͕͋Δ৔߹ͷΈɺಈ࡞͢Δ

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

֤TUBUFΛߋ৽

Slide 28

Slide 28 text

w63-͸มߋ͞Εͳ͍ͷͰɺ  ॳظϨϯμϦϯάޙͷΈ  HFU"SUJDMF ͕ൃՐ͢Δ

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

$VTUPNIPPLT

Slide 31

Slide 31 text

͜ͷ··Ͱ͸7JFXͱϩδοΫ͕ಉ͡Օॴʹ

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

ϩδοΫͷΈ

Slide 34

Slide 34 text

WJFXͷΈ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ͦͷଞͷ)PPLT"1* IUUQTSFBDUKTPSHEPDTIPPLTSFGFSFODFIUNM

Slide 37

Slide 37 text

3VMFTPG)PPLTͱ&4-JOU1MVHJO

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

3VMFTPG)PPLT

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

3FBDU)PPLT5FTU

Slide 42

Slide 42 text

SFBDUIPPLTUFTUJOHMJCSBSZ IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ

Slide 43

Slide 43 text

SFBDUIPPLTUFTUJOHMJCSBSZ IUUQTHJUIVCDPNUFTUJOHMJCSBSZSFBDUIPPLTUFTUJOHMJCSBSZ

Slide 44

Slide 44 text

)PXUPUFTUDPNQPOFOUTUIBUVTF)PPLT IUUQTSFBDUKTPSHEPDTIPPLTGBRIUNMIPXUPUFTUDPNQPOFOUTUIBUVTFIPPLT

Slide 45

Slide 45 text

·ͱΊ

Slide 46

Slide 46 text

·ͱΊ w໌೔͔Β3FBDU)PPLTΛ࢖͍ͬͯ͜͏ʂ w5ZQF4DSJQUͱͷ૬ੑ΋͍͍ w$VTUPN)PPLTͷϥΠϒϥϦ͸ͨ͘͞Μ͋Δɺ  ࣮૷Λࢀߟʹͯ࢝͠Ί͍͚ͯΔ w·ͣ͸ެࣜυΩϡϝϯτಡΉɺ'"2΋ॆ࣮͍ͯ͠Δ

Slide 47

Slide 47 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠