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
why we should go with GraphQL
Search
Yan | 近藤智哉
December 12, 2023
Technology
0
93
why we should go with GraphQL
Yan | 近藤智哉
December 12, 2023
Tweet
Share
More Decks by Yan | 近藤智哉
See All by Yan | 近藤智哉
how frontend is constructed
mtyk_15
0
19
Efficient Feature Implementation Using Type Merging
mtyk_15
0
1k
DataloaderのGraphQLを超えた活用を考えてみた
mtyk_15
1
140
Other Decks in Technology
See All in Technology
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
120
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
130
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.6k
我々は雰囲気で仕事をしている / How can we do vibe coding as well
naospon
2
180
Amazon S3 Vectorsは大規模ベクトル検索を低コスト化するサーバーレスなベクトルデータベースだ #jawsugsaga / S3 Vectors As A Serverless Vector Database
quiver
2
1.1k
第64回コンピュータビジョン勉強会@関東(後編)
tsukamotokenji
0
210
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.4k
20250818_KGX・One Hokkaidoコラボイベント
tohgeyukihiro
0
130
OCI Bastionサービス
oracle4engineer
PRO
1
100
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
2
360
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
190
Featured
See All Featured
Navigating Team Friction
lara
188
15k
Code Review Best Practice
trishagee
70
19k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
The Invisible Side of Design
smashingmag
301
51k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
A Tale of Four Properties
chriscoyier
160
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Transcript
結局 GraphQL は何がいいのか? Yan
本⽇の資料は Speaker Deck にて公開しています 撮影等ご⾃由に!
今⽇お話すること 1. ⾃⼰紹介 3. GraphQL の特徴 5. GraphQL だからできたこと
1. ⾃⼰紹介 近藤 智哉 (@mtyk_15) Kondo Motoya GraphQL / React
(バックエンド‧フロン トエンドを担当することが多いです) エン‧ジャパン株式会社 → 株式会社 RevComm → Kalonade 株式会社 → SHE 株式会社 🥰 旅⾏
GraphQL 触ったことありますか?
GraphQLとは APIを開発するためのQuery⾔語
3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 ‧クライアントで必要な情報だけ取得できる Schema ベースで開発できる ‧Schema ⾃体に表現⼒がある ‧Schema
をクライアント間 (Backend/Frontend) で共有できる
3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 User を Node として name, email
が Leaf になっている。 type User { name: String! email: String! }
3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 このように他の Node を Leaf として 追加できる。
type Event { title: String! published_at: String! host_user: User }
3. GraphQL の特徴 グラフ構造がベースになっているクエリ⾔語 フロントエンドからは必要な情報 だけを取得できる。 query { getEvent(id: String)
{ title host_user { name } } }
3. GraphQL の特徴 Schema ベースで開発できる - Schema⾃体に表現⼒がある。 Built-inの String, Int,
Float, Boolean, IDといったScalarの他に、独⾃でScalarを定義するこ とができる。 これはバリデーションロジックを含むので、Serializer や Validator としても利⽤できる。 type User { id: ID! name: String! email: String! url: URL! published_at: DateTimeISO! }
3. GraphQL の特徴 Schema ベースで開発できる - Schema⾃体に表現⼒がある。 SchemaにDirectiveを追加することで、クライアントに対して情報や処理を追加できる。 type User
{ id: ID! name: String! email: String! url: URL! @deprecated(reason: "この項目は Event.url に移動しました") published_at: DateTimeISO! }
3. GraphQL の特徴 Schema ベースで開発できる - Schema をクライアント間で共有できる Schema を元に型を⽣成できる。
TypeScript の型を⽣成できるので、Schema を信頼して開発できる。 Schema Entity や Service レベルの型を⽣成 APIClient の型を ⽣成
GraphQL だからできたこと
3. GraphQL だからできたこと Fragment colocation を利⽤した拡張性の⾼いフロントエンド開発 GraphQL の仕様⾃体が Layered Architecture
と相性が良い
3. GraphQL だからできたこと Fragment colocation を利⽤した拡張性の⾼いフロントエンド開発 ‧Component ごとに Fragmentを定義し、Pageで⼀括取得する⽅法 ‧メンテコスト低くオーバーフェッチングを防ぐことができる
3. GraphQL だからできたこと GraphQL の仕様⾃体が Layered Architecture と相性が良い ‧Schemaを設計すると、 Entity
や Service のIFが⼿に⼊る。
GraphQL 良さそうですよね 😃