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

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. ありがとうございました