はじめに
本記事はREST APIとGraphQLの違いを初学者でも超ざっくりイメージできることを目標にしています。
難しいコードの話はあえてせずできないだけ、学生生活の例え話をしながら説明します！
GraphQLの公式サイトはこちら！
目次
1.ノート貸して！
2.ルーズリーフ貸して！
3.エンドポイントが複数か単一か
4.テスト範囲じゃない板書も含まれる
5.テスト範囲の板書が漏れてしまう
6.まとめ
7.参考資料
8.最後に
ノート貸して！
あなたは高校生です。あなたは不真面目なので板書を全く取っていません。
テスト前に友達のAちゃんにノートを貸してもらうことにしました。
あなた「来週の定期試験に向けて数学のノート貸してほしいだけど！」
Aちゃん「いいよ、数学だから青のノートだよ。どうぞ！」
Aちゃんが数学の青のノートを貸してくれました。
でも、定期試験は数学だけじゃありません。
あなた「物理のノートも貸してほしいんだ！お願い！」
Aちゃん「いいよ〜、物理だから緑のノートだよ。どうぞ！」
Aちゃんはとても優しいので物理の緑のノートも貸してくれました。
あなたは青のノートに書いてある数学の板書を、
緑のノートに書いてある物理の板書を見てテスト勉強をしました。
これがREST APIだと思ってください。
ルーズリーフ貸して！
次の定期試験がやってきました。
あなたは相変わらず板書を取っていませんので、またAちゃんにノートを借りに行きました。
あなた「来週の定期試験に向けてまた、数学のノートと物理のノートを貸してほしいだけど...！」
Aちゃん「いいよ、でも私、ルーズリーフに変えたからこのルーズリーフを１冊どうぞ！中に数学の板書も物理の板書も両方入っているよ！」
Aちゃんはノートからルーズリーフに変えたようです。
あなたは１冊のルーズリーフから数学と物理の板書を見てテスト勉強をしました。
これがGraphQLだと思ってください。
では次からREST APIとGraphQLの違いを説明します。
エンドポイントが複数か単一か
エンドポイントとはデータを取得するための特定のURI(URL)です。
先ほどの例ではノートだったり、ルーズリーフがエンドポイントになります。
ノートに板書をしていた時は複数のノートが教科ごとにありました。
しかしルーズリーフにしたことで一冊のルーズリーフに複数の教科の板書をまとめることができました。
| REST API | GraphQL | |
|---|---|---|
| エンドポイント | 複数のエンドポイントがある | １つのエンドポイント |
これがREST APIとGraphQLの一つ目の違いです。
テスト範囲じゃない板書も含まれる
では、なぜAちゃんはノートからルーズリーフに変えたのでしょうか？
それはノートの場合は、ノートが終わらない限り前のテスト範囲の板書だったり、
前の前のテスト範囲の板書も含まれてしまうからです。
これを「オーバーフェッチング(過剰取得)」といいます。
一方でルーズリーフは前のテスト範囲の板書は抜いて、
今回のテスト範囲の板書のみをまとめることができます。
| REST API | GraphQL | |
|---|---|---|
| オーバーフェッチング(過剰取得) | 必要ない情報も一緒に取得される可能性がある | クライアントが必要な情報のみ指定できるため、過剰なデータ取得が起こりにくい |
これがREST APIとGraphQLの二つ目の違いです。
テスト範囲の板書が漏れてしまう
Aちゃんはノートからルーズリーフに変えた理由はもう一つあります。
それはノートの場合、ノートが終わってしまったら次のノートに板書を書かないといけないことです。
つまり一つの教科の定期テストで２冊ノートが必要なときも出てきます。
一冊目のノートだけでは全部の板書が確認できないことを「アンダーフェッチング(過剰不足)」といいます。
一方でルーズリーフは今回のテスト範囲が広くてもページを追加することができるのでアンダーフェッチングは起きません。
| 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も説明する記事を書こうと思います！