Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
React + Graphqlで 快適スキーマ駆動開発
Slide 2
Slide 2 text
自己紹介 宮沢 趣味:ラップバトル観戦、ポーカー 基本Typescriptを触ってます
Slide 3
Slide 3 text
フォローしてね🐣
Slide 4
Slide 4 text
今日話すこと Graphqlを使ったスキーマ駆動開発の流れと 改善されること Reactとの親和性 一般的なサービス開発の流れと問題点
Slide 5
Slide 5 text
一般的なサービス開発の 流れと問題点
Slide 6
Slide 6 text
APIできたら繋ぎこみ APIで受け取る値は ハードコーディング Swaggerなどで API定義書用意 API開発進める サーバーサイド フロントエンド
Slide 7
Slide 7 text
フロントが後手に回りがち🥲 Swaggerの仕様と 実際のAPIが違くね?🤔 Swagger(yml)書きにくい🤮
Slide 8
Slide 8 text
Graphqlを使った場合
Slide 9
Slide 9 text
.graphqlによる API定義書が書きやすい
Slide 10
Slide 10 text
スキーマ ファイル を定義
Slide 11
Slide 11 text
.graphqlファイル書く API定義(Swagger) + モックサーバー + 型
Slide 12
Slide 12 text
モックサーバー
Slide 13
Slide 13 text
モックサーバーと繋ぐことで フロントはハードコーディン グせずに済む!
Slide 14
Slide 14 text
フロントとサーバー両方とも Typescriptなら
Slide 15
Slide 15 text
.graphqlから型生成して その型をAPI側とフロント側 で共有することで 乖離がなくなる
Slide 16
Slide 16 text
ここからReact絡めたお話
Slide 17
Slide 17 text
Graphql Code Generater
Slide 18
Slide 18 text
こいつがすごい
Slide 19
Slide 19 text
Graphqlの定義ファイル TypeScriptの型 React Hooks + ↓
Slide 20
Slide 20 text
実際のコードで見てみよう
Slide 21
Slide 21 text
フォローしてね🐣
Slide 22
Slide 22 text
https://zenn.dev/tackman/articles/9a49e53315b83d
Slide 23
Slide 23 text
モックサーバー