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

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

C951afc0782b7d3d4800e25b4a4938a9?s=128

Yudai Shinnoki

December 12, 2019
Tweet

Transcript

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

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

    'JSFCBTF "84"NQMJGZ
 4FSWFSMFTT'SBNFXPSL w 8FC"3਺ֶ୲౰
  3. גࣜձࣾQBMBOʹ͍ͭͯ w גࣜձࣾQBMBO͸ɺ8FCͷઌ୺ٕज़ͷՄೳੑΛ୳ٻ͓ͯ͠Γ
 ϒϥ΢β্Ͱಈ͘73"3 8FCY3 Λݚڀɺ։ൃ͍ͯ͠·͢

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

  5. 5ZQF4DSJQUͱ %FWFMPQFS&YQFSJFODF

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

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

    ίʔυͷهड़ྔ͕૿͑ͯ։ൃεϐʔυ͕མͪΔʁʁ
  8. 'SPOUFOE 1SJNJUJWF$PNQPOFOUT -JCSBSZ $POUBJOFS$PNQPOFOUT 4UBUF 6* $PNQPOFOUT 8FC"1* #BDLFOE ࣗ෼Ͱܕఆٛ͢Δൣғ

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

    w جຊͱͳΔ8FC"1*΍3FBDUͷجຊ ίϯϙʔωϯτ͸UZQFTDSJQUMJC΍
 !UZQFTSFBDUʹఆٛࡁΈ w ϥΠϒϥϦ΋Ͱ͖ΔݶΓܕఆٛͷ͋Δ΋ ͷΛ࢖͏
  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 Λ࢖͑͹ඞཁ࠷খݶͰࡁΉ
  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ͷઃܭ΍֎քͱͷ௨৴͸υϝΠ ϯ஌ࣝͰ͋Γࣗ෼ͨͪͰఆٛ͢Δ
  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΋มΘΔͷͰෆ҆ఆ
  13. 3FBDU)PPLT͕
 ༩͑ͨӨڹ

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

  15. )0$ )PPLT ྫSFBDUSFEVY )PPLTҎલ w DPOOFDUͱ͍͏)0$ ߴ֊ίϯϙʔω ϯτίϯϙʔωϯτΛฦ͢ίϯϙʔω ϯτ ͰίϯϙʔωϯτΛғͬͯ

    QSPQTʹ஋Λ஫ೖ w ͲͷΑ͏ͳQSPQT͕஫ೖ͞ΕΔ͔஫ҙ ͕ඞཁ )PPLTΛ࢖͏ͱ w VTF4FMFDUPSVTF%JTQBUDIͱ͍͏
 )PPLTΛ࢖͍SFOEFS಺Ͱ஋Λ஫ೖ w QSPQTΛհ͓ͯ͠ΒͣɺSFOEFSΛݟΕ͹
 શ͕ͯ෼͔Δ
  16. )0$ )PPLT )0$ͷσʔλ͸QSPQTΛհͯ͠౉͞ΕΔ ͨΊɺෳ਺Օॴʹಉ͡ఆ͕ٛݱΕͯ͠·͏ ʢ3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳʣ w 3FUVSO5ZQF౳Λ࢖ͬͯ޻෉͸Մೳ w 3FOEFS1SPQTΛ࢖͑͹ղܾͰ͖Δ͕
 ωετ͸ਂ͘ͳΔ

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


    ωετ͸ਂ͘ͳΔ QSPQTΛհͣ͞σʔλ͕ड͚औΕ
 ܕਪ࿦͞ΕΔͷͰίϯϙʔωϯτଆͰ
 ࠶ఆ͍ٛͯ͠ͳ͍
  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ͱ͸૬ੑ͕͍͍
  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΋มΘΔͷͰෆ҆ఆ
  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Λ࢖͑͹৑௕ͳܕఆٛ͸ෆཁ
  21. (SBQI2-Λ࢖ͬͨ
 ίʔυࣗಈੜ੒

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

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


    (SBQI2-εΩʔϚʹ߹ΘͤͯຖճखಈͰܕఆٛ͢Δͷ͸େม
  24. None
  25. (SBQI2-͔Βίʔυࣗಈੜ੒ w (SBQI2-$PEF(FOFSBUPSΛ࢖͏ͱHSBQIRMʹఆٛͨ͠εΩʔϚ͔Β
 ܕఆٛͱҾ਺͕౉͞Εͨঢ়ଶͷ)PPLTΛੜ੒ͯ͘͠ΕΔ w "QPMMP$PEFHFO "NQMJGZ$PEFHFOͳͲ΋͋Δ͕ݱঢ়Ұ൪࢖͍উख͕ྑ͔ͬͨ

  26. σϞ w ͕࣌ؒ͋Ε͹

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

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

  29. ·ͱΊ w3FBDU 5ZQF4DSJQUͳΒಋೖϋʔυϧ͸௿͍ w໘౗ͳͱ͜Ζ͸ܕਪ࿦ʹཔͬͨΓࣗಈੜ੒ͯ͠
 ίʔυิ׬ͳͲͷϝϦοτ͚ͩڗड͠Α͏ w৑௕ͳܕఆ͕ٛཁΒͳ͘ͳͬͨͷ͸೥ʹొ৔ͨ͠
 3FBDU)PPLT͕΋ͨΒٕͨ͠ज़తͳϒϨΠΫεϧʔ w͞Βʹ֎քͱͷ௨৴΍ؔ࿈͢Δ4UBUFΛࣗಈੜ੒
 Ͱ͖ΔͱҰؾʹָʹͳΔ w

    ͦͷ఺ݱঢ়͸(SBQI2-͕Ұาൈ͖Μग़͍ͯΔ
  30. એ఻ w ୅ʑ໦3FBDU/BUJWF΋͘΋͘ձ໌೔։࠵͠·͢ʂ