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
940
プロダクトエンジニア一年生のしくじり 〜フリーランスがプロダクトエンジニアになるまで〜
takumamiyazawa
0
600
Other Decks in Programming
See All in Programming
Google Opalで使える37のライブラリ
mickey_kubo
3
150
CSC509 Lecture 07
javiergs
PRO
0
240
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.9k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
900
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
Devoxx BE - Local Development in the AI Era
kdubois
0
140
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
290
品質ワークショップをやってみた
nealle
0
640
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Being A Developer After 40
akosma
91
590k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Scaling GitHub
holman
463
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
Unsuck your backbone
ammeep
671
58k
The Invisible Side of Design
smashingmag
302
51k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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
モックサーバー