ちょっと気になる隣の技術畑

第3回アプリ開発の福音となるGraphQL

画像

【話し手】
佐野 健介(SANO Kensuke(そな太)

Appify Technologies CTO。Go、React、Jetpack Composeのエンジニアです。最近は宣言的UI、GraphQL、Reactive Systemを中心にインプットをしています。
GitHub:sonatard
Twitter:@sonatard

技術分野は成熟が進み、新しい領域が急激に増えています。本コーナーでは技術へのタッチポイントを増やすことを目標に、各分野で活躍されている方をお迎えします。

今回は長年、GraphQLを追いかけている佐野さんにWebフロントだけでなくアプリ開発でも活きるメリットを語っていただきます。

ファーストインプレッション

日高:さっそく、自己紹介からお願いできますか?

佐野:Appify Technologiesという会社に勤めていて、今やっていることはノーコードでアプリをリリースできるサービスです。そこでAndroidとiOS、両方を扱っています。

日高:それぞれのアプリと通信するWeb APIプラットフォームにGraphQLを使っているということでしょうか。

佐野:ええ。アプリとサーバサイドのインタフェースにGraphQLを採用しています。GraphQL はクライアント側が欲しい情報を取得するクエリを発行し、レスポンスを返します。これが宣言的UIに代表されるリアクティブプログラミングとの相性が良いとも感じていて、アプリもAndroidはJetpack Compose、iOSではSwiftUIと宣言的UIをフルに使って書いていますね。その背景とかもお伝えしたいなと思っています。

日高:触り始めたときもそのあたりにメリットを感じたわけですか?

佐野:最初に知ったきっかけは、現職の同僚からGraphQLを使ってみたいと話があり、簡単な社内ツールで使ってみたところからだったと思います。機会があってプロダクション環境に投入したのが2019年ぐらいですね。

日高:実際に使ってみてどう感じましたか。私自身、ふわっとした理解でとどまっているのでいろいろうかがいたいです。

佐野:そうですね。当時はWebサービスから使い始めていたんですけど、やっぱり1つのクエリで必要な情報を取ってこれる体験がいいですね。すごく楽にアプリが作れる実感がありました。ただGraphQLは、はじめて触ったときの印象と使いこなしたときの印象がだいぶ違うツールなのかなと思っています。

日高:導入のメリットはあるけど、ちょっと触るぐらいでは理解されにくい。使いこなすのにコツがいると?

佐野:そんなに大げさではないと思いますが、それこそ最初に世の中に認知されはじめたタイミングはGitHubのWeb APIをGraphQLでたたけるよとニュースになったときじゃないかな。あのとき、私が思ったことは「なんかREST APIと比べて、いらないデータを取らなくて済むんだな」という感想しか持っていなくて。当時はずいぶん損してたなと(笑⁠⁠。

アプリと相性が良いクエリ

日高:GitHubがGraphQLの採用を発表した時期は2016年ごろですね。今ではGraphQLもそこそこ使われていると感じています。コミュニティも育っていっているのかなと。現在まで使ってみて印象はどのように変化しましたか?

佐野:最初は少し簡単に開発できるなという感覚でしたが、知れば知るほどクライアント側での開発効率が上がるという想像以上の経験をしています。

日高:クライアント側ってだいたいWeb APIをいくつか束ねて画面に表示する情報を集めますよね。REST APIの待ち合わせやエラー処理が複数でてくると、考えることが多くなって大変です。こういう課題に対して必要な情報がクエリで取れるGraphQLのメリットが活きてくるんでしょうか。

佐野:クライアントのアプリ開発を乱暴に分類すると、Web APIをたたいてデータを取って来るところと、画面に表示するビューを作るっていう2つが大きいと思うんです。インタフェースがGraphQLになると、まずWeb APIをたたくところがめちゃくちゃ簡単になる。

日高:それはクエリがあるからAPIがシンプルになるという意味?

佐野:説明の前にアプリ側の設計を補足したいんですが、画面遷移の効率を考えるとデータを取ってきてローカルに保存する必要性が出てきます。遷移ごとに何度もWeb APIをたたくとずいぶん待つことになるので、できるだけ避けたいわけです。宣言的UIの世界ではReduxなど設計で工夫して対応していきます。

日高:たしかに。ユーザー体験を考えるとキャッシュしておきたい。

佐野:GraphQLではApollo ClientのようなOSSOpen Source Softwareのクライアントライブラリが提供されていてキャッシュがとても簡単になります。丸ごと処理を書かなくてよいので、まず、ここですごい楽だと感じます。

日高:設計でカバーしていたところをライブラリの中に押し止められる。考えることが減ると。しかし複数のAPIを1つのクエリにまとめてしまうとバックエンドはこれまでに比べて難しくなっていそうですが。

佐野:そう。これはいろいろな意見があると思うんですけど、私としては実装コストもほとんど変わらない印象です。それよりもGraphQLを入れたことによって、クライアントのビューの仕様に依存してWeb APIを変えなければいけないというコミュニケーションがなくなりました。そこが一番バックエンドを開発していてうれしいところです。

クエリが便利な理由

日高:それはうれしいですね。GraphQLのどんな特徴がバックエンドに寄与しているのか、具体的に教えてください。

佐野:ちょっと例を使って説明してみましょうか。ショッピングアプリでプロフィール画面にユーザーの注文一覧も出したいと考えてください。

日高:えーと素朴な実装をするとプロフィールを表示するためにユーザーIDを使ってプロフィール取得Web APIを呼び出し、合わせて注文一覧を引くWeb APIを作る感じですね。

佐野:そうですね。REST APIだとAPIそのものが増えたり、パラメータが増えたりするはずです。GraphQLだとクライアントが欲しいデータを問い合わせるクエリを書いて、サーバサイドと通信します。1つのクエリでユーザーIDも注文一覧も受け取るように変更できます。APIを分けなくていいし「このユーザーのプロフィールと注文一覧が一緒に欲しい」とクエリ上で表現できるので直感的です。

日高:つまりプロフィールと注文一覧が両方取れるAPIを新設するのと同じ効果をより小さい手間で得られると。

佐野:GraphQLでは何が取得できるかをスキーマとして定義します。新規に取得できる情報を追加するときには、スキーマにフィールドを追加します。またクライアントは必要なフィールドだけをクエリに記述して取得します。そのため新規にフィールドを追加しても既存画面のレスポンスには影響しないので、すごく追加しやすい。

日高:RESTのAPIパラメータは安易に追加できないですよね。APIのレスポンスに注文一覧が含まれてデータが大きくなると使わないときに効率的じゃないし、互換性の検証が増えてしまって品質面で気を付けなきゃ……という負担もありそうです。

佐野:もちろんGraphQLでも気を付ける点はあります。しかしスキーマがあるので問い合わせのクエリが正しいかを検証しやすい。クライアントが使わないなら、そもそもデータを送らない。送ってこないなら振る舞いは変わらないので影響ないよね、と論理的に安全だと判断できます。

日高:たしかにそうですね。クライアントも画面構成を変えやすくなるなら効率の良さを感じます。

複雑性に対抗する手段

佐野:バックエンドとクライアント、お互いが幸せになれそうですね。REST APIではAPIのエンドポイントの組み合わせに設計意図が反映されます。たくさんのAPIがあると、このAPIはいつ使う想定ですか? とコミュニケーションしないといけません。

GraphQLではクエリそのものに設計意図が反映できます。プロフィールと注文一覧を同時に要求されたら、これは一緒に使うんだろうなと。使わないフィールドは送られないので「このパラメータは取得していますが、実はもう使っていないんです」ということもない。理解もしやすいはずです。

日高:いまプロフィール画面を例に話をしていたのでわかりやすいなと思ったのですが、アプリで画面が50とかそれ以上に複雑なときにも作りやすいかって大事なポイントだなと感じます。APIが増えるかわりにクエリで柔軟な表現ができる、そのメリットがわかってきました。

佐野:柔軟な表現ができるとユースケースに合わせた設計ができます。iOSやAndroid、Webごとに専用のAPIを用意する必要もないのでプラットフォームへの依存を感じることも少なくなるはずです。

聞き手 日高正博
聞き手 日高正博

日高:それはすごく良いですね。一方でクエリが柔軟なばかりに複雑になるというケースはないんでしょうか。さっきの例だと注文一覧が実は時間がかかる処理だったとか。

佐野:そういうときはクエリの複雑性に制限をかけられます。Complexityが定義できて、一定以上はエラーにするとかですね。ほかにもApollo Studioなど開発ツールも役に立ちますよ。無料でも使えますがエンタープライズ向けの有料プランもありますね。クエリのレスポンスを確認したり、利用統計を見たりできます

日高:それは知りませんでした。利用統計は便利そうです。

佐野:Apollo社はGraphQLでビジネスをしている企業です。最近ではMicrosoftとの協業やNetflixが自社クライアントをApollo製のOSSライブラリに置き換えるといった発表もありました。

日高:なるほど。広く使われているクライアントであれば学習コストも低くて済みます。

佐野:マイクロサービスでgRPCが一気に普及したのと同じように、利用する企業が増えることで周辺技術が一層発展していくのかなと思っていますね。

日高:わかります。メリットがあるのは大企業だけではないと感じてきました。もっといろいろな利用形態が生まれていい時期かもしれません。

佐野:ええ。私も自社事業で使っていますがスタートアップですよ(笑⁠⁠。GraphQLのおかげで機能開発に注力できています。エンジニアが足りていないので効率の良い開発が課題になるのですが、クライアントの開発では反復作業が多かったです。それがだいぶ減りましたね。

友達は宣言的UI

日高:GraphQLを使うことで省略できる部分が?

佐野:冒頭で触れた宣言的UIとの相性が良いという話題ですが、アプリの画面つまりビューを作る部分を短縮できればその工数で次の機能にすばやく取り組める。私たちの場合はバックエンド開発により時間を費やすことができています。

日高:宣言的UIは命令的な記述ではなく、どういう状態かを書くものと理解しています。

佐野:そうです。代表的なものはWebであればReact、AndroidだとJetpack Compose、iOSならSwiftUIなどですね。これらのフレームワークにのっとることで「ビューをどうやって更新しようか」という手続きから解放されます。

日高:GraphQLと相性が良い部分はどこあたりでしょう。

佐野:基本的にビューはユーザー操作をトリガにバックエンドからデータを得て、それに基づいて更新します。もちろんほかにもトリガはありますが。GraphQLと組み合わせて使うと、欲しいデータを取得するクエリがあれば遷移すべき状態を得られます。そこには更新手順などの時間軸は関係ありません。

日高:それは夢のある話ですね。REST APIだとどうしても順序を気にすると思います。AのあとBをたたいてAとBのレスポンスを合わせて必要な情報を取り出して画面に出すデータを作る。しかし究極的には開発者は順序を気にしたいわけじゃなくてビューを作りたいだけだと。

佐野:まさにボイラーコードの大部分をGraphQLのクライアントとリアクティブシステムが隠蔽いんぺいしてくれるから生産性高く開発できるのだと思います。

日高:欲しいデータが多いと一度のリクエストではレスポンスがなかなか返ってこないケースもあるのでは?

佐野:パフォーマンス問題ですね。これも現在GraphQLのスペックを強化するために議論しているポイントです。プロポーザルとしてdeferディレクティブがあがっています。クエリ中のフィールドに付与するとあとから値を返せるようになります。遅いフィールドにクエリ全体が引きずられないようにするものです。

日高:それは使い勝手がよさそうです。たくさんアクセスのあるデータって多少なりとも分布に偏りがありますからね。気になるならApollo Studioなどの開発ツールでチェックできると。

写真1 佐野さん(左)にはリモートで対応いただきました。
写真1 佐野さん(左)にはリモートで対応いただきました。

将来への期待

佐野:そうですね。GraphQLは書きやすさや生産性を考えると、むしろスタートアップこそ活きてきます。

日高:やりたいことを手助けしてくれるツールなんですね。

佐野:ええ。OSSという点もすばらしいですがApolloの有償プランってボトルネックの解析やチューニングに使えるものが多いんです。GraphQLを中心にビジネスをする企業がではじめているのも好ましい技術の使われ方で、良いループが回り始めていると感じます。

日高:今回はじめて知ったことも多かったです。

佐野:誤解されやすいというか、わからずに使ってしまうと逆にうまく使えないみたいなことがあるので、積極的に情報を出して日本のコミュニティを底上げしたい気持ちもありますね。

日高:開拓者精神ですね。Webだけじゃなくてアプリ開発でも将来性があると聞けて良かったなと思います。

佐野:OSSに貢献する人が増えたり、情報交換ができたりして、みんなが自然と使える技術になっていくといいですね。

WEB+DB PRESS

本誌最新号をチェック!
WEB+DB PRESS Vol.134

2023年4月22日発売
B5判/160ページ
定価1,628円
(本体1,480円+税10%)
ISBN978-4-297-13477-8

  • 特集1
    仕様ファーストでいこう!
    実践API設計
    堅牢で、保守性に優れたWebサービスの実現
  • 特集2
    はじめての画像回帰テスト
    Storybook&Chromaticで品質も生産性も向上!
  • 特集3
    画像生成AIのしくみ
    Stable Diffusionの内部を探る

おすすめ記事

記事・ニュース一覧