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

Transcript

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

   View Slide

2. ࣗݾ঺հ
   ਐ໦ɹ༟େ
   LPOPLJ@OBOOPLJ
   TIJOOPLJ
   גࣜձࣾQBMBOΤϯδχΞ
   w 3FBDU ͓΋ʹ3FBDU/BUJWF
   
   w 'JSFCBTF "84"NQMJGZ

   4FSWFSMFTT'SBNFXPSL
   w 8FC"3਺ֶ୲౰
   

   View Slide

3. גࣜձࣾQBMBOʹ͍ͭͯ
   w גࣜձࣾQBMBO͸ɺ8FCͷઌ୺ٕज़ͷՄೳੑΛ୳ٻ͓ͯ͠Γ

   ϒϥ΢β্Ͱಈ͘73"3 8FCY3
   Λݚڀɺ։ൃ͍ͯ͠·͢
   

   View Slide

4. 3FBDU
   3FBDU/BUJWF
   ೥ͷ3FBDUͱ5ZQF4DSJQU
   w #BCFM ϦϦʔε
   ͔Β!CBCFMQMVHJOUSBOTGPSNUZQFTDSJQU௥Ճ
   w DSFBUFSFBDUBQQ΍SFBDUOBUJWFJOJU͕5ZQF4DSJQUςϯϓϨʔτΛఏڙ

   ͨ͜͠ͱʹΑͬͯҰؾʹಋೖͷϋʔυϧ͕Լ͕ͬͨ
   

   View Slide

5. 5ZQF4DSJQUͱ
   %FWFMPQFS&YQFSJFODF
   

   View Slide

6. 5ZQF4DSJQUΛ࢖͏ͱ
   w ίʔυิ׬͕௒ڧྗʹޮ͘Α͏ʹͳΔ
   w ୯ʹೖྗ͕؆୯ʹͳΔ͚ͩͰͳ͘υΩϡϝϯτ୅ΘΓʹͳΔͨΊ

   ϓϩδΣΫτͷҾ͖ܧ͗΍৽͍͠ϥΠϒϥϦΛ࢖͏৔߹ʹ΋༗ޮ
   w ՕॴΛมߋ͢Δͱؔ࿈͢Δͱ͜Ζ͕ܕΤϥʔʹͳΔͨΊ

   ϦϑΝΫλϦϯά͕͠΍͘͢ͳΔ
   

   View Slide

7. 5ZQF4DSJQUΛ࢖͏ͱ
   w ίʔυิ׬͕௒ڧྗʹޮ͘Α͏ʹͳΔ
   w ୯ʹೖྗ͕؆୯ʹͳΔ͚ͩͰͳ͘υΩϡϝϯτ୅ΘΓʹͳΔͨΊ

   ϓϩδΣΫτͷҾ͖ܧ͗΍৽͍͠ϥΠϒϥϦΛ࢖͏৔߹ʹ΋༗ޮ
   w ՕॴΛมߋ͢Δͱؔ࿈͢Δͱ͜Ζ͕ܕΤϥʔʹͳΔͨΊ

   ϦϑΝΫλϦϯά͕͠΍͘͢ͳΔ
   w ίʔυͷهड़ྔ͕૿͑ͯ։ൃεϐʔυ͕མͪΔʁʁ
   

   View Slide

8. 'SPOUFOE
   1SJNJUJWF$PNQPOFOUT
   -JCSBSZ
   $POUBJOFS$PNQPOFOUT
   4UBUF
   6*
   $PNQPOFOUT
   8FC"1*
   #BDLFOE
   ࣗ෼Ͱܕఆٛ͢Δൣғ
   ʢ͍͍ͩͨ͜Μͳײͩ͡Ζ͏ͱ͍͏ਤ

   ɹɹͳͷͰ͋·Γ৴༻͠ͳ͍Ͱ͍ͩ͘͞ʣ
   

   View Slide

9. 'SPOUFOE
   1SJNJUJWF$PNQPOFOUT
   -JCSBSZ
   $POUBJOFS$PNQPOFOUT
   4UBUF
   6*
   $PNQPOFOUT
   8FC"1*
   #BDLFOE
   ࣗ෼Ͱܕఆٛ͢Δൣғ
   w جຊͱͳΔ8FC"1*΍3FBDUͷجຊ
   ίϯϙʔωϯτ͸UZQFTDSJQUMJC΍

   !UZQFTSFBDUʹఆٛࡁΈ
   w ϥΠϒϥϦ΋Ͱ͖ΔݶΓܕఆٛͷ͋Δ΋
   ͷΛ࢖͏
   

   View Slide

10. 'SPOUFOE
    1SJNJUJWF$PNQPOFOUT
    -JCSBSZ
    $POUBJOFS$PNQPOFOUT
    4UBUF
    6*
    $PNQPOFOUT
    8FC"1*
    #BDLFOE
    ࣗ෼Ͱܕఆٛ͢Δൣғ
    w جຊͱͳΔ8FC"1*΍3FBDUͷجຊ
    ίϯϙʔωϯτ͸UZQFTDSJQUMJC΍

    !UZQFTSFBDUʹఆٛࡁΈ
    w ϥΠϒϥϦ΋Ͱ͖ΔݶΓܕఆٛͷ͋Δ΋
    ͷΛ࢖͏
    w 6*$PNQPOFOUʹ͍ͭͯ͸QSPQTΛ্
    ख͘ܧঝͨ͠ΓTUZMFEDPNQPOFOUT
    Λ࢖͑͹ඞཁ࠷খݶͰࡁΉ
    

    View Slide

11. '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ͷઃܭ΍֎քͱͷ௨৴͸υϝΠ
    ϯ஌ࣝͰ͋Γࣗ෼ͨͪͰఆٛ͢Δ
    

    View Slide

12. '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ͷઃܭ΍֎քͱͷ௨৴͸υϝΠ
    ϯ஌ࣝͰ͋Γࣗ෼ͨͪͰఆٛ͢Δ
    w 4UBUF͕มΘΔͱ$POUBJOFS
    $PNQPOFOUT΋มΘΔͷͰෆ҆ఆ
    

    View Slide

13. 3FBDU)PPLT͕

    ༩͑ͨӨڹ
    

    View Slide

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

    View Slide

15. )0$
    )PPLT
    ྫSFBDUSFEVY
    )PPLTҎલ
    w DPOOFDUͱ͍͏)0$ ߴ֊ίϯϙʔω
    ϯτίϯϙʔωϯτΛฦ͢ίϯϙʔω
    ϯτ
    ͰίϯϙʔωϯτΛғͬͯ
    QSPQTʹ஋Λ஫ೖ
    w ͲͷΑ͏ͳQSPQT͕஫ೖ͞ΕΔ͔஫ҙ
    ͕ඞཁ
    )PPLTΛ࢖͏ͱ
    w VTF4FMFDUPSVTF%JTQBUDIͱ͍͏

    )PPLTΛ࢖͍SFOEFS಺Ͱ஋Λ஫ೖ
    w QSPQTΛհ͓ͯ͠ΒͣɺSFOEFSΛݟΕ͹

    શ͕ͯ෼͔Δ
    

    View Slide

16. )0$
    )PPLT
    )0$ͷσʔλ͸QSPQTΛհͯ͠౉͞ΕΔ
    ͨΊɺෳ਺Օॴʹಉ͡ఆ͕ٛݱΕͯ͠·͏
    ʢ3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳʣ
    w 3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳ
    w 3FOEFS1SPQTΛ࢖͑͹ղܾͰ͖Δ͕

    ωετ͸ਂ͘ͳΔ
    ܕఆٛ৑௕ʹͳͬͪΌ͏໰୊
    

    View Slide

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

    ωετ͸ਂ͘ͳΔ
    QSPQTΛհͣ͞σʔλ͕ड͚औΕ

    ܕਪ࿦͞ΕΔͷͰίϯϙʔωϯτଆͰ

    ࠶ఆ͍ٛͯ͠ͳ͍
    

    View Slide

18. 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ͱ͸૬ੑ͕͍͍
    

    View Slide

19. '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ͷઃܭ΍֎քͱͷ௨৴͸υϝΠ
    ϯ஌ࣝͰ͋Γࣗ෼ͨͪͰఆٛ͢Δ
    w 4UBUF͕มΘΔͱ$POUBJOFS
    $PNQPOFOUT΋มΘΔͷͰෆ҆ఆ
    

    View Slide

20. '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ͷઃܭ΍֎քͱͷ௨৴͸υϝΠ
    ϯ஌ࣝͰ͋Γࣗ෼ͨͪͰఆٛ͢Δ
    w 4UBUF͕มΘΔͱ$POUBJOFS
    $PNQPOFOUT΋มΘΔͷͰෆ҆ఆ

    ˠ)PPLTΛ࢖͑͹৑௕ͳܕఆٛ͸ෆཁ
    

    View Slide

21. (SBQI2-Λ࢖ͬͨ

    ίʔυࣗಈੜ੒
    

    View Slide

22. "QPMMP$MJFOU
    w (SBQI2-ΫϥΠΞϯτʢ3FBDUҎ֎ʹ΋ରԠʣ
    w ಠࣗͷΩϟογϡػߏΛ࣋ͪɺ௨৴ʹؔ͢Δ4UBUFΛ಺෦Ͱ࣋ͬͯ͘ΕΔ
    w SFBDUBQPMMPIPPLTͱ͍͏αʔυύʔςΟϥΠϒϥϦ͕ଘࡏ͍͕ͯͨ͠

    ʹ!BQPMMPSFBDUIPPLT͕ొ৔͠ެࣜʹ3FBDU)PPLTରԠ
    

    View Slide

23. "QPMMP$MJFOU
    w (SBQI2-ΫϥΠΞϯτʢ3FBDUҎ֎ʹ΋ରԠʣ
    w ಠࣗͷΩϟογϡػߏΛ࣋ͪɺ௨৴ʹؔ͢Δ4UBUFΛ಺෦Ͱ࣋ͬͯ͘ΕΔ
    w SFBDUBQPMMPIPPLTͱ͍͏αʔυύʔςΟϥΠϒϥϦ͕ଘࡏ͍͕ͯͨ͠

    ʹ!BQPMMPSFBDUIPPLT͕ొ৔͠ެࣜʹ3FBDU)PPLTରԠ
    w 5ZQF4DSJQUͰ࣮૷͞Ε͓ͯΓܕఆ͕ٛ࢖͑Δ͕

    (SBQI2-εΩʔϚʹ߹ΘͤͯຖճखಈͰܕఆٛ͢Δͷ͸େม
    

    View Slide

24. View Slide

25. (SBQI2-͔Βίʔυࣗಈੜ੒
    w (SBQI2-$PEF(FOFSBUPSΛ࢖͏ͱHSBQIRMʹఆٛͨ͠εΩʔϚ͔Β

    ܕఆٛͱҾ਺͕౉͞Εͨঢ়ଶͷ)PPLTΛੜ੒ͯ͘͠ΕΔ
    w "QPMMP$PEFHFO "NQMJGZ$PEFHFOͳͲ΋͋Δ͕ݱঢ়Ұ൪࢖͍উख͕ྑ͔ͬͨ
    

    View Slide

26. σϞ
    w ͕࣌ؒ͋Ε͹
    

    View Slide

27. 'SPOUFOE
    1SJNJUJWF$PNQPOFOUT
    -JCSBSZ
    $POUBJOFS$PNQPOFOUT
    4UBUF
    6*
    $PNQPOFOUT
    8FC"1*
    #BDLFOE
    ࣗ෼Ͱܕఆٛ͢Δൣғ
    (SBQI2-εΩʔϚͱ

    6*$PNQPOFOUͷઃܭ

    ʹ͚ͩूத͢Ε͹͍͍ʂʂ
    

    View Slide

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

    View Slide

29. ·ͱΊ
    w3FBDU5ZQF4DSJQUͳΒಋೖϋʔυϧ͸௿͍
    w໘౗ͳͱ͜Ζ͸ܕਪ࿦ʹཔͬͨΓࣗಈੜ੒ͯ͠

    ίʔυิ׬ͳͲͷϝϦοτ͚ͩڗड͠Α͏
    w৑௕ͳܕఆ͕ٛཁΒͳ͘ͳͬͨͷ͸೥ʹొ৔ͨ͠

    3FBDU)PPLT͕΋ͨΒٕͨ͠ज़తͳϒϨΠΫεϧʔ
    w͞Βʹ֎քͱͷ௨৴΍ؔ࿈͢Δ4UBUFΛࣗಈੜ੒

    Ͱ͖ΔͱҰؾʹָʹͳΔ
    w ͦͷ఺ݱঢ়͸(SBQI2-͕Ұาൈ͖Μग़͍ͯΔ
    

    View Slide

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

    View Slide