minneはなぜGraphQLを推進しているか
このブログの内容は🎄GMOペパボ エンジニア Advent Calendar 2024 の13日目の内容です。
今回GraphQLを題材にブログにしていますが、本ブログはGraphQLとは何か、については話さないんですよね。しかし、驚くことに🎄GMOペパボ エンジニア Advent Calendar 2024 の12日目のブログの内容が、arumaさんのGraphQLに入門したという記事なんですね。何も打ち合わせしてないんですよ。まさに奇跡🌲
そして、内容も素晴らしく、実際GraphQLを使うにあたって気をつけないといけない認可の話や、N+1の話などに言及されていました。ぜひ、arumaさんの記事もご覧下さい。
さて本題
今回のブログの内容は以下のSpeaker Deckで挙げているスライドの内容となりますので、シュシュっと読みたい方は以下のリンクから遷移ください👍
minneはなぜGraphQLを推進しているか Speaker Deck
minneとは
minneは、ハンドメイド作品を「売りたい人」と「買いたい人」をつなぐハンドメイドマーケットです。パソコンやスマートフォンを使って、作品の販売や購入が簡単に行えます。
https://gyazo.com/ab2ff354783bb50b9fb6f5d1f5f3fe01
(minneはなぜGraphQLを推進しているか スライド5枚目)
なぜGraphQLを推進しているのか
2024年度のkaigionrailsで、「カスタムしながら理解するGraphQL Connection」や「Tuning GraphQL on Rails Tuning GraphQL on Rails」など、GMOペパボのパートナーがGraphQLをテーマにした発表が注目を集めました。この中で、「minneはGraphQLを積極的に推進しているのか？」と思われた方もいるかもしれません。実際そうなのですが、その理由を深掘りしていきます。
https://gyazo.com/e9d5b5c0a28bbcbef01738ecca0816e0
(minneはなぜGraphQLを推進しているか スライド9枚目)
問題意識
まず、プロダクト開発の前提として、「より速く価値を提供する」ことが重要な目標となっています。我々は競合に勝るプロダクトを提供しなければならないのです。
そして、今後もやはりweb、iOS、Android各プラットフォームのソフトウェアのメンテナンスが必要であることに変わりはありません。アプリだけあれば良いかと言えば、購入者が検索流入するときに不便ですし、webだけあれば良いかといえば、モバイル端末のすべての機能を使える訳ではありません。
そこで、ことwebについて、モバイルファースト・ユーザーの体験価値の向上にあたって、どこまでRailsだけでやるか、というトピックがありました。（かつてminneは提供する画面にRailsのテンプレートviewを利用していました）
https://gyazo.com/67b15b6328ea3805223c43f45d297665
(minneはなぜGraphQLを推進しているか スライド15枚目)
ユーザーの体験価値向上にあたっては、JSによってインタラクティブなUIを提供していく必要があります。
もちろん、Railsの上でJSをガシガシ書いたり、HotwireやStimulusを使ったり、react-railsやreact_on_railsなどのライブラリによって、Railsの上でReactを書くなども選択肢としてはあります。
Railsの上のJSでリッチな表現を実現し続けていくことのいくつかの難しさ
例えば、minneのプロダクト開発においては、デザイナーがフロントエンドを開発する場面が数多くあります。
そこで、もしRailsの上でのフロントエンド開発となるならば、少なからず幾らかのRailsの知識が必要となってきます。
また、フロントエンドのテストを記述するにあたって、コンポーネント単位でのテストをすることが難しかったり、JSのコンパイルなどにおいて、リリースフローに問題が生じた時、ピュアなRubyコードの差分のリリースに影響を及ぼしブロッキングになる可能性がありました。
BFF(Backend For Frontend)としてのRails
そこで、RailsをBackend for Frontendとして、Next.jsでフロントエンドを提供することで、ユーザーの体験価値の向上の出発点としました。
https://gyazo.com/d08dc00fdf2dbab4e4b0700082b1ea0a
(minneはなぜGraphQLを推進しているか スライド20枚目)
そこに、GraphQLを用いることで、更なるユーザーの体験価値の向上および、より速い価値提供を目指しました。
カスタムしながら理解するGraphQL Connectionにて分かりやすく解説されているのですが、GraphQLでは1度のリクエストで必要なデータ（ノード）を指定して取得できるので通信効率が向上します。また、不要になったデータ（ノード）があれば、バックエンド、つまりAPIの修正の必要無しに、クライアント側の変更だけで対応が完了します。
https://gyazo.com/74188e5d94a0693fc6020b5468e39f9c
(minneはなぜGraphQLを推進しているか スライド21枚目)
https://gyazo.com/fa0401cca17a33a9ac9a9ab1c6b734c8
(カスタムしながら理解するGraphQL Connection スライド16枚目)
Next.jsでのviewの提供によってこれまでよりリッチな体験を提供しつつ、GraphQLを使ったより効率的なデータの取得によって、ユーザーの体験価値の向上を図りました。
また、開発者体験としても、フロントエンドとバックエンドが疎結合になったことで開発の複雑性が下がり、より速く価値のデリバリーができるようになりました。
https://gyazo.com/ca82c95441942302d9e8438340dbea78
(minneはなぜGraphQLを推進しているか スライド22枚目)
具体的な進め方を少し
とはいえ、もう2012年から始まったサービスであり、Rails viewの画面数が数百ページもあります。そのため、段階的にRailsのviewで作っている画面をNext.jsで作る画面に移行していっております。
https://gyazo.com/1b0b0751c84346364479c1194bc4d25a
(minneはなぜGraphQLを推進しているか スライド26枚目)
https://gyazo.com/ad21eba1d27333e855bda93ed1b597de
(minneはなぜGraphQLを推進しているか スライド27枚目)
https://gyazo.com/bbfb8af231717960f5b4d3f88ef75e9a
(minneはなぜGraphQLを推進しているか スライド28枚目)
終わりに
GraphQLの導入は、minneの開発効率を向上させるだけでなく、ユーザーに迅速で高品質な体験を提供する土台にもなっています。しかし、これが銀の弾丸とは考えておらず、状況に合わせて柔軟に技術を用いて、多様なプラットフォームで最高のユーザー体験を提供するために、チーム一丸で取り組んでまいります！
明日は、🎄GMOペパボ エンジニア Advent Calendar 2024 14日目は、k4tayaさんの記事です！！