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
Other Decks in Programming
See All in Programming
php-conference-japan-2024
tasuku43
0
430
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
2.7k
ErdMap: Thinking about a map for Rails applications
makicamel
1
650
いりゃあせ、PHPカンファレンス名古屋2025 / Welcome to PHP Conference Nagoya 2025
ttskch
1
180
ChatGPT とつくる PHP で OS 実装
memory1994
PRO
3
190
『改訂新版 良いコード/悪いコードで学ぶ設計入門』活用方法−爆速でスキルアップする!効果的な学習アプローチ / effective-learning-of-good-code
minodriven
28
4.2k
Внедряем бюджетирование, или Как сделать хорошо?
lamodatech
0
940
月刊 競技プログラミングをお仕事に役立てるには
terryu16
1
1.2k
Rubyでつくるパケットキャプチャツール
ydah
0
170
AWSのLambdaで PHPを動かす選択肢
rinchoku
2
390
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
390
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
7
1.4k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
94
13k
Fireside Chat
paigeccino
34
3.1k
Mobile First: as difficult as doing things right
swwweet
222
9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
Embracing the Ebb and Flow
colly
84
4.5k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Designing for Performance
lara
604
68k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
3
360
The Invisible Side of Design
smashingmag
299
50k
Making the Leap to Tech Lead
cromwellryan
133
9k
Faster Mobile Websites
deanohume
305
30k
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
モックサーバー