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
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
390
エラーとアクセシビリティ
schktjm
1
1.3k
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
840
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
170
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
260
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
160
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1.1k
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
250
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
The Pragmatic Product Professional
lauravandoore
36
6.9k
RailsConf 2023
tenderlove
30
1.2k
For a Future-Friendly Web
brad_frost
180
9.9k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Thoughts on Productivity
jonyablonski
70
4.8k
Building an army of robots
kneath
306
46k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Typedesign – Prime Four
hannesfritz
42
2.8k
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 良さそうですよね 😃