Tweet
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

モックサーバー