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
kyo
October 15, 2022
Programming
1.5k
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
作って学ぶ GraphQL
Go Conference mini 2022 Autumn IN Sendai の発表スライドです。
GraphQL についてまとめてみました。
kyo
October 15, 2022
More Decks by kyo
See All by kyo
GoとWasmでつくる軽量ブラウザUI
keyl0ve
0
910
Go言語で行うメール解析
keyl0ve
0
2k
Gopher Enablement Internship
keyl0ve
0
920
Other Decks in Programming
See All in Programming
이 함수, 실패하면 어떻게 되나요? null부터 Rich Errors까지, Kotlin 에러 처리 15년
haeti2
0
130
【デモ】Kiroで体験する仕様駆動開発|設計からコーディングまでAIと進める開発フロー
cmkudo
0
570
不幸な GC
chencmd
0
870
初心者DevRelとして参加者だった私が、DevRel Talks!#2に登壇するまでにしてきたこと
sokohirai
0
330
PyO3 で既存 Python 評価器を Rust core 化する ー wasm-bindgen でブラウザにも配るための設計
kdash
1
360
20260828_品質と開発生産性を両立させる、AI時代のE2Eテストの考え方
magicpod
0
140
AIは賢い。でも実行環境は? CLIおじさんがAI時代に伝えたいこと ~ CLIおじさんがAI時代に伝えたいこと ~
curekoshimizu
1
140
Webエンジニアなのにブラウザの仕組みがわからないので、Pythonで自作してみた
tatsuki12
4
1.7k
kubernetes コンポーネント開発入門 / 新卒N年目の勉強会&交流会!〜〇〇への誘い〜 #n_study
mazrean
0
160
AIと壁打ちしながら進めるコスト管理
fufuhu
2
1.9k
Laravelのアプリケーションをどこにデプロイするか #ツナギメオフライン.9
akase244
0
110
私のClaude Code活用法 (個人開発編) - PHPerKaigi mini #4(2026/08/24)
panda_program
1
210
Featured
See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
57k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.2k
Scaling GitHub
holman
464
140k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
230
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
sira's awesome portfolio website redesign presentation
elsirapls
0
400
Agile that works and the tools we love
rasmusluckow
331
22k
Become a Pro
speakerdeck
PRO
31
6.2k
Tell your own story through comics
letsgokoyo
1
1.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.9k
Heart Work Chapter 1 - Part 1
lfama
PRO
8
36k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Transcript
作って学ぶ GraphQL Go Conference mini 2022 Autumn IN SENDAI Kyo
Sato
Shopify No-Code Mobile-App VIP Appify ってなに?
Contents - 自己紹介 - GraphQL について - 終わりに
Contents - 自己紹介 - GraphQL について - 終わりに
- GraphQL について理解を深めたかった - GraphQL を導入することで得られる メリットについて整理したかった - Appify で使用されている技術
理由
自己紹介
自己紹介 Name: きょー。 HN: Keyl0ve Hobby: 温泉、旅行、食べ歩 Univ. : 会津大学
B3
GraphQLについて 目標: - GraphQL という技術を広める - 実際にサーバを立てて試してもらう
GraphQL - Facebook - OSS - API のために作られた クエリ言語 -
既存のデータに対するクエリ を実行するランタイム
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度のリクエストで 取得できる -スキーマをもとに開発するので型の不一致が 起きない
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度のリクエストで 取得できる -スキーマをもとに開発するので型の不一致が 起きない
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度のリクエストで 取得できる -スキーマをもとに開発するので型の不一致が 起きない
REST vs GraphQL https://qiita.com/shunp/items/d85fc47b33e1b3a88167
REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET
/api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” }
REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET
/api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” } 2回 API を叩いてる!!
REST vs GraphQL HTTP requests HTTP responses GET /api/user?id=1 GET
/api/address?user_id=1 { ”id” : 1, “name” : “user1” } { ”street” : “Aoba street”, “city” : “Sendai city” } 2回 API を叩いてる!!
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id } } { ”user” : { “id”: 1, } }
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id name } } { ”user” : { “id”: 1, “name”: “user1” } }
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id name address{ street city } { ”user” : { “id”: 1, “name”: “user1”, “address”: { “street”: “Aoba street”, “city”: “Sendai city” } } }
REST vs GraphQL HTTP requests HTTP responses POST /graphql query
{ user(id: 1){ id name address{ street city } { ”user” : { “id”: 1, “name”: “user1”, “address”: { “street”: “Aoba street”, “city”: “Sendai city” } } } 1 回 API を叩くだけで良い
GitHub の repository を取ってくる REST https://api.github.com/users/Keyl0ve/repos GraphQL https://api.github.com/graphql
GitHub の repository を取ってくる REST https://api.github.com/users/Keyl0ve/repos GraphQL https://api.github.com/graphql 通信の効率は GraphQL
の方が上
GraphQL のメリット -クライアントはスキーマをもとに、 欲しいフィールドだけをリクエストできる -リレーションがある値は一度で取得できる -スキーマをもとに開発するので型の不一致が 起きない
強い型付けが採用されている - パラメータの定義には、スキーマ 定義言語(SDL)が使用されてい る - クライアントに公開されるすべて のAPIはSDLで記述されている
GraphQL のデメリット - クエリが複雑になる可能性 - クエリ伝播の問題につながるかもしれ ない - 学習の難しさ -
特にスキーマの設計
クエリ伝播の問題、スキーマ設計の難しさ query { user(id: 1){ id name address{ street city
history{ people awards{ year{ awardName personName } } sample{ sample sample sample } sample{ sample
クエリ伝播の問題、スキーマ設計の難しさ query { user(id: 1){ id name address{ street city
history{ people awards{ year{ awardName personName } } sample{ sample sample sample } sample{ sample スキーマを把握していないと、サーバー にとって非常に時間のかかる処理のクエ リを送ってしまう可能性がある
GraphQL サーバを立てよう - gqlgen を使ってサーバ 立ててみた - request から respons
まで
https://qiita.com/Keyl0ve/items/e88b83c13fb86b7c9908 GraphQL、gqlgen を使って サーバ を立てる
終わりに GraphQL、REST 使い分け の判断が重要
Thanks for listening !! Twitter: Keyl0ve_