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
94
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
140
Other Decks in Technology
See All in Technology
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
360
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
オープンソースでどこまでできる?フォーマル検証チャレンジ
msyksphinz
0
110
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
910
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
How to achieve interoperable digital identity across Asian countries
fujie
0
140
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
110
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
160
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
230
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
210
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
For a Future-Friendly Web
brad_frost
180
9.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Git: the NoSQL Database
bkeepers
PRO
431
66k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
RailsConf 2023
tenderlove
30
1.2k
Code Reviewing Like a Champion
maltzj
525
40k
How STYLIGHT went responsive
nonsquared
100
5.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Making Projects Easy
brettharned
119
6.4k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
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 良さそうですよね 😃