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についての5分間
Search
Matsuo Obu
February 28, 2018
Programming
0
670
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
820
文学作品「檸檬」をReactで読む
mqtsuo02
1
400
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
470
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
550
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
630
ピピピのPWA
mqtsuo02
0
570
Create React App 読解特急
mqtsuo02
0
61
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
59
Other Decks in Programming
See All in Programming
htmx is fun!
codehex
2
190
受託開発でGitLab CI を活用していく
xiombatsg
1
130
9年開発を牽引して見えてきた、共通化すべきものと個別でつくるもの ~プログラム言語~
shinout
1
130
決断するための勇気、そのためのBacklog / Courage to make decisions, Backlog for that.
seike460
PRO
4
1.9k
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
3
1.3k
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
220
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
510
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
9
2.4k
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Crafting a Own PHP - ウキウキ手作りミニマリストPHP
uzulla
4
1.1k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
Featured
See All Featured
Designing the Hi-DPI Web
ddemaree
275
33k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.3k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Unsuck your backbone
ammeep
661
56k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
WebSockets: Embracing the real-time Web
robhawkes
59
6.9k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
10 Git Anti Patterns You Should be Aware of
lemiorhan
644
57k
Atom: Resistance is Futile
akmur
258
25k
Clear Off the Table
cherdarchuk
82
310k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
5
1.4k
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
ありがとうございました