「初めてのGraphQL」を読んだ＆やった

2020年2月9日 20:14

こんにちは、あかしぃです。

先日、『初めてのGraphQL』を読んだ感想という記事を見て、この本の存在を知り、なんだか面白そうだったのでさっそく買ってきて取り組んでみました。忘れないうちに、簡単な感想などをまとめておきます。

GraphQLについて

GraphQLはFacebookが開発、公開したWeb APIの通信規格です。特徴として、基本的にサーバー側にはエンドポイントを一つしか用意せず、クライアントから投げられるクエリの内容によってサーバーが返却するデータの内容、構造が変わるというものがあります。

現在、最も一般的に使われているWeb APIの通信規格はRESTですが、GraphQLはRESTが持つ問題を解決するメリットがあると言われています。

REST APIの場合、同じエンドポイントを叩いた際にサーバーから返却されるデータの内容などは基本的に一定です。これはとても便利ですが、フロントエンド側でそのページにおいては利用しないデータも含まれる、というケースが多々あります。

データ量が少ないうちはパフォーマンスに与える影響は軽微ですが、あまりに多くなると通信が遅延し、UXへの悪影響が懸念されます。また、データ構造が複雑になるほど、開発時においてフロントエンドエンジニア、バックエンドエンジニアにとって大きな負担になります。

GraphQLは、フロントエンド側から必要なデータのみを取得できるようクエリを発行し、サーバーはそれに応じたデータを返却する、という仕組みになっています。フロントエンドエンジニアにとっては、直接DBから必要なデータを抜き出せる、という感覚に近いです。（もちろん、サーバー側でGraphQLに対応したスキーマ設計、実装が必要です）

これは、フロントエンドエンジニアがFirebaseをとてもありがたがるのと近しいものがあるかもしれません。

自分はGatsbyでブログを作った際にGraphQLを触っていたので、今回全くの0からGraphQLを勉強したというわけではありません。ただ、GatsbyはGraphQL部分をよしなにやってくれているので、開発時にGraphQLを強く意識する必要はありません。

そのため、この本でしっかりGraphQLを知ることができたのは幸運でした。GraphQLの仕様から実装まで、丁寧に解説してくれているので、全くGraphQLを知らなくても読み進めることができるようになっています。

以下、各章の内容の簡単な解説です。

1章 GraphQLへようこそ

今までのクライアント、サーバー間の簡単な歴史の解説と、GraphQLが開発された経緯などが紹介されています。

GraphQLは言語ではなく、あくまで規格の一つです。そのため、プログラミング言語によらず実装することができます。もちろん、規格に則ってパーサーなどを一から開発して利用する、というのは非現実的なので、公開されているライブラリを使って利用することになります。Apollo Server、Apollo Clientが有名です。

Facebookが公開されている「Relay」というライブラリもあるそうなのですが、自分は知りませんでした。

2章グラフ理論

グラフ理論は、数学における有名な理論の一つです。プログラミングでもデータ構造の一つとして登場します。

GraphQLはその名の通り、グラフ理論がベースにあります。自身と紐づいているノードを芋づる式に取得できる、みたいなイメージです。

2章はデータ構造やアルゴリズム関連の説明が主なのですが、最近、競技プログラミングに取り組んでいることもあり、説明がスッと理解できました。こうやって知識が有機的に繋がっていく瞬間が一番面白いですね。

3章 GraphQLの問い合わせ言語

GraphQLではクエリを発行してクライアント、サーバー間でやりとりしますが、そのクエリの種類は大きく3種類に大別されます。それぞれQuery、Mutation、Subscriptionと呼ばれ、Queryは副作用を及ぼさないクエリ（GET）、Mutationは副作用を及ぼすクエリとなっています（POST、PUT、DELETE）。Subscriptionは少し特殊で、Websocketの機能を提供します。

4章スキーマの設計

DBやJSONでスキーマ設計を行うように、GraphQLでもあらかじめスキーマを決定しておく必要があります。あるQueryにおいて返却するフィールドはどれか、また、そのフィールドの型は何かと、というものです。

GraphQLの妙は、スキーマで決定したフィールドであっても必ずしも返却する必要がない、という点です。フロントエンド側からそのフィールドを取得する旨のクエリが発行されなければ、レスポンスにそのフィールドを含める必要がありません。そのため、フロントエンド側で必要なパラメータのみを問い合わせる、ということが可能になります。

また、スキーマや型におけるバリデーションが可能になるので、フロント、サーバーの両方における開発体験が向上する可能性があります。

5章 GraphQLサーバーの実装

この章からはお待ちかねの、実際にGraphQLを使ってアプリを作ってみようのコーナーです。

5章ではまずGraphQLサーバーを実装します。Node.jsを使って実装していきますが、GraphQLのライブラリが存在する言語であればどれでも問題ないとの記述があります。ただNode.jsの基本的な知識があればとくに困ることもないので、JavaScriptが大嫌い！とかでなければ素直にNode.jsで書けばいいと思います。

6章 GraphQLクライアントの実装

6章ではクライアント側を実装していきます。利用技術はReactです。ただ、この章においてもReactじゃないとダメ、というわけではないので、別にVue.jsで実装しても大丈夫みたいです。

7章 GraphQLの実戦投入にあたって

5章、6章で作成したアプリをさらにグレードアップさせていきます。この章まではSubscriptionを利用した機能を実装します。Websocketはなんだか難しいイメージですが、Apolloライブラリがとても便利で、最小限の実装でプッシュ機能を実装することができます。

また、章の後半ではGraphQLにおけるセキュリティ戦略、パフォーマンス改善戦略についての解説もあり、プロダクション環境に導入する前に考えておかなければならないことの簡単な手引きのようになっています。

まとめ

技術書の中ではとても読みやすく、またそこまで厚くないので、10時間もかからず最後まで実装ができました。現場でGraphQLを使ってみたい！という気持ちになる本だと思います。

また、Apolloライブラリが非常に便利で、まさにおんぶにだっこという感じで実装を進めていけるので、学習コストもそこまで高くない印象を持ちました。ライブラリ側の実装も見てみるとより理解が深まる気がしているので、やってみようかと思います。