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
170
React+Graphqlで快適スキーマ駆動開発
React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。
takuma.n
June 04, 2023
Tweet
Share
More Decks by takuma.n
See All by takuma.n
プロダクトエンジニア一年生のしくじり 〜フリーランスがプロダクトエンジニアになるまで〜
takumamiyazawa
0
550
Other Decks in Programming
See All in Programming
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
120
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
970
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
260
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
Flutterと Vibe Coding で個人開発!
hyshu
1
260
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
13
2.8k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
120
decksh - a little language for decks
ajstarks
4
21k
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
110
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
970
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
200
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Bash Introduction
62gerente
614
210k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.4k
Building Applications with DynamoDB
mza
96
6.6k
Automating Front-end Workflow
addyosmani
1370
200k
How STYLIGHT went responsive
nonsquared
100
5.7k
Scaling GitHub
holman
462
140k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.4k
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
モックサーバー