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
95
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
20
Efficient Feature Implementation Using Type Merging
mtyk_15
0
1k
DataloaderのGraphQLを超えた活用を考えてみた
mtyk_15
1
150
Other Decks in Technology
See All in Technology
Zephyr(RTOS)にEdge AIを組み込んでみた話
iotengineer22
1
230
Claude Codeを駆使した初めてのiOSアプリ開発 ~ゼロから3週間でグローバルハッカソンで入賞するまで~
oikon48
10
5.2k
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
150
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
370
[2025年10月版] Databricks Data + AI Boot Camp
databricksjapan
1
230
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
610
JSConf JPのwebsiteをGatsbyからNext.jsに移行した話 - Next.jsの多言語静的サイトと課題
leko
1
130
Introdução a Service Mesh usando o Istio
aeciopires
1
260
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.9k
Digitization部 紹介資料
sansan33
PRO
1
5.6k
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
0
570
事業開発におけるDify活用事例
kentarofujii
4
1.2k
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
A Tale of Four Properties
chriscoyier
161
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
Thoughts on Productivity
jonyablonski
70
4.9k
A designer walks into a library…
pauljervisheath
209
24k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Context Engineering - Making Every Token Count
addyosmani
7
280
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 良さそうですよね 😃