Hatena Engineer Seminar #21 GraphQLでフロントエンドとバックエンドを分離する

Transcript

1. GraphQL でフロントエンド とバックエンドを分離する id:magaming 2022/09/07 Hatena Engineer Seminar #21 GraphQL 活用編 1
2. magaming • マンガメディア開発 チーム/Webアプリケー ションエンジニア • GigaViewer for Web の開発をしている • チンチラを飼っている 2
3. これまでのレンダリング方式 • バックエンドは Perl • テンプレートエンジン(Xslate)を使って HTML をレンダリング 3 Controller データ集めて くるメソッド テンプレート エンジン Routing Render
4. Xslate の例 4 <div class="banners"> [% FOR banner IN banners %] [% IF banner.url %] <a href="[% banner.url %]"> <img src="[% banner.image_url %]" alt="[% banner.alt %]"> </a> [% ELSE %] <img src="[% banner.image_url %]" alt="[% banner.alt %]"> [% END %] [% END %] </div>
5. これまでの API 環境 • GraphQL API のエンドポイントはアプリ用に 存在している • Web では使われていない 5
6. 6 Web でも GraphQL 使いたくない？
7. なぜ GraphQL を使いたいか • Web でも GraphQL を使えば、アプリと実装 が一本化されて開発コストが下がるのでは？ • Xslate の書き心地がイマイチなので、できれ ばフロントエンドの環境を刷新したい ◦ 型チェックが甘い ◦ linter/formatter が良いのが無い… 7
8. 8 じゃあ次のメディア を開発するときに やってみよう！
9. 9 ところでフロントエンドの 環境はどうする？
10. フロントエンドの環境は？ • 社内で実績のある Next.js + Apollo Client ? • しかし新たに環境を作るのはコストが高い… • 次のメディアのリリース日はもう決まってい るので、今から環境を作るのはスケジュール 的に厳しい… 10
11. 11 では 「Web で GraphQL を使う」 「フロントエンド環境を作る」 を別々にやってみてはどうか？
12. Web で GraphQL を使うとは • GraphQL に Web で必要な field を生やす • Perl で GraphQL を叩いて、帰ってきた結果 をテンプレートエンジンに渡す 12 Controller GraphQLで データ集める テンプレート エンジン Routing Render
13. 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, … ); };
14. 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); # 結果をまるっと渡すのでスッキリ };
15. 良かった点 • データを集める処理が、GraphQL のクエリ だけで表現できるようになりスッキリした • 既存の構成を大幅に変えずに、「Web で必要 な field を生やす」ことに集中できたので、 最小限の工数で対応できた 15
16. 良かった点 • Web で GraphQL がいけそうと分かって、フ ロントエンドとバックエンドの分離を自信を 持って進められた • 次のメディアを開発するときに Next.js の環 境を作ったが、Web で必要な field はすでに 生やせていたので環境作りに注力できた • 16
17. まとめ • フロントエンドとバックエンドの分離は結構 大掛かりな作業だけど、物事を分解して段階 的に無理なくやっていくことができた • Web/アプリ両方で GraphQL を使うことがで きた、実装が共通化されたことで開発コスト が下がり、より高速に開発が進むはず 17