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
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390
生成AIを活用したソフトウェア開発ライフサイクル変革の現在値
Avatar for Hiroyuki Mori hiroyukimori
PRO
0
100
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
1.3k
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
Avatar for Kenta Suzuki kekekenta
0
220
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
Avatar for Mulyu mulyu
3
470
例外処理とどう使い分ける？Result型を使ったエラー設計 #burikaigi
Avatar for Takuma Kajikawa kajitack
16
6.1k
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
210
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
220
CSC307 Lecture 09
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
840

Featured

See All Featured
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
240
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
50
Visualization
Avatar for Eitan Lees eitanlees
150
17k
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto Wada twada
PRO
117
110k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
220
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
122
21k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
196
71k
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
90
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
280
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
698
190k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
Avatar for Greg Gifford greggifford
PRO
0
79

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. モックサーバー