Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQL×TypeScriptでエモかった5つのこと.pdf
Search
TsukasaSekiguchi
February 02, 2019
Technology
1
750
GraphQL×TypeScriptでエモかった5つのこと.pdf
Gunmaweb #34のLTスライドです。
GraphQL、及びGraphQL×TypeScriptを組み合わせてみてエモいなぁと感じることが多かったのでそれらをまとめてみました。
TsukasaSekiguchi
February 02, 2019
Tweet
Share
More Decks by TsukasaSekiguchi
See All by TsukasaSekiguchi
Prismaを1年くらい使ってみたのでちょっと語る
tsukasagr
0
81
playwrightのVSCode拡張が便利すぎて、もはやE2E書けないとか言い訳できないレベルだった
tsukasagr
0
92
AWS_Copilotではじめる簡単コンテナ運用.pdf
tsukasagr
0
310
SupabaseにBaaS拡大の未来を感じた
tsukasagr
0
210
超ざっくりFirebase vs Amplify
tsukasagr
0
270
NestJSがいい感じだった
tsukasagr
0
280
Slack Apps × BoltでToDoアプリ作ってみたって話のはずだったけど、周辺技術で良さそうなやつがあったのでそのへんも共有する話
tsukasagr
0
400
俺のMac
tsukasagr
0
280
可能な限りRDB脳のままCloud_Firestoreを使ってみる.pdf
tsukasagr
0
620
Other Decks in Technology
See All in Technology
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
630
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
920
スレットハンティングについて知っておきたいこと
hacket
0
130
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
シフトレフトで挑む セキュリティの生産性向上
sekido
PRO
0
270
MySQLのロックの種類とその競合
yoku0825
6
1.6k
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
コンテナ・K8s研修 - 前半 コンテナ基礎・ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
4
590
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
224
21k
Documentation Writing (for coders)
carmenintech
63
4.2k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
It's Worth the Effort
3n
181
27k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Git: the NoSQL Database
bkeepers
PRO
423
64k
A Modern Web Designer's Workflow
chriscoyier
689
190k
WebSockets: Embracing the real-time Web
robhawkes
59
7.2k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Transcript
GraphQL×TypeScriptͰ ΤϞ͔ͬͨ5ͭͷ͜ͱ 2019/02/02 Gunma.web #34 ؔޱ ࢘
໊લ: ؔޱ࢘ SNS: GitHub: TsukasaGR Twitter: TsukasaGr NewsPicks: ؔޱ࢘ ࠲ӈͷ
ࣗͷͨΊʹɺଞਓʹਚ͘͢ ࣄ: αϥϦʔϚϯ: SIerͰ৽نࣄۀ(toC͚ͷWebαʔϏε)։ൃ ϑϦʔϥϯε: ελʔτΞοϓͷWebΤϯδχΞ ࠷ۙ৮ͬͯΔͷ: PHP(Laravel)ɺJavascript/Typescript(Vue.js/Nuxt.js)ɺGraphQLɺDockerɺAWSɺFirebase ࣗݾհ
ࠓ͢͜ͱ • GraphQLͱ • GraphQLͷPros/Cons • TypeScriptͱ • GraphQLΛ৮ͬͯΤϞ͔ͬͨ͜ͱ •
GraphQL×TypeScriptΛΈ߹Θͤͯ ΤϞ͔ͬͨ͜ͱ
GraphQL(backend) Laravel: 5.7.24 nuwave/lighthouse: 2.6.4 mll-lab/laravel-graphql-playground: 0.3.3 GraphQL(frontend), TypeScript Nuxt.js:
2.3.4 typescript: 3.2.2 @nuxtjs/apollo: 4.0.0-rc2.3 etc… લఏ
ΤϞ͔ͬͨ5ͭͷ͜ͱ
1. ΫϥΠΞϯτ࣮ߦڥ͕ ΤϞ͍
mll-lab/laravel-graphql-playground (prisma/graphql-playground)
prisma/vscode-graphql
2. GraphQLͷΫΤϦ͕ ΤϞ͍
ෳͷΫΤϦΛ·ͱΊͯൃߦ
3. Document as Code͕ ΤϞ͍
nuwave/lighthouse
4. Code Generator͕ ΤϞ͍
dotansimha/graphql-code-generator
5. ·ͩओྲྀʹͳͬͯͳ͍ͷ͕ ΤϞ͍
• TypeScriptAltJSͷσϑΝΫτʹͳΓͭͭ͋Δ͕ɺAPI ·ͩ·ͩRestAPI͕ओྲྀ • ͪΖΜGraphQLRestAPIͷସͱͯ͠Ͱͳ͍͚͘ Δͷͩͱࢥ͏͕ɺSSKDsͳAPIͰ͋ΕΤϯυϙΠϯτ ͕ҰՕॴʹ·ͱ·͍ͬͯΔͱϑϩϯτΤϯυ͕εοΩϦ͢ Δ • ͢ͰʹΤϞ͍GraphQL͕ͩɺࠓޙ͞ΒʹΤϞ͘ͳ͍ͬͯ͘
Մೳੑ͕͋Δʂ ͞ΒʹΤϞ͘ͳΔ͔ʁʂ
͓·͚. ΤϞ͘ͳ͍ͱ͜Ζ
• GraphQLͷΤϞ͘ͳ͍ͱ͜Ζ • TypeScriptͷΤϞ͘ͳ͍ͱ͜Ζ • Laravel×GraphQLͷΤϞ͘ͳ͍ͱ͜Ζ • Nuxt×TypeScriptͷΤϞ͘ͳ͍ͱ͜Ζ
LaravelͷGraphQL ϥΠϒϥϦ͕ൃల్্ LaravelͰGraphQLΛ͍ͯ͠Έͨ https://qiita.com/TsukasaGR/items/1a8b0020e5e83e7a46c7
NuxtͷTSαϙʔτ͕·ͩऑ͍ ͕ɺઌϦϦʔε͞Εͨv2.4ͰTSαϙʔτͨ͠ͱͷ͜ͱ https://dev.to/nuxt/nuxtjs-v240-is-out-typescript-smart- prefetching-and-more-18d
͍͞͝ʹ
• ࣮ࡍʹΞϓϦέʔγϣϯΛ࣮ͯ͠ΈΔͱҧͬͨݟ͑ํ͋Γͦ͏ • ٧·ͬͨ࣌ʹάάͬͯղܾࡦ͕օແ • ΫΤϦͷ8ׂ͕Resolver • CustomDirectiveɺCustomScalarͱϑϨʔϜϫʔΫͷओػೳ (DIɺORM)ͷ࿈ܞ͕ग़དྷͳ͍ •
PrismaɺApollo͕ଟػೳɺϥΠϒϥϦ͕ଟ͗ͯ͢Α͘Θ͔Βͳ͍ • ͬͺΓRestAPIҰຊʹͦ͏ • etc… ͦΕͰཕΛ౿Ήʹ͢ΔΤϞ͕͋͞Δʂ