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
150
React+Graphqlで快適スキーマ駆動開発
React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。
takuma.n
June 04, 2023
Tweet
Share
More Decks by takuma.n
See All by takuma.n
プロダクトエンジニア一年生のしくじり 〜フリーランスがプロダクトエンジニアになるまで〜
takumamiyazawa
0
210
Other Decks in Programming
See All in Programming
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
280
なぜイベント駆動が必要なのか - CQRS/ESで解く複雑系システムの課題 -
j5ik2o
14
4.5k
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
120
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
140
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
240
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
120
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
210
Rubyで始める関数型ドメインモデリング
shogo_tksk
0
130
Formの複雑さに立ち向かう
bmthd
1
900
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
200
Jakarta EE meets AI
ivargrimstad
0
160
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
890
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Typedesign – Prime Four
hannesfritz
40
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
YesSQL, Process and Tooling at Scale
rocio
172
14k
KATA
mclloyd
29
14k
Being A Developer After 40
akosma
89
590k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
GraphQLとの向き合い方2022年版
quramy
44
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Making Projects Easy
brettharned
116
6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
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
モックサーバー