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
React+Graphqlで快適スキーマ駆動開発
Search
takuma.n
June 04, 2023
Programming
0
160
React+Graphqlで快適スキーマ駆動開発
React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。
takuma.n
June 04, 2023
Tweet
Share
More Decks by takuma.n
See All by takuma.n
プロダクトエンジニア一年生のしくじり 〜フリーランスがプロダクトエンジニアになるまで〜
takumamiyazawa
0
410
Other Decks in Programming
See All in Programming
Use Perl as Better Shell Script
karupanerura
0
690
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
XSLTで作るBrainfuck処理系
makki_d
0
200
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
110
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
1k
List Unfolding - 'unfold' as the Computational Dual of 'fold', and how 'unfold' relates to 'iterate'"
philipschwarz
PRO
0
190
Claude Codeの使い方
ttnyt8701
1
110
Cloudflare Realtime と Workers でつくるサーバーレス WebRTC
nekoya3
0
400
2度もゼロから書き直して、やっとブラウザでぬるぬる動くAIに辿り着いた話
tomoino
0
160
赤裸々に公開。 TSKaigiのオフシーズン
takezoux2
0
130
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
810
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
460
Featured
See All Featured
Making Projects Easy
brettharned
116
6.2k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Producing Creativity
orderedlist
PRO
346
40k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.7k
The Cult of Friendly URLs
andyhume
79
6.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Gamification - CAS2011
davidbonilla
81
5.3k
Become a Pro
speakerdeck
PRO
28
5.4k
Documentation Writing (for coders)
carmenintech
71
4.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Why Our Code Smells
bkeepers
PRO
337
57k
Transcript
React + Graphqlで 快適スキーマ駆動開発
自己紹介 宮沢 趣味:ラップバトル観戦、ポーカー 基本Typescriptを触ってます
フォローしてね🐣
今日話すこと Graphqlを使ったスキーマ駆動開発の流れと 改善されること Reactとの親和性 一般的なサービス開発の流れと問題点
一般的なサービス開発の 流れと問題点
APIできたら繋ぎこみ APIで受け取る値は ハードコーディング Swaggerなどで API定義書用意 API開発進める サーバーサイド フロントエンド
フロントが後手に回りがち🥲 Swaggerの仕様と 実際のAPIが違くね?🤔 Swagger(yml)書きにくい🤮
Graphqlを使った場合
.graphqlによる API定義書が書きやすい
スキーマ ファイル を定義
.graphqlファイル書く API定義(Swagger) + モックサーバー + 型
モックサーバー
モックサーバーと繋ぐことで フロントはハードコーディン グせずに済む!
フロントとサーバー両方とも Typescriptなら
.graphqlから型生成して その型をAPI側とフロント側 で共有することで 乖離がなくなる
ここからReact絡めたお話
Graphql Code Generater
こいつがすごい
Graphqlの定義ファイル TypeScriptの型 React Hooks + ↓
実際のコードで見てみよう
フォローしてね🐣
https://zenn.dev/tackman/articles/9a49e53315b83d
モックサーバー