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
490
Other Decks in Programming
See All in Programming
5つのアンチパターンから学ぶLT設計
narihara
1
170
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
11k
PipeCDのプラグイン化で目指すところ
warashi
1
280
XP, Testing and ninja testing
m_seki
3
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
1
13k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
110
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
3.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Become a Pro
speakerdeck
PRO
29
5.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A designer walks into a library…
pauljervisheath
207
24k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
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
モックサーバー