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
780
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
960
文学作品「檸檬」をReactで読む
mqtsuo02
1
480
EmotionでReactをstylingすればモテるかもしれない
mqtsuo02
0
590
僕が求めていたのはNext.jsだったんだ
mqtsuo02
0
660
Repro Tech Hands-on : Nuxt.js
mqtsuo02
1
830
ピピピのPWA
mqtsuo02
0
700
Create React App 読解特急
mqtsuo02
0
87
JekyllとBootstrapを使って静的なブログを作ってみたよ
mqtsuo02
0
69
Other Decks in Programming
See All in Programming
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
610
CursorはMCPを使った方が良いぞ
taigakono
1
250
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
110
XP, Testing and ninja testing
m_seki
3
240
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
160
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
150
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
540
AIともっと楽するE2Eテスト
myohei
0
360
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
120
技術同人誌をMCP Serverにしてみた
74th
1
630
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
280
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
920
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
270
21k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Code Review Best Practice
trishagee
69
18k
Done Done
chrislema
184
16k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Docker and Python
trallard
44
3.5k
How to train your dragon (web standard)
notwaldorf
94
6.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
810
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
ありがとうございました