GraphQL でフロントエンド とバックエンドを分離する id:magaming 2022/09/07 Hatena Engineer Seminar #21 GraphQL 活用編 1

magaming ● マンガメディア開発 チーム/Webアプリケー ションエンジニア ● GigaViewer for Web の開発をしている ● チンチラを飼っている 2

これまでのレンダリング方式 ● バックエンドは Perl ● テンプレートエンジン(Xslate)を使って HTML をレンダリング 3 Controller データ集めて くるメソッド テンプレート エンジン Routing Render

Xslate の例 4

これまでの API 環境 ● GraphQL API のエンドポイントはアプリ用に 存在している ● Web では使われていない 5

6 Web でも GraphQL 使いたくない？

なぜ GraphQL を使いたいか ● Web でも GraphQL を使えば、アプリと実装 が一本化されて開発コストが下がるのでは？ ● Xslate の書き心地がイマイチなので、できれ ばフロントエンドの環境を刷新したい ○ 型チェックが甘い ○ linter/formatter が良いのが無い… 7

8 じゃあ次のメディア を開発するときに やってみよう！

9 ところでフロントエンドの 環境はどうする？

フロントエンドの環境は？ ● 社内で実績のある Next.js + Apollo Client ? ● しかし新たに環境を作るのはコストが高い… ● 次のメディアのリリース日はもう決まってい るので、今から環境を作るのはスケジュール 的に厳しい… 10

11 では 「Web で GraphQL を使う」 「フロントエンド環境を作る」 を別々にやってみてはどうか？

Web で GraphQL を使うとは ● GraphQL に Web で必要な field を生やす ● Perl で GraphQL を叩いて、帰ってきた結果 をテンプレートエンジンに渡す 12 Controller GraphQLで データ集める テンプレート エンジン Routing Render

Before 13 sub top { my $banners = Giga::Service::Banner->banners; my $blog_entries = Giga::Service::Blog->entries; my $ranking = Giga::Service::Ranking->ranking; … # 集めたデータを Xslate に渡してレンダリング, 数が多いとその分記述が増える $c->render_html('top.html', banners => $banners, blog_entries => $blog_entries, ranking => $ranking, … ); };

After 14 sub top { my $query = q| query { banners { imageUrl alt } } … |; # 様々なデータを集めるのが1つのクエリで簡潔に表現できる！ my $result = Giga::GraphQL->execute_via_server($c, { query => $query }); $c->render_html('top.html', data => $result->data); # 結果をまるっと渡すのでスッキリ };

良かった点 ● データを集める処理が、GraphQL のクエリ だけで表現できるようになりスッキリした ● 既存の構成を大幅に変えずに、「Web で必要 な field を生やす」ことに集中できたので、 最小限の工数で対応できた 15

良かった点 ● Web で GraphQL がいけそうと分かって、フ ロントエンドとバックエンドの分離を自信を 持って進められた ● 次のメディアを開発するときに Next.js の環 境を作ったが、Web で必要な field はすでに 生やせていたので環境作りに注力できた ● 16

まとめ ● フロントエンドとバックエンドの分離は結構 大掛かりな作業だけど、物事を分解して段階 的に無理なくやっていくことができた ● Web/アプリ両方で GraphQL を使うことがで きた、実装が共通化されたことで開発コスト が下がり、より高速に開発が進むはず 17