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
はじめてのGraphQLスキーマ設計
Search
rikuson298
September 04, 2019
Technology
13
8.3k
はじめてのGraphQLスキーマ設計
GraphQLのよいスキーマ設計についてです。
rikuson298
September 04, 2019
Tweet
Share
Other Decks in Technology
See All in Technology
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
400
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
210
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
1
240
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
1.4k
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
1.1k
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
140
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
3k
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
2
1.5k
データの品質が低いと何が困るのか
kzykmyzw
6
1.1k
室長と気ままに学ぶマイクロソフトのビジネスアプリケーションとビジネスプロセス
ryoheig0405
0
370
Goで作って学ぶWebSocket
ryuichi1208
0
800
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
2.1k
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
550
The Invisible Side of Design
smashingmag
299
50k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Scaling GitHub
holman
459
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Designing for Performance
lara
604
68k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Documentation Writing (for coders)
carmenintech
67
4.6k
Transcript
はじめての GraphQLスキーマ設計 2019/9/5 フロントエンドNight #1@ギフティ A1A株式会社 住奥 陸
2 自己紹介 Name Company Career Twitter Other 住奥 陸(すみおくりく) A1A株式会社(エイワンエイ)
ワークス → ジラフ → A1A @rikuson298 フロント, バックエンド, データモデリングなどア プリ開発を担当
3 Vision A1A(社名の由来) B2B をワンランク上に
4 技術スタック Frontend Backend API
5 はじめに GraphQLといえば 何を思い浮かべるでしょうか?
6 GraphQLといえば スキーマ定義の型付けによる 堅牢な開発
7 GraphQLといえば スキーマ駆動開発による 開発効率の向上
8 GraphQLといえば GraphQLではスキーマ定義によって フロントとバックエンドの依存を減らせる
9 GraphQLといえば 良いスキーマ設計されていれば...
10 これから話すこと メリットを効果的に享受するための スキーマ設計のポイントを説明します。
11 Agenda 1. 実装の詳細を含めない 2. ビジネスロジックを提供する 3. まとめ
12 サンプルの説明 簡単なカンバンツールの実装を例に説明します(Trelloみたいな)
13 サンプルのテーブル構造 List - id - title Card - id
- label - list_id
14 サンプルのスキーマ
15 Agenda 1. 実装の詳細を含めない 2. ビジネスロジックを提供する 3. まとめ
16 サンプルに仕様追加 カードにタグを設定できる仕様に
17 サンプルのテーブル構造 List - id - title Card - id
- label - list_id CardTag - id - card_id - tag_id Tag - id - title 追加
18 スキーマ設計:NGパターン テーブル構造をそのまま スキーマに反映する
19 スキーマ設計:NGパターン CardTagは多対多を実現する 関連テーブルであるため 機能には関係がない
20 スキーマ設計:NGパターン また、多対多の実装方法が 変更された際に修正が必要に
21 スキーマ設計:NGパターン 実装の詳細をスキーマに含めると バックエンドの実装変更によって フロントエンドが影響を受けやすくなってしまう
22 スキーマ設計:GOODパターン Card 型に tags フィールドを追加する
23 スキーマ設計:GOODパターン 関連テーブルを挟まないので フロント側で扱いやすくなる
24 スキーマ設計:GOODパターン 実装の詳細が含まない ↓ バックエンドの実装変更による影響を受けづらい
25 Agenda 1. 実装の詳細を含めない 2. ビジネスロジックを提供する 3. まとめ
26 サンプルに仕様追加 カードが作成から一定期間経過すると変色し、通知される仕様に
27 サンプルのテーブル構造 List - id - title Card - id
- label - list_id - created_at
28 スキーマ設計:NGパターン Card 型のフィールドに created_at のみ追加する
29 スキーマ設計:NGパターン カードを変色させるために created_at を元に 一定期間経過したかを判定する ビジネスロジックをフロントに持つ必要がある
30 スキーマ設計:NGパターン 一方、カードの変色を通知するために バックエンドでも同じビジネスロジックが必要に
31 スキーマ設計:NGパターン created_at のみ提供する ↓ バックエンドとフロントエンドで ビジネスロジックの二重管理になりバグの温床に
32 スキーマ設計:GOODパターン Card 型のフィールドに created_atをもとに一定期間をど のくらい経過したか判定した corrosion_rateを提供する
33 スキーマ設計:GOODパターン 統一の corrosion_rate を元にカードの変色と 変色通知を実装できる
34 スキーマ設計:GOODパターン バックエンドにビジネスロジックを統一でき フロントエンドとの二重管理を防げる
35 Agenda 1. 実装の詳細を含めない 2. ビジネスロジックを提供する 3. まとめ
36 まとめ • 適切なスキーマ設計により、バックエンドとフロントエンドの依存を 減らせて幸せになれる • スキーマに実装の詳細を含めない ◦ 安直にテーブル構造と同じにするのはダメゼッタイ •
ビジネスロジックも提供する ◦ ロジックの二重管理から開放される
37 We Are Hiring! A1A