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    viewer {
3        login
4    }
5}

以下のようなデータが返ってきます。

1{
2  "data":{ 
3    "viewer": {
4       "login": ****** (ログインユーザー名)
5        }
6    }
7}

クエリとデータの構造が同じようになっていると思います。

ログインしているユーザー名を問い合わせしたので、そのデータだけ取得することができました

クライアントが必要なデータだけを取得することができるのは、 GraphQL の特徴の1つです。

1回の通信で欲しい情報を取得できる

もう少しデータを取得してみましょう。

1. 現在のユーザー名
2. bio（プロフィールのコメント）
3. 最新のリポジトリ名

上記の3件を取得してみましょう。

それと同時に、「GraphQL」という名前を含むリポジトリ数も取得してみましょう。

ユーザー情報とリポジトリ情報なので、まったくデータの種類が異なりますが、GrapshQL では 1つのクエリで情報を取得できます。

GraphQL のクエリ

GraphQL のクエリは、以下のようになります。

1query {
2  ## 閲覧者の情報を取得
3  viewer {
4    login
5    bio
6    
7    repositories(last:3 ) {
8      edges {
9        node {
10          name
11        }
12      }
13    }
14  }
15  
16  ## GraphQL の名前を含んだリポジトリを検索
17  search(query: "GraphQL", type: REPOSITORY) {
18    repositoryCount
19  }
20}

返ってくるデータは、以下のようなものになります。

1{
2  "data": {
3    "viewer": {
4      "login": "*****", 
5      "bio": "",
6      "repositories": {
7        "edges": [
8          {
9            "node": {
10              "name": "リポジトリ１"
11            }
12          },
13          {
14            "node": {
15              "name": "リポジトリ2"
16            }
17          },
18          {
19            "node": {
20              "name": "リポジトリ3"
21            }
22          }
23        ]
24      }
25    }
26  }
27  "search": {
28    "repositoryCount": 44606
29  }
30}

欲しい情報が 1つのクエリで一気に取得できました。

ここまでのまとめ

1. GraphQL ではどのようなデータが欲しいのかクエリに書くと、そのデータがそのまま返ってきます。
2. 取得するデータをクライアント側で定義できるので、必要なデータだけを取得することが可能です。
3. 複数の情報も、1つのクエリで取得可能です。

GraphQL の実装

GraphQL は、 「C#」 や 「Elixir」「Go」「Java」「JavaScript」「PHP」「Python」「Scala」「Ruby」 など、各言語で実装がされています。

GraphQL Server Libraries

GraphQL を導入した API を作成する場合、開発言語の制限を受けることはないでしょう。

GraphQL と REST を比較

GraphQL と対をなすものとして REST API があると思います。

REST API とは、簡単に説明すると、URLとリソースが紐付いており、特定のURLにアクセスすると、それに関する情報が取得できる API です。

例えば、書籍と著者情報が取得できるAPIであれば以下のような API になるでしょう。

1GET /books/:id
2GET /authors/:id
3GET /books/:id/comments

世の中に提供されている API は REST 準拠のものがおおく、WEB開発者であれば親しみのあるものだと思います。

REST API と似ているところ

REST API と GraphQL で似ていることは、以下のようなものがあります。

1. どちらもリソースが主体
2. HTTP GET リクエストを通してデータを取得する
3. JSON データを返却することができる

GraphQLのメリット

REST APIと比較すると、以下のようなメリットがあります。

1. 必要な情報しか通信が行われないので余分な通信が行われない
2. フロントエンド側で取得する情報が決定できるので、開発が早くなる。
3. 取得される情報が可視化されるので、データ分析の役に立つ
4. スキーマによる型定義の恩恵を得られる

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 は、柔軟にリソースを取得できることが魅力的ですね。

この記事が、お役に立てば幸いです！

こちらの記事もオススメ！

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...

2020.08.04エンジニアの働き方 特集社員としての働き方社員としてのエンジニアの働き方とは？ライトコードのエンジニアはどんな働き方をしてるのか、まとめたいと...

2020.07.27IT・コンピューターの歴史特集IT・コンピューターの歴史をまとめていきたいと思います！弊社ブログにある記事のみで構成しているため、まだ「未完成状態」...