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
730
GraphQL×TypeScriptでエモかった5つのこと.pdf
Gunmaweb #34のLTスライドです。
GraphQL、及びGraphQL×TypeScriptを組み合わせてみてエモいなぁと感じることが多かったのでそれらをまとめてみました。
TsukasaSekiguchi
February 02, 2019
Tweet
Share
More Decks by TsukasaSekiguchi
See All by TsukasaSekiguchi
playwrightのVSCode拡張が便利すぎて、もはやE2E書けないとか言い訳できないレベルだった
tsukasagr
0
50
AWS_Copilotではじめる簡単コンテナ運用.pdf
tsukasagr
0
280
SupabaseにBaaS拡大の未来を感じた
tsukasagr
0
200
超ざっくりFirebase vs Amplify
tsukasagr
0
250
NestJSがいい感じだった
tsukasagr
0
260
Slack Apps × BoltでToDoアプリ作ってみたって話のはずだったけど、周辺技術で良さそうなやつがあったのでそのへんも共有する話
tsukasagr
0
370
俺のMac
tsukasagr
0
270
可能な限りRDB脳のままCloud_Firestoreを使ってみる.pdf
tsukasagr
0
610
カイゼンジャーニーを読んだらひとつウエノ男になれた
tsukasagr
0
910
Other Decks in Technology
See All in Technology
アプリがつくるNOT A HOTELブランド
hokuts
1
450
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
4
160
Tableau事例紹介 / Tableau Case Study of Eureka
kazuya_araki_tokyo
1
170
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
Google Cloud の AI を支える裏側のインフラを垣間見る!
maroon1st
0
210
オーナーシップを持つ領域を明確にする
konifar
12
2.7k
Algyan イベント振り返り
linyixian
0
190
PHPカンファレンス小田原2024
ysknsid25
3
660
ChatGPT for IT Service Management (IT Pro)
dahatake
4
250
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
〜小さく始めて大きく育てる〜データ分析基盤の開発から活用まで
kniino
0
2k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
10 Git Anti Patterns You Should be Aware of
lemiorhan
646
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Debugging Ruby Performance
tmm1
70
11k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Bash Introduction
62gerente
604
210k
We Have a Design System, Now What?
morganepeng
42
6.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Faster Mobile Websites
deanohume
297
30k
Statistics for Hackers
jakevdp
789
220k
BBQ
matthewcrist
80
8.7k
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… ͦΕͰཕΛ౿Ήʹ͢ΔΤϞ͕͋͞Δʂ