【初心者向け】REST APIとGraphQLの違いを超ざっくり解説する

## はじめに
本記事はREST APIとGraphQLの違いを初学者でも超ざっくりイメージできることを目標にしています。
難しいコードの話はあえてせず~~できないだけ~~、学生生活の例え話をしながら説明します！


GraphQLの公式サイトはこちら！

https://graphql.org/


## 目次
[1.ノート貸して！](#ノート貸して)
[2.ルーズリーフ貸して！](#ルーズリーフ貸して)
[3.エンドポイントが複数か単一か](#エンドポイントが複数か単一か)
[4.テスト範囲じゃない板書も含まれる](#テスト範囲じゃない板書も含まれる)
[5.テスト範囲の板書が漏れてしまう](#テスト範囲の板書が漏れてしまう)
[6.まとめ](#まとめ)
[7.参考資料](#参考資料)
[8.最後に](#最後に)




## ノート貸して！
あなたは高校生です。あなたは不真面目なので板書を全く取っていません。
テスト前に友達のAちゃんにノートを貸してもらうことにしました。

>あなた「来週の定期試験に向けて数学のノート貸してほしいだけど！」
Aちゃん「いいよ、数学だから<font color="blue">**青のノート**</font>だよ。どうぞ！」

Aちゃんが数学の<font color="blue">**青のノート**</font>を貸してくれました。
でも、定期試験は数学だけじゃありません。

>あなた「物理のノートも貸してほしいんだ！お願い！」
Aちゃん「いいよ〜、物理だから<font color="green">**緑のノート**</font>だよ。どうぞ！」


<br>
Aちゃんはとても優しいので物理の<font color="green"><strong>緑のノート</strong></font>も貸してくれました。<br>
あなたは<font color="blue"><strong>青のノート</strong></font>に書いてある数学の板書を、<br>
<font color="green"><strong>緑のノート</strong></font>に書いてある物理の板書を見てテスト勉強をしました。<br>
これが<strong>REST API</strong>だと思ってください。


## ルーズリーフ貸して！
次の定期試験がやってきました。
あなたは相変わらず板書を取っていませんので、またAちゃんにノートを借りに行きました。

>あなた「来週の定期試験に向けてまた、数学のノートと物理のノートを貸してほしいだけど...！」
Aちゃん「いいよ、でも私、ルーズリーフに変えたからこのルーズリーフを**１冊**どうぞ！中に**数学の板書も物理の板書も両方入っているよ！**」

Aちゃんはノートからルーズリーフに変えたようです。
あなたは１冊のルーズリーフから数学と物理の板書を見てテスト勉強をしました。
これが**GraphQL**だと思ってください。


では次からREST APIとGraphQLの違いを説明します。

## エンドポイントが複数か単一か
エンドポイントとはデータを取得するための特定のURI(URL)です。
先ほどの例ではノートだったり、ルーズリーフがエンドポイントになります。
ノートに板書をしていた時は複数のノートが教科ごとにありました。
しかしルーズリーフにしたことで一冊のルーズリーフに複数の教科の板書をまとめることができました。


|  | REST API | GraphQL |
|:-:|:-:|:-:|
|エンドポイント   | 複数のエンドポイントがある  | １つのエンドポイント  |

これがREST APIとGraphQLの一つ目の違いです。


## テスト範囲じゃない板書も含まれる
では、なぜAちゃんはノートからルーズリーフに変えたのでしょうか？
それはノートの場合は、ノートが終わらない限り前のテスト範囲の板書だったり、
前の前のテスト範囲の板書も含まれてしまうからです。
これを<strong>「オーバーフェッチング(過剰取得)」</strong>といいます。

一方でルーズリーフは前のテスト範囲の板書は抜いて、
今回のテスト範囲の板書のみをまとめることができます。

|  | REST API | GraphQL |
|:-:|:-:|:-:|
|オーバーフェッチング(過剰取得)   | 必要ない情報も一緒に取得される可能性がある  | クライアントが必要な情報のみ指定できるため、過剰なデータ取得が起こりにくい |

これがREST APIとGraphQLの二つ目の違いです。

## テスト範囲の板書が漏れてしまう
Aちゃんはノートからルーズリーフに変えた理由はもう一つあります。
それはノートの場合、ノートが終わってしまったら次のノートに板書を書かないといけないことです。
つまり一つの教科の定期テストで２冊ノートが必要なときも出てきます。

一冊目のノートだけでは全部の板書が確認できないことを<strong>「アンダーフェッチング(過剰不足)」</strong>といいます。

一方でルーズリーフは今回のテスト範囲が広くてもページを追加することができるのでアンダーフェッチングは起きません。

|  | REST API | GraphQL |
|:-:|:-:|:-:|
|アンダーフェッチング(過剰不足)   | 必要な情報が複数のエンドポイントに分散している場合、複数回リクエストを行う必要がある  | クライアントが必要な情報を1回のリクエストで指定できるため、情報の取得が効率的 |

これがREST APIとGraphQLの三つ目の違いです。



## まとめ
上記で説明したREST APIとGraphQLの違いをまとめると以下の通りです。
|  | REST API | GraphQL |
|:-:|:-:|:-:|
| 例え話  | ノートでの板書  | 	ルーズリーフでの板書  |
| エンドポイント  | 複数のエンドポイントがある  | 	１つのエンドポイント  |
| オーバーフェッチング(過剰取得)  | 必要ない情報も一緒に取得される可能性がある  | クライアントが必要な情報のみ指定できるため、過剰なデータ取得が起こりにくい  |
| アンダーフェッチング(過剰不足)  | 必要な情報が複数のエンドポイントに分散している場合、複数回リクエストを行う必要がある  | クライアントが必要な情報を1回のリクエストで指定できるため、情報の取得が効率的  |

超ざっくりイメージついたでしょうか？


## 参考資料

上記で紹介したサイトも含め、参考資料を紹介します。

■GraphQLの公式サイト
　https://graphql.org/
　・公式サイトはまず最初にチェックすることをお勧めします

■GraphQLZero
　https://graphqlzero.almansi.me
　・GraphQLのフェイクデータが載っています。ただ、私は最初見てもよく分かりませんでした。

■GraphQL API Playground.
　https://graphqlzero.almansi.me/api
　・GraphQLの動作を環境構築なしでブラウザで確認することができます。

■Shota NukumizuさんのZennの記事「GraphQLを徹底解説する記事」
　https://zenn.dev/nameless_sn/articles/graphql_tutorial
　・めちゃくちゃ詳しくまとめられています。

■@MakiMatsuさんの記事「GraphQLとは？REST API との比較もしてみました」
　https://qiita.com/MakiMatsu/items/c8c4b9ff0ecbd3c608e8
　・私の記事では述べていないデータ操作の種類や型づけについても述べられています。

■Udemyの無料チュートリアル「最短・最速で学ぶGraphQL実践入門 新たなAPI規格をマスターしよう！ 」
　https://www.udemy.com/course/graphql-api-crud-nodejs/
　・無料なのでどうぞ！CRUD操作を実際に実装できます！



## 最後に
アンダーフェッチングの例はちょっと強引でした。
本当は、
/userからユーザデータを取得したときに部署IDは取得できるけど部署名は分からない。
だから、/departmentに再度アクセスして部署名を取得しないといけない。
みたいな例の方がアンダーフェッチングの説明には適しています。

ただ、学校生活で例えてみようという取り組みに合わせようとすると
うまい例えが思いつかず、強引になってしまいました。

余力があればqueryやmutationも説明する記事を書こうと思います！