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

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

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

Yudai Shinnoki

December 12, 2019
Tweet

More Decks by Yudai Shinnoki

Other Decks in Programming

Transcript

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

    .FHVSPFT
    :VEBJ4IJOOPLJ

    View Slide

  2. ࣗݾ঺հ
    ਐ໦ɹ༟େ
    [email protected]
    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