GraphQL とは？REST API の代替になる？
2019.06.19
GraphQL とは
GraphQL をご存知でしょうか？
API の仕様なのですが、こいつがなかなか結構すごいやつなのです。
クライアントとサーバー間の通信を行うときに利用するクエリ（query）言語です。
クエリ（query）とは？
クエリ（query）とは、「質問する」「紹介する」「問い合わせる」などの意味をもつ英単語です。
SQL データベースに要求するときは、 SQL クエリとか言いますよね。
Graph を要求するクエリ言語
GraphQL は、 Graph を要求するクエリ言語という意味になります。
グラフ……といえば、おそらく「折れ線グラフ」や「円グラフ」「棒グラフ」といったものを連想すると思います。
ですが、GraphQL が指すグラフは、グラフ理論を元にしたもので、点（ノード）と線（エッジ）の集合で構成されたグラフのことを指しています。
よくみてみると、GraphQL のロゴマークも、点と線で構成されておりグラフになっています。
GraphQL のグラフとは、データ構造としてのグラフとして理解すると良いでしょう。
GraphQL は、主に Facebook が開発しており、GitHub や Pinterest が利用しています。
GraphQL の特徴
GraphQL の動作
GraphQL で実装されたAPIが、どのように動作するのか見てみましょう。
実際に動作を見てみることで、GraphQL の特徴を捉えることができると思います。
今回の例では、 GitHub が提供している GraphQL Explorer を利用してみます。
欲しいデータだけを取得できる
たとえば、現在のログインしているユーザーの名前を取得するクエリを発行しましょう。
1 2 3 4 5 | { viewer { login } } |
以下のようなデータが返ってきます。
1 2 3 4 5 6 7 | { "data":{ "viewer": { "login": ****** (ログインユーザー名) } } } |
クエリとデータの構造が同じようになっていると思います。
ログインしているユーザー名を問い合わせしたので、そのデータだけ取得することができました
クライアントが必要なデータだけを取得することができるのは、 GraphQL の特徴の1つです。
1回の通信で欲しい情報を取得できる
もう少しデータを取得してみましょう。
- 現在のユーザー名
- bio（プロフィールのコメント）
- 最新のリポジトリ名
上記の3件を取得してみましょう。
それと同時に、「GraphQL」という名前を含むリポジトリ数も取得してみましょう。
ユーザー情報とリポジトリ情報なので、まったくデータの種類が異なりますが、GrapshQL では 1つのクエリで情報を取得できます。
GraphQL のクエリ
GraphQL のクエリは、以下のようになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | query { ## 閲覧者の情報を取得 viewer { login bio repositories(last:3 ) { edges { node { name } } } } ## GraphQL の名前を含んだリポジトリを検索 search(query: "GraphQL", type: REPOSITORY) { repositoryCount } } |
返ってくるデータは、以下のようなものになります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | { "data": { "viewer": { "login": "*****", "bio": "", "repositories": { "edges": [ { "node": { "name": "リポジトリ１" } }, { "node": { "name": "リポジトリ2" } }, { "node": { "name": "リポジトリ3" } } ] } } } "search": { "repositoryCount": 44606 } } |
欲しい情報が 1つのクエリで一気に取得できました。
ここまでのまとめ
- GraphQL ではどのようなデータが欲しいのかクエリに書くと、そのデータがそのまま返ってきます。
- 取得するデータをクライアント側で定義できるので、必要なデータだけを取得することが可能です。
- 複数の情報も、1つのクエリで取得可能です。
GraphQL の実装
GraphQL は、 「C#」 や 「Elixir」「Go」「Java」「JavaScript」「PHP」「Python」「Scala」「Ruby」 など、各言語で実装がされています。
GraphQL を導入した API を作成する場合、開発言語の制限を受けることはないでしょう。
GraphQL と REST を比較
GraphQL と対をなすものとして REST API があると思います。
REST API とは、簡単に説明すると、URLとリソースが紐付いており、特定のURLにアクセスすると、それに関する情報が取得できる API です。
例えば、書籍と著者情報が取得できるAPIであれば以下のような API になるでしょう。
1 2 3 | GET /books/:id GET /authors/:id GET /books/:id/comments |
世の中に提供されている API は REST 準拠のものがおおく、WEB開発者であれば親しみのあるものだと思います。
REST API と似ているところ
REST API と GraphQL で似ていることは、以下のようなものがあります。
- どちらもリソースが主体
- HTTP GET リクエストを通してデータを取得する
- JSON データを返却することができる
GraphQLのメリット
REST APIと比較すると、以下のようなメリットがあります。
- 必要な情報しか通信が行われないので余分な通信が行われない
- フロントエンド側で取得する情報が決定できるので、開発が早くなる。
- 取得される情報が可視化されるので、データ分析の役に立つ
- スキーマによる型定義の恩恵を得られる
1. 必要な情報しか通信が行われないので余分な通信が行われない
GraphQL では、クエリによって通信内容が決定されます。
必要な情報だけしか取得せず過不足なく通信できます。
それにたいして、REST API では URL から取得できる情報は固定です。
API 設計によっては余分な情報を取得してしまったり、不足する情報をおぎなうために別のURLにアクセスする必要がでてきます。
2. フロントエンド側で取得する情報が決定できるので、開発が早くなる
REST APIでは、URLごとに取得できる情報は固定です。
そのため、通信内容を最適化する場合、WEB ページごとに最適なAPIを作成する必要があります。
そして、もし仮に、あるWEBページのために REST API を最適化しても、WEBページのUI 変更によってはデータの過不足が生じて API 側も変更の必要に迫られます。
GraphQLでは、フロントエンド側で情報を選択できるので、UI 変更に際してバックエンド側の調整が不要になります。
（GraphQL のスキーマに定義されていない情報を取得する場合、バックエンド側の追加作業が必要になります。）
3. 取得される情報が可視化されるので、データ分析の役に立つ
REST API では、 URL 単位でアクセス解析が行えます。
GraphQL では、クライアントは欲しい情報をクエリに書いて要求してきます。
そのため、より粒度が小さく、必要とされているリソースの解析が行え、パフォーマンス監視が行えます。
4. スキーマによる型定義の恩恵を得られる
GraphQL では、スキーマを定義して実装を行います。
スキーマによって、どのようなフィールドがあるのか、どのような形で取得できるのかが明確になります。
クライアントとサーバー間でそれは一種の契約として機能し、フロントエンドとバックエンドの並行開発の役に立ちます。
あらかじめ取得できるデータの型が定義されるので、フロントエンドで必要なデータ構造のモックを作成しアプリケーションのテストが簡単に行えます。
（もちろん、REST API でも開発の仕様書等であらかじめ返却するデータの構造は定義するでしょうし、並行開発が可能かと思います。ですが、GraphQL では、言語仕様としてスキーマが取り入れられて、より厳格に作用します）
さいごに
以上、 GraphQL に関してでした。
GraphQL は、柔軟にリソースを取得できることが魅力的ですね。
この記事が、お役に立てば幸いです！
参考
一緒に働いてくれる仲間を募集しております！
ライトコードでは、仲間を募集しております！
当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。
また、ライトコードは現在、急成長中！だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております！
なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。
ライトコードでは一緒に働いていただける方を募集しております！
採用情報はこちら書いた人はこんな人
関連記事
採用情報
\ クリエイティブの最前線 /
フロントエンドエンジニア
\ 世界はお前の手の中に・・・ /
モバイルエンジニア
\ サービスの守り神！ /
インフラエンジニア
\ センスで挑め！ /
UI/UXデザイナー
\ 世界を震撼させろ！ /
WEB開発ディレクター
\ 妄想野郎カモン！ /
ゲームプランナー
\ ゲーム好き集合ー！ /
ゲームエンジニア
