$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQLについての5分間
Search
Matsuo Obu
February 28, 2018
Programming
0
800
GraphQLについての5分間
GraphQLについて概要のまとめ。「とらのあな オタク×Node.js勉強会」で発表 (2018-02-28)
Matsuo Obu
February 28, 2018
Tweet
Share
More Decks by Matsuo Obu
See All by Matsuo Obu
Reactの歴史
mqtsuo02
0
990
文学作品「檸檬」をReactで読む
mqtsuo02
1
490
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
610
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
680
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
890
ピピピのPWA
mqtsuo02
0
720
Create React App 読解特急
mqtsuo02
0
99
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
80
Other Decks in Programming
See All in Programming
ソフトウェア設計の課題・原則・実践技法
masuda220
PRO
24
20k
All(?) About Point Sets
hole
0
240
Querying Design System デザインシステムの意思決定を支える構造検索
ikumatadokoro
1
1.2k
競馬で学ぶ機械学習の基本と実践 / Machine Learning with Horse Racing
shoheimitani
14
14k
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
bicstone
1
840
Media Capture and Streams: W3C仕様と現場での知見
nowaki28
0
120
CloudNative Days Winter 2025: 一週間で作る低レイヤコンテナランタイム
ternbusty
7
1.9k
しっかり学ぶ java.lang.*
nagise
1
470
WebRTC と Rust と8K 60fps
tnoho
2
1.8k
俺流レスポンシブコーディング 2025
tak_dcxi
13
6.9k
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
fuuki12
0
180
FluorTracer / RayTracingCamp11
kugimasa
0
170
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
How STYLIGHT went responsive
nonsquared
100
5.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.4k
Designing Experiences People Love
moore
142
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
54k
Mobile First: as difficult as doing things right
swwweet
225
10k
Testing 201, or: Great Expectations
jmmastey
46
7.8k
Music & Morning Musume
bryan
46
7k
Scaling GitHub
holman
464
140k
Transcript
GraphQLについての5分間 @mqtsuo02 February 28, 2018
@mqtsuo02 ( Matsuo Obu ) Webエンジニア ( フリーランス ) 現在
… もっぱらReact 過去 … Ruby, Java 未来 … Angular, Go 仮想通貨投資 DTM ( ボカロP ) ダンスの習い事 勉強会主催
GraphQL知ってる方いますか?
もくじ ➢ GraphQLとは? ➢ RESTとの違い ➢ APIを叩いてみよう ➢ 所感
GraphQLとは?
GraphQLとは? ➢ Facebookが作ったAPIのインタフェース仕様 http://graphql.org/
GraphQLとは? ➢ OSSとしてGraphQLを導入するための ライブラリが提供されている - C# / .NET - Go
- Java / Android - JavaScript - Swift / Objective-C iOS - Python - C# / .NET - Clojure - Elixir - Erlang - Go - Groovy - Java - JavaScript - PHP - Python - Scala - Ruby Client側 Server側 ➔ ReactはRelay という専用ライブラリがある
GitHubの開発者用ページではGraphQLが主流っぽくなってる https://developer.github.com/ ➢ GitHubがGraphQLでAPIを実装したことが話題に GraphQLとは? API v4 がGraphQL ( API
v3 がREST )
RESTとの違い
• 「リソースの完全なビューを集約するために、2〜3回の別々のリクエ ストが必要になることがありました。私たちのレスポンスは同時に多く のデータを送信し、利用者が必要とするデータは含まれていなかった ようです。」 「RESTは完全でなく、いくつかの欠点があります」 RESTとの違い GraphQLでAPIを実装した背景 ( githubengineering.comより
) • APIの改善要求 エンドポイントに関するメタ情報収集、ページネーションの改善、リク エストパラメータの型安全化、コードからドキュメントの自動生成な ど...
RESTとの違い GraphQLはAPIのためのクエリ言語でありランタイム ➔ RESTでは ... ➔ GraphQLでは ... • リソース毎に複数のエンドポイントに対してリクエストを送る
• サーバは設計したフォーマットを返すように実装する • 1つのエンドポイントに対して必要な情報をクエリとして定義する • サーバはクエリに応じて動的なレスポンスを返す ★ 必要な情報だけを1回のリクエストでまとめて取得できる
RESTとの違い GraphQLはAPIのためのクエリ言語でありランタイム ➢ スキーマを定義しといて ➢ 予測したデータが返る ➢ クエリを投げれば
APIを叩いてみよう
APIを叩いてみよう GitHubアカウントがあればすぐ使える https://developer.github.com/v4/explorer/
APIを叩いてみよう GitHubアカウントがあればすぐ使える https://developer.github.com/v4/explorer/ ドキュメント見ながらクエリ作り ➢ queryは取得系 ➢ mutationは更新系
所感
• API設計に対するフロントvsバックの争いが少なくなる のではないかと思う 所感 • 導入事例がまだ少ないため、案件に導入するにはリス クが高いなと思う • フロントもバックも両方実装が必要であるため、チーム でやる場合は全体でキャッチアップが必要
★ Facebook信者は何も考えず導入しよう!
参考リンク ➢ GraqhQL 公式 ➢ GitHub Engineering ( GraqhQL 導入について
) ➢ GitHub Developer ( GraphQL API ) https://githubengineering.com/the-github-graphql-api/ http://graphql.org/ https://developer.github.com/v4/ ➢ GitHub Developer ( GraphQL API / クエリ検証 ) https://developer.github.com/v4/explorer
ありがとうございました