TypeScript と React Hooks と GraphQL のステキな関係性

Slide 1

Slide 1 text

5ZQF4DSJQUͱ 3FBDU)PPLTͱ (SBQI2-ͷεςΩͳؔ܎ੑ .FHVSPFT :VEBJ4IJOOPLJ

Slide 2

Slide 2 text

ࣗݾ঺հ ਐ໦ɹ༟େ LPOPLJ@OBOOPLJ TIJOOPLJ גࣜձࣾQBMBOΤϯδχΞ w 3FBDU ͓΋ʹ3FBDU/BUJWF w 'JSFCBTF "84"NQMJGZ  4FSWFSMFTT'SBNFXPSL w 8FC"3਺ֶ୲౰

Slide 3

Slide 3 text

גࣜձࣾQBMBOʹ͍ͭͯ w גࣜձࣾQBMBO͸ɺ8FCͷઌ୺ٕज़ͷՄೳੑΛ୳ٻ͓ͯ͠Γ  ϒϥ΢β্Ͱಈ͘73"3 8FCY3 Λݚڀɺ։ൃ͍ͯ͠·͢

Slide 4

Slide 4 text

3FBDU 3FBDU/BUJWF ೥ͷ3FBDUͱ5ZQF4DSJQU w #BCFM ϦϦʔε ͔Β!CBCFMQMVHJOUSBOTGPSNUZQFTDSJQU௥Ճ w DSFBUFSFBDUBQQ΍SFBDUOBUJWFJOJU͕5ZQF4DSJQUςϯϓϨʔτΛఏڙ  ͨ͜͠ͱʹΑͬͯҰؾʹಋೖͷϋʔυϧ͕Լ͕ͬͨ

Slide 5

Slide 5 text

5ZQF4DSJQUͱ %FWFMPQFS&YQFSJFODF

Slide 6

Slide 6 text

5ZQF4DSJQUΛ࢖͏ͱ w ίʔυิ׬͕௒ڧྗʹޮ͘Α͏ʹͳΔ w ୯ʹೖྗ͕؆୯ʹͳΔ͚ͩͰͳ͘υΩϡϝϯτ୅ΘΓʹͳΔͨΊ  ϓϩδΣΫτͷҾ͖ܧ͗΍৽͍͠ϥΠϒϥϦΛ࢖͏৔߹ʹ΋༗ޮ w ՕॴΛมߋ͢Δͱؔ࿈͢Δͱ͜Ζ͕ܕΤϥʔʹͳΔͨΊ  ϦϑΝΫλϦϯά͕͠΍͘͢ͳΔ

Slide 7

Slide 7 text

5ZQF4DSJQUΛ࢖͏ͱ w ίʔυิ׬͕௒ڧྗʹޮ͘Α͏ʹͳΔ w ୯ʹೖྗ͕؆୯ʹͳΔ͚ͩͰͳ͘υΩϡϝϯτ୅ΘΓʹͳΔͨΊ  ϓϩδΣΫτͷҾ͖ܧ͗΍৽͍͠ϥΠϒϥϦΛ࢖͏৔߹ʹ΋༗ޮ w ՕॴΛมߋ͢Δͱؔ࿈͢Δͱ͜Ζ͕ܕΤϥʔʹͳΔͨΊ  ϦϑΝΫλϦϯά͕͠΍͘͢ͳΔ w ίʔυͷهड़ྔ͕૿͑ͯ։ൃεϐʔυ͕མͪΔʁʁ

Slide 8

Slide 8 text

'SPOUFOE 1SJNJUJWF$PNQPOFOUT -JCSBSZ $POUBJOFS$PNQPOFOUT 4UBUF 6* $PNQPOFOUT 8FC"1* #BDLFOE ࣗ෼Ͱܕఆٛ͢Δൣғ ʢ͍͍ͩͨ͜Μͳײͩ͡Ζ͏ͱ͍͏ਤ  ɹɹͳͷͰ͋·Γ৴༻͠ͳ͍Ͱ͍ͩ͘͞ʣ

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

'SPOUFOE 1SJNJUJWF$PNQPOFOUT -JCSBSZ $POUBJOFS$PNQPOFOUT 4UBUF 6* $PNQPOFOUT 8FC"1* #BDLFOE ࣗ෼Ͱܕఆٛ͢Δൣғ w جຊͱͳΔ8FC"1*΍3FBDUͷجຊ ίϯϙʔωϯτ͸UZQFTDSJQUMJC΍  !UZQFTSFBDUʹఆٛࡁΈ w ϥΠϒϥϦ΋Ͱ͖ΔݶΓܕఆٛͷ͋Δ΋ ͷΛ࢖͏ w 6*$PNQPOFOUʹ͍ͭͯ͸QSPQTΛ্ ख͘ܧঝͨ͠ΓTUZMFEDPNQPOFOUT Λ࢖͑͹ඞཁ࠷খݶͰࡁΉ w 4UBUFͷઃܭ΍֎քͱͷ௨৴͸υϝΠ ϯ஌ࣝͰ͋Γࣗ෼ͨͪͰఆٛ͢Δ

Slide 12

Slide 12 text

Slide 13

Slide 13 text

3FBDU)PPLT͕  ༩͑ͨӨڹ

Slide 14

Slide 14 text

3FBDU)PPLT w 3FBDU ϦϦʔε Ͱొ৔ͨ͠'VODUJPO$PNQPOFOU಺ͰͷΈ࢖ ͑Δ"1*܈ w 'VODUJPO$PNQPOFOUͰ$MBTT$PNQPOFOU૬౰ͷಈ͖ΛͰ͖ΔΑ͏ʹ͢ ΔͨΊʹ։ൃ͞Ε͕ͨɺͦΕ͚ͩʹͱͲ·Βͳ͍දݱྗ͕͋Δ

Slide 15

Slide 15 text

)0$ )PPLT ྫSFBDUSFEVY )PPLTҎલ w DPOOFDUͱ͍͏)0$ ߴ֊ίϯϙʔω ϯτίϯϙʔωϯτΛฦ͢ίϯϙʔω ϯτ ͰίϯϙʔωϯτΛғͬͯ QSPQTʹ஋Λ஫ೖ w ͲͷΑ͏ͳQSPQT͕஫ೖ͞ΕΔ͔஫ҙ ͕ඞཁ )PPLTΛ࢖͏ͱ w VTF4FMFDUPSVTF%JTQBUDIͱ͍͏  )PPLTΛ࢖͍SFOEFS಺Ͱ஋Λ஫ೖ w QSPQTΛհ͓ͯ͠ΒͣɺSFOEFSΛݟΕ͹  શ͕ͯ෼͔Δ

Slide 16

Slide 16 text

)0$ )PPLT )0$ͷσʔλ͸QSPQTΛհͯ͠౉͞ΕΔ ͨΊɺෳ਺Օॴʹಉ͡ఆ͕ٛݱΕͯ͠·͏ ʢ3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳʣ w 3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳ w 3FOEFS1SPQTΛ࢖͑͹ղܾͰ͖Δ͕  ωετ͸ਂ͘ͳΔ ܕఆٛ৑௕ʹͳͬͪΌ͏໰୊

Slide 17

Slide 17 text

ܕఆٛ৑௕ʹͳͬͪΌ͏໰୊ )0$ )PPLT )0$ͷσʔλ͸QSPQTΛհͯ͠౉͞ΕΔ ͨΊɺෳ਺Օॴʹಉ͡ఆ͕ٛݱΕͯ͠·͏ ʢ3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳʣ w 3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳ w 3FOEFS1SPQTΛ࢖͑͹ղܾͰ͖Δ͕  ωετ͸ਂ͘ͳΔ QSPQTΛհͣ͞σʔλ͕ड͚औΕ  ܕਪ࿦͞ΕΔͷͰίϯϙʔωϯτଆͰ  ࠶ఆ͍ٛͯ͠ͳ͍

Slide 18

Slide 18 text

3FBDU)PPLTͱ͸݁ہԿͳͷ͔ )0$ )PPLT SFOEFS SFOEFS )PPLTҎલ w ਌ίϯϙʔωϯτ΍)0$͔Β౉͞ΕΔ QSPQT͕มԽ͢Δ͜ͱͰ࠶SFOEFS w $MBTT$PNQPOFOUͰ͸TFU4UBUFͰ  ࣗ෼ࣗ਎ͷSFOEFSΛଅ͢͜ͱ͕ग़དྷͨ )PPLTΛ࢖͏ͱ w QSPQTΛհͣ͞ʹ஋Λ஫ೖͰ͖Δ w SFOEFS಺ʹॻ͍ͨ)PPLTʹΑͬͯ  ࣗ෼ࣗ਎͕࠶SFOEFS͞ΕΔՄೳੑ͕͋Δ SFOEFS͕ԿͰ΋Ͱ͖ͯ͠·͏ͷ͸͕ͩ ܕਪ࿦͠΍͘͢5ZQF4DSJQUͱ͸૬ੑ͕͍͍

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

(SBQI2-Λ࢖ͬͨ  ίʔυࣗಈੜ੒

Slide 22

Slide 22 text

Slide 23

Slide 23 text

"QPMMP$MJFOU w (SBQI2-ΫϥΠΞϯτʢ3FBDUҎ֎ʹ΋ରԠʣ w ಠࣗͷΩϟογϡػߏΛ࣋ͪɺ௨৴ʹؔ͢Δ4UBUFΛ಺෦Ͱ࣋ͬͯ͘ΕΔ w SFBDUBQPMMPIPPLTͱ͍͏αʔυύʔςΟϥΠϒϥϦ͕ଘࡏ͍͕ͯͨ͠  ʹ!BQPMMPSFBDUIPPLT͕ొ৔͠ެࣜʹ3FBDU)PPLTରԠ w 5ZQF4DSJQUͰ࣮૷͞Ε͓ͯΓܕఆ͕ٛ࢖͑Δ͕  (SBQI2-εΩʔϚʹ߹ΘͤͯຖճखಈͰܕఆٛ͢Δͷ͸େม

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

(SBQI2-͔Βίʔυࣗಈੜ੒ w (SBQI2-$PEF(FOFSBUPSΛ࢖͏ͱHSBQIRMʹఆٛͨ͠εΩʔϚ͔Β  ܕఆٛͱҾ਺͕౉͞Εͨঢ়ଶͷ)PPLTΛੜ੒ͯ͘͠ΕΔ w "QPMMP$PEFHFO "NQMJGZ$PEFHFOͳͲ΋͋Δ͕ݱঢ়Ұ൪࢖͍উख͕ྑ͔ͬͨ

Slide 26

Slide 26 text

σϞ w ͕࣌ؒ͋Ε͹

Slide 27

Slide 27 text

'SPOUFOE 1SJNJUJWF$PNQPOFOUT -JCSBSZ $POUBJOFS$PNQPOFOUT 4UBUF 6* $PNQPOFOUT 8FC"1* #BDLFOE ࣗ෼Ͱܕఆٛ͢Δൣғ (SBQI2-εΩʔϚͱ  6*$PNQPOFOUͷઃܭ  ʹ͚ͩूத͢Ε͹͍͍ʂʂ

Slide 28

Slide 28 text

͓·͚3&45"1*ͷ৔߹ w 0QFO"1* 4XBHHFS (FOFSBUPSʹUZQFTDSJQUSFEVYRVFSZ͕௥Ճ͞Ε͍ͯͨ w αϯϓϧίʔυΛݟΔݶΓ"QPMMP$MJFOUʹࣅͨॻ͖ํͰॻ͚ͦ͏Ͱྑͦ͞͏ͩ ͕ɺ೔ຊޠͷ৘ใ͸ΨνͰͭ΋ͳͦ͞͏

Slide 29

Slide 29 text

·ͱΊ w3FBDU5ZQF4DSJQUͳΒಋೖϋʔυϧ͸௿͍ w໘౗ͳͱ͜Ζ͸ܕਪ࿦ʹཔͬͨΓࣗಈੜ੒ͯ͠  ίʔυิ׬ͳͲͷϝϦοτ͚ͩڗड͠Α͏ w৑௕ͳܕఆ͕ٛཁΒͳ͘ͳͬͨͷ͸೥ʹొ৔ͨ͠  3FBDU)PPLT͕΋ͨΒٕͨ͠ज़తͳϒϨΠΫεϧʔ w͞Βʹ֎քͱͷ௨৴΍ؔ࿈͢Δ4UBUFΛࣗಈੜ੒  Ͱ͖ΔͱҰؾʹָʹͳΔ w ͦͷ఺ݱঢ়͸(SBQI2-͕Ұาൈ͖Μग़͍ͯΔ

Slide 30

Slide 30 text

એ఻ w ୅ʑ໦3FBDU/BUJWF΋͘΋͘ձ໌೔։࠵͠·͢ʂ