Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React+Graphqlで快適スキーマ駆動開発
Search
takuma.n
June 04, 2023
Programming
0
180
React+Graphqlで快適スキーマ駆動開発
React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。
takuma.n
June 04, 2023
Tweet
Share
More Decks by takuma.n
See All by takuma.n
現場に寄り添い、価値を届けるチーム開発プロセス
takumamiyazawa
0
1.1k
プロダクトエンジニア一年生のしくじり 〜フリーランスがプロダクトエンジニアになるまで〜
takumamiyazawa
0
630
Other Decks in Programming
See All in Programming
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
bicstone
1
1.2k
まだ間に合う!Claude Code元年をふりかえる
nogu66
2
370
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
manfredsteyer
PRO
0
120
著者と進める!『AIと個人開発したくなったらまずCursorで要件定義だ!』
yasunacoffee
0
120
AIコーディングエージェント(Gemini)
kondai24
0
200
チームをチームにするEM
hitode909
0
290
Cell-Based Architecture
larchanjo
0
100
ローターアクトEクラブ アメリカンナイト:川端 柚菜 氏(Japan O.K. ローターアクトEクラブ 会長):2720 Japan O.K. ロータリーEクラブ2025年12月1日卓話
2720japanoke
0
720
Cap'n Webについて
yusukebe
0
120
バックエンドエンジニアによる Amebaブログ K8s 基盤への CronJobの導入・運用経験
sunabig
0
140
社内オペレーション改善のためのTypeScript / TSKaigi Hokuriku 2025
dachi023
1
560
Navigation 3: 적응형 UI를 위한 앱 탐색
fornewid
1
220
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
Docker and Python
trallard
47
3.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
BBQ
matthewcrist
89
9.9k
Practical Orchestrator
shlominoach
190
11k
For a Future-Friendly Web
brad_frost
180
10k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3.1k
Agile that works and the tools we love
rasmusluckow
331
21k
How to Ace a Technical Interview
jacobian
280
24k
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
モックサーバー