GraphQL を使うと何が嬉しいのか?いろいろ触って検証してみた | SiTest (サイテスト) ブログ

メニューボタン閉じるボタン

GraphQL を使うと何が嬉しいのか?いろいろ触って検証してみた

みなさん「 GraphQL 」を聞いたことはありますか?
GraphQL とは、 API 用のクエリ言語で、昨年末から徐々に注目されてきたものです。
しかしながら国内ではまだあまり話題に上がっておらず、いまいちどのようなものか掴みにくいのが現状です。
そこで今回は GraphQL について、調べてみたり実際に触ってみたりして、生まれた背景や、何が嬉しいのか?をご紹介したいと思います。

GraphQL とは?

GraphQLのトレンド

GraphQL は、もともとは2012年頃 Facebook で開発されたもので、2015年にオープンソースになりました。
その後 GitHub が正式にサポートし、実際に GitHub の機能(※1)で使用されています。その他 Facebook はもちろん、 Pinterest 、 Coursera などでも使用されています。

GraphQL を採用した背景について、 GitHub のブログ(※2)を確認すると次のことが触れられていました。
・(以前から提供していた) REST API について、情報を積極的に公開しているにもかかわらず、 API 利用者から「 API が柔軟ではない」というフィードバックを受けていた
・REST API では、利用者が欲しいデータ以上の不要なデータを返していた
・実際、 API 利用者は欲しいデータを取得するまでに多くのリクエストのやりとりを行っていた

上記の背景から REST API より柔軟な API を設計するにあたって、どのような形がいいのか検討した結果 GraphQL に出会い、検証の後、採用することとなりました。

(※1)projects(GitHub上のリポジトリや組織単位で使えるカンバン機能)
(※2)https://githubengineering.com/the-github-graphql-api/

GraphQL の何が嬉しいのか?

API 設計者が GraphQL を採用することで何が嬉しいのでしょうか?

ペイロードのサイズを小さくすることが出来る

REST API ではエンドポイントの異なる n 個のデータを取得したい時、 n 回のリクエストを送らなければいけません。そして、そのレスポンスとして受け取ったデータの中には不要なデータも含んでいることがままあります。
しかし GraphQL では n 個のデータを含んだリクエストを、スキーマ設定次第では1回で済ませることが可能です。そして、レスポンスとして受け取ったデータは欲しいデータのみ取得することができます。
よってペイロード(通信のうちヘッダ部分を除いた、本来転送したいデータ本体のこと)のサイズを小さくすることが出来ます。

クエリと結果が似ているので、返ってくるデータの推測がしやすい

以下のクエリとその結果をご覧ください。
GraphQLのクエリと結果

左がクエリで右が結果です。
クエリとその結果がとても似ていますよね。

よって、やりとりしている API の仕様についてあまり知らない人でも、その API が何をリクエストしたら何を返してくれるか推測がしやすいです。

Node.js から GraphQL を実行してみる

GraphQL は、特定の言語に依存しているものではないので、各言語用のライブラリが提供されています。
ここでは Node.js 環境で実行できるライブラリ「 graphql 」を使ってみます。

var { graphql, buildSchema } = require('graphql');

var schema = buildSchema(`
  type Query {
    mynameis: String
    age: Int
    height: Int
    weight: Int
    condition: Boolean
  }
`);

var root = {
  mynameis: () => 'anonymous',
  age: () => 28,
  height: () => 170,
  weight: () => 68,
  condition: () => true
};

graphql(
  schema, // スキーマ指定
  '{ mynameis age height weight condition }', // 欲しいデータの指定
  root // データ
).then((response) => {
  console.log(response);
});

スキーマ・欲しいデータ・データ元を指定して graphql メソッドを実行すると、以下の結果が返ってきます。

メソッドの実行結果

また、ここでお分かりの通り、スキーマ設定時に、データの名前とともに String や Int などの型を指定しています。
これも GraphQL の特徴と言えます。
型を指定するので、そのデータ名に入っている値をその後の処理で安全に使用することができます。

express 上で GraphQL を実行してみる

Node.js 環境で実行できるライブラリがあるのなら当然、そのフレームワークである express 上で実行できるライブラリも提供されています。
それは「 express-graphql 」です。

var app = express();
app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: root,
  graphiql: true,
}));
app.listen(5100);

先程の graphql とスキーマやデータ等の設定はほぼほぼ一緒なので割愛しますが、 /graphql の HTTPリクエストがあった場合、 graphqlHTTP メソッドで実行することができます。
実際にサービスとして実装する場合は、こちらのライブラリを使うことになるかと思います。

まとめ

ざっとですが、 Node.js での実行や express での実行など試してみました。

今回検証した所感ですが、完成されていて今後大きくは変化することのないサービスの場合、そこからわざわざ GraphQL で書き直すメリットはないでしょう。
しかし、以下のケースの場合、 GraphQL を使うことで柔軟な設計・開発ができるのではないかと思います。
 ・ 新規サービス開発(新しく API を設計しまだまだ変更の可能性がある)
 ・ デバイス毎に表示するコンテンツを分ける必要があり、それによって取得するデータも異なる
 ・ NoSQL を使っているプロジェクト

ただし、無秩序なデータから取りたいデータを簡単に取得できるなんて夢のような技術では当然ありませんので、 GraphQL のメリットを充分受けるには、それなりの経験は必要かと思います。
また、まだまだ活用されたてでベストプラクティスが確立されていない状況なので、試行錯誤の時期はまだしばらく続くでしょう。
それでも API 設計者にとって、ユーザーの通信環境・デバイスが様々な状況で、必要なデータを最小のリクエスト数で提供できるというのは魅力的です。

私もまずは個人プロジェクトで継続的に試してみたいと思います。
今回は GraphQL はどのようなものかを実感するためにいろいろ触ってみましたが、次の機会には、実際に簡単なアプリを作成してみての感想もお届けしたいと思います!

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

今すぐお気軽に
ご相談ください。

0120-315-465

(平日 10:00~19:00)

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲:
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

いますぐ無料で
お試しください。

SiTest の革新的な機能を
お試しいただけます。
利用規約

お名前【必須】
メールアドレス【必須】
電話番号【必須】