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

C951afc0782b7d3d4800e25b4a4938a9?s=47 Yudai Shinnoki
December 12, 2019
Programming
1
230

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

C951afc0782b7d3d4800e25b4a4938a9?s=128

Yudai Shinnoki

December 12, 2019
Tweet

More Decks by Yudai Shinnoki

See All by Yudai Shinnoki
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
5
340
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
740
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
380

Other Decks in Programming

See All in Programming
0b26590a0a8b0f1da140ed5de9b68379?s=48 usamik26
0
160
D12a80cab206033a820ccff8319f957b?s=48 s_uryu
1
310
60a71672b538fb50cc1d15c41c971255?s=48 blackbing
0
140
51f4d2341131b6b9bfa996bdb9b8dfa8?s=48 showmant
3
320
2bedb1eb8f841cd3c3ae584600b016e0?s=48 okunokentaro
1
450
F6baf93a0833a98bdc8184c214f4c468?s=48 rgoswami
0
120
6139fd48daa26e786794598c4a6b546a?s=48 ninjinkun
2
320
3cfad86677c5966ecfe9b81955fa3489?s=48 youkan2002
0
270
9da5d5cc4b6a9f28058152e28364b02a?s=48 prof18
1
130
9ff3a9c6cbb2100fba18ad8f4bef0e4f?s=48 yucao24hours
3
590
Dcbf2269af2483cabf43128ad1718c11?s=48 grapecity_dev
0
310
36ee3f54c56704a49805ffb32b596930?s=48 44x1carbon
0
100

Featured

See All Featured
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
319
53k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
447
36k
15f2b8221f247985a27a627d2ece72f0?s=48 pauljervisheath
193
15k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1019
370k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
283
18k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
145
19k
9375a9529679f1b42b567a640d775e7d?s=48 schacon
144
6.5k
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
71
7k
5f83ef806155b403c3393160ce51f955?s=48 jlugia
216
16k
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
5
300
D47656e20ff5e42f125fc5ea0fd636c6?s=48 tmm1
61
7.5k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k

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΋͘΋͘ձ໌೔։࠵͠·͢ʂ