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

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

C951afc0782b7d3d4800e25b4a4938a9?s=47 Yudai Shinnoki
December 12, 2019
Programming
2
320

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

C951afc0782b7d3d4800e25b4a4938a9?s=128

Yudai Shinnoki

December 12, 2019
Tweet

More Decks by Yudai Shinnoki

See All by Yudai Shinnoki
AWS “““触って””” みた
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
34
体に馴染む開発環境 ~ghqはいいぞ~
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
520
組織戦略と GraphQL、Hasura
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
2
3.2k
Hasura とは何者か メリット・デメリット
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
9
1.6k
リリース前に知りたいネイティブのあれこれ
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
910
外部委託の立場から半ば強引にLaravelを導入した話
C951afc0782b7d3d4800e25b4a4938a9?s=48 shinnoki
0
480

Other Decks in Programming

See All in Programming
UI State Modeling 어떤게 좋을까?
Afcab07a7473e163949d85424a81cb85?s=48 laco2951
0
170
Enterprise Angular: Frontend Moduliths with Nx and Standalone Components @jax2022
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
270
About Type Syntax Proposal
893f54413c2bd9ba41d11d753aacaf2c?s=48 quramy
1
800
Explore Java 17 and beyond
F784a8de872a5d98f67ac5ccbd6683d0?s=48 josepaumard
3
600
How useEvent would change our applications
45daf58c77e9dbbab5a1c8a5afc7ac5c?s=48 koba04
1
1.2k
WindowsコンテナDojo : 第1回 Visual StudioでWindowsコンテナアプリ作成
E5eb221d34d4ffbe973f8542b4c3a00e?s=48 oniak3ibm
PRO
0
320
Monadic Java
9eafc29df96e6aaf4a3eb4c0209086ae?s=48 mariofusco
4
250
iOSアプリの技術選択2022
0620564f0125b8b3b7f4fe40c10b8b4e?s=48 tattn
4
1.7k
Groovy Roadmap
4578d99b560b2a470e05288ef6766ac2?s=48 paulk
7
13k
Jetpack DataStore
Ac5b39a4b12e8ca2d6e25b9e7cc142ae?s=48 djain2405
1
170
脱オブジェクト指向講座(5分LT資料)
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
8
10k
The future of trust stores in Python
6638acfdb9c5979d11b4312984292c55?s=48 sethmlarson
0
180

Featured

See All Featured
Ruby is Unlike a Banana
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
91
9.2k
How New CSS Is Changing Everything About Graphic Design on the Web
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
212
11k
Support Driven Design
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
86
8.4k
What's new in Ruby 2.0
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
336
30k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
D8fc2580cfaca035f666d9e4ee79a7f7?s=48 mongodb
29
4.3k
How STYLIGHT went responsive
F716e5f737fcfb03f2cf8d1a184f1dbe?s=48 nonsquared
85
3.9k
It's Worth the Effort
Ba530e786553390f3fb271848485681c?s=48 3n
172
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
212
20k
Build The Right Thing And Hit Your Dates
016edace78ffe826f2348d1e0c504afd?s=48 maggiecrowley
19
1.1k
Clear Off the Table
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
79
280k

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