Save 37% off PRO during our Black Friday Sale! »

GraphQLについての5分間

Dcbb7171913db2969bd56554ab751b9a?s=47 Matsuo Obu
February 28, 2018

 GraphQLについての5分間

GraphQLについて概要のまとめ。「とらのあな オタク×Node.js勉強会」で発表 (2018-02-28)

Dcbb7171913db2969bd56554ab751b9a?s=128

Matsuo Obu

February 28, 2018
Tweet

Transcript

  1. GraphQLについての5分間 @mqtsuo02 February 28, 2018

  2. @mqtsuo02 ( Matsuo Obu ) Webエンジニア ( フリーランス ) 現在

    … もっぱらReact 過去 … Ruby, Java 未来 … Angular, Go 仮想通貨投資 DTM ( ボカロP ) ダンスの習い事 勉強会主催
  3. GraphQL知ってる方いますか?

  4. もくじ ➢ GraphQLとは? ➢ RESTとの違い ➢ APIを叩いてみよう ➢ 所感

  5. GraphQLとは?

  6. GraphQLとは? ➢ Facebookが作ったAPIのインタフェース仕様 http://graphql.org/

  7. 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 という専用ライブラリがある
  8. GitHubの開発者用ページではGraphQLが主流っぽくなってる https://developer.github.com/ ➢ GitHubがGraphQLでAPIを実装したことが話題に GraphQLとは? API v4 がGraphQL ( API

    v3 がREST )
  9. RESTとの違い

  10. • 「リソースの完全なビューを集約するために、2〜3回の別々のリクエ ストが必要になることがありました。私たちのレスポンスは同時に多く のデータを送信し、利用者が必要とするデータは含まれていなかった ようです。」 「RESTは完全でなく、いくつかの欠点があります」 RESTとの違い GraphQLでAPIを実装した背景 ( githubengineering.comより

    ) • APIの改善要求 エンドポイントに関するメタ情報収集、ページネーションの改善、リク エストパラメータの型安全化、コードからドキュメントの自動生成な ど...
  11. RESTとの違い GraphQLはAPIのためのクエリ言語でありランタイム ➔ RESTでは ... ➔ GraphQLでは ... • リソース毎に複数のエンドポイントに対してリクエストを送る

    • サーバは設計したフォーマットを返すように実装する • 1つのエンドポイントに対して必要な情報をクエリとして定義する • サーバはクエリに応じて動的なレスポンスを返す ★ 必要な情報だけを1回のリクエストでまとめて取得できる
  12. RESTとの違い GraphQLはAPIのためのクエリ言語でありランタイム ➢ スキーマを定義しといて ➢ 予測したデータが返る ➢ クエリを投げれば

  13. APIを叩いてみよう

  14. APIを叩いてみよう GitHubアカウントがあればすぐ使える https://developer.github.com/v4/explorer/

  15. APIを叩いてみよう GitHubアカウントがあればすぐ使える https://developer.github.com/v4/explorer/ ドキュメント見ながらクエリ作り ➢ queryは取得系 ➢ mutationは更新系

  16. 所感

  17. • API設計に対するフロントvsバックの争いが少なくなる のではないかと思う 所感 • 導入事例がまだ少ないため、案件に導入するにはリス クが高いなと思う • フロントもバックも両方実装が必要であるため、チーム でやる場合は全体でキャッチアップが必要

    ★ Facebook信者は何も考えず導入しよう!
  18. 参考リンク ➢ 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
  19. ありがとうございました