Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React+Graphqlで快適スキーマ駆動開発

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for takuma.n takuma.n
June 04, 2023
Programming
0
180

 React+Graphqlで快適スキーマ駆動開発

React+Graphqlの開発体験がすごくいいので、皆さんも試してみてください。

Avatar for takuma.n

takuma.n

June 04, 2023
Tweet

More Decks by takuma.n

See All by takuma.n
現場に寄り添い、価値を届けるチーム開発プロセス
Avatar for takuma.n takumamiyazawa
0
1.2k
プロダクトエンジニア一年生のしくじり 〜フリーランスがプロダクトエンジニアになるまで〜
Avatar for takuma.n takumamiyazawa
0
720

Other Decks in Programming

See All in Programming
24時間止められないシステムを守る-医療ITにおけるランサムウェア対策の実際
Avatar for kouki.miura koukimiura
1
120
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
330
そのAIレビュー、レビューしてますか？ / Are you reviewing those AI reviews?
Avatar for r-kagaya rkaga
6
4.6k
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
4k
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
180
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
1.1k
HTTPプロトコル正しく理解していますか？ 〜かわいい猫と共に学ぼう。ฅ^•ω•^ฅ ﾆｬ〜
Avatar for ♛Heitor Hirose hekuchan
2
690
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
180
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
210

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
330
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
380
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k

Transcript

  1. React + Graphqlで 快適スキーマ駆動開発

  2. 自己紹介 宮沢 趣味：ラップバトル観戦、ポーカー 基本Typescriptを触ってます

  3. フォローしてね🐣

  4. 今日話すこと Graphqlを使ったスキーマ駆動開発の流れと 改善されること Reactとの親和性 一般的なサービス開発の流れと問題点

  5. 一般的なサービス開発の 流れと問題点

  6. APIできたら繋ぎこみ APIで受け取る値は ハードコーディング Swaggerなどで API定義書用意 API開発進める サーバーサイド フロントエンド

  7. フロントが後手に回りがち🥲 Swaggerの仕様と 実際のAPIが違くね？🤔 Swagger（yml）書きにくい🤮

  8. Graphqlを使った場合

  9. .graphqlによる API定義書が書きやすい

  10. スキーマ ファイル を定義

  11. .graphqlファイル書く API定義（Swagger） + モックサーバー + 型

  12. モックサーバー

  13. モックサーバーと繋ぐことで フロントはハードコーディン グせずに済む！

  14. フロントとサーバー両方とも Typescriptなら

  15. .graphqlから型生成して その型をAPI側とフロント側 で共有することで 乖離がなくなる

  16. ここからReact絡めたお話

  17. Graphql Code Generater

  18. こいつがすごい

  19. Graphqlの定義ファイル TypeScriptの型 React Hooks + ↓

  20. 実際のコードで見てみよう

  21. フォローしてね🐣

  22. https://zenn.dev/tackman/articles/9a49e53315b83d

  23. モックサーバー