GraphQLについての5分間
by
Matsuo Obu
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
GraphQLについての5分間 @mqtsuo02 February 28, 2018
Slide 2
Slide 2 text
@mqtsuo02 ( Matsuo Obu ) Webエンジニア ( フリーランス ) 現在 … もっぱらReact 過去 … Ruby, Java 未来 … Angular, Go 仮想通貨投資 DTM ( ボカロP ) ダンスの習い事 勉強会主催
Slide 3
Slide 3 text
GraphQL知ってる方いますか?
Slide 4
Slide 4 text
もくじ ➢ GraphQLとは? ➢ RESTとの違い ➢ APIを叩いてみよう ➢ 所感
Slide 5
Slide 5 text
GraphQLとは?
Slide 6
Slide 6 text
GraphQLとは? ➢ Facebookが作ったAPIのインタフェース仕様 http://graphql.org/
Slide 7
Slide 7 text
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 という専用ライブラリがある
Slide 8
Slide 8 text
GitHubの開発者用ページではGraphQLが主流っぽくなってる https://developer.github.com/ ➢ GitHubがGraphQLでAPIを実装したことが話題に GraphQLとは? API v4 がGraphQL ( API v3 がREST )
Slide 9
Slide 9 text
RESTとの違い
Slide 10
Slide 10 text
● 「リソースの完全なビューを集約するために、2〜3回の別々のリクエ ストが必要になることがありました。私たちのレスポンスは同時に多く のデータを送信し、利用者が必要とするデータは含まれていなかった ようです。」 「RESTは完全でなく、いくつかの欠点があります」 RESTとの違い GraphQLでAPIを実装した背景 ( githubengineering.comより ) ● APIの改善要求 エンドポイントに関するメタ情報収集、ページネーションの改善、リク エストパラメータの型安全化、コードからドキュメントの自動生成な ど...
Slide 11
Slide 11 text
RESTとの違い GraphQLはAPIのためのクエリ言語でありランタイム ➔ RESTでは ... ➔ GraphQLでは ... ● リソース毎に複数のエンドポイントに対してリクエストを送る ● サーバは設計したフォーマットを返すように実装する ● 1つのエンドポイントに対して必要な情報をクエリとして定義する ● サーバはクエリに応じて動的なレスポンスを返す ★ 必要な情報だけを1回のリクエストでまとめて取得できる
Slide 12
Slide 12 text
RESTとの違い GraphQLはAPIのためのクエリ言語でありランタイム ➢ スキーマを定義しといて ➢ 予測したデータが返る ➢ クエリを投げれば
Slide 13
Slide 13 text
APIを叩いてみよう
Slide 14
Slide 14 text
APIを叩いてみよう GitHubアカウントがあればすぐ使える https://developer.github.com/v4/explorer/
Slide 15
Slide 15 text
APIを叩いてみよう GitHubアカウントがあればすぐ使える https://developer.github.com/v4/explorer/ ドキュメント見ながらクエリ作り ➢ queryは取得系 ➢ mutationは更新系
Slide 16
Slide 16 text
所感
Slide 17
Slide 17 text
● API設計に対するフロントvsバックの争いが少なくなる のではないかと思う 所感 ● 導入事例がまだ少ないため、案件に導入するにはリス クが高いなと思う ● フロントもバックも両方実装が必要であるため、チーム でやる場合は全体でキャッチアップが必要 ★ Facebook信者は何も考えず導入しよう!
Slide 18
Slide 18 text
参考リンク ➢ 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
Slide 19
Slide 19 text
ありがとうございました