minneはなぜGraphQLを推進しているか

Slide 1

Slide 1 text

1 minneはなぜGraphQLを推進しているか kazu / GMO PEPABO inc. 2024.11.07 Omotesando.rb #103

Slide 2

Slide 2 text

2 自己紹介 GMOペパボ　minne事業部　プロダクト開発チームリーダー 2023年中途入社 21卒中山一仁 Kazuhito Nakayama バックエンドが多い。けど、まあ全部やらせてくださいの気持ち。 ● あだ名： kazu ● 好きな漫画 : 王様達のヴァイキング ● X : @kazuhitonakayam ● Github: kazuhitonakayama ● Cosense(旧Scrapbox): kazuhitonakayama

Slide 3

Slide 3 text

もっとおもしろくできる企業理念ミッション人類のアウトプットを増やす

Slide 4

Slide 4 text

Slide 5

Slide 5 text

5 1. minne 紹介 minne（ミンネ）は、ハンドメイド作品を「買いたい人」と「売りたい人」をつなぐ国内最大のハンドメイドマーケットです。パソコンやスマートフォンを使って、簡単にハンドメイド作品を販売・購入できます。

Slide 6

Slide 6 text

Slide 7

Slide 7 text

7 本題

Slide 8

Slide 8 text

8 この中でKaigi on Rails 2024 行かれた方いますか

Slide 9

Slide 9 text

9 えらいGraphQLやな、と思われた方もいらっしゃるだろう @yana_gis 『カスタムしながら理解する GraphQL Connection』 @pyama86 『Tuning GraphQL on Rails』

Slide 10

Slide 10 text

10 そうなんです

Slide 11

Slide 11 text

11 なぜGraphQL推進が行われているかについて話します

Slide 12

Slide 12 text

12 アジェンダ 1. 問題意識 2. BFF(Backend for Frontend)としてのRails 3. こんな感じに進めてます ~具体的な施策を紹介しつつ~ 4. 終わりに

Slide 13

Slide 13 text

13 アジェンダ 1. 問題意識 2. BFF(Backend For Frontend)としてのRails 3. こんな感じに進めてます ~具体的な施策を紹介しつつ~ 4. 終わりに

Slide 14

Slide 14 text

14 - プロダクト開発の使命はより早く価値を提供していくこと - また、我々のプロダクトは競合に勝る機能を提供する必要があるプロダクト開発の前提として問題意識

Slide 15

Slide 15 text

15 - 今後もやはりweb、iOS、Android各プラットフォームのソフトウェアのメンテナンスが必要であることに変わりはない - アプリだけあれば良いかと言えば、購入者が検索流入するときに不便 - webだけあれば良いかといえば、モバイル端末のすべての機能を使える訳ではない。また、体験としてもアプリに優位がある - そこで、モバイルファースト・体験向上にあたり、 webについてどこまで Rails でやるかモバイルファースト、あるいはユーザー体験の向上が必要問題意識

Slide 16

Slide 16 text

16 - webにおいて、体験価値を向上させていくにあたって、JSによってインタラクティブなUIを提供していく必要がある - もちろんRailsの上でJSをガシガシ書いたり - HotwireとかStimulus使ったり - react-railsやreact_on_railsなどのライブラリによって、Railsの上でReactを書くなども選択肢としてある RailsとJSの程よい共存をいかに問題意識

Slide 17

Slide 17 text

17 - Railsの上のJSでリッチな表現を実現し続けていくことのいくつかの難しさ - デザイナーがUI実装をする際、幾らかのRailsの知識の必要性 - フロントのテストを記述していくにあたって、コンポーネント単位でのテストをすることの難しさ - もしJSのコンパイルなどにおいて、リリースフローに問題が生じた時、ピュアな Rubyコードの差分のリリースに影響を及ぼし、ブロッキングになる可能性 RailsとJSの程よい共存をいかに問題意識

Slide 18

Slide 18 text

18 アジェンダ 1. 問題意識 2. BFF(Backend for Frontend)としてのRails 3. こんな感じに進めてます ~具体的な施策を紹介しつつ~ 4. 終わりに

Slide 19

Slide 19 text

19 アジェンダ 1. 問題意識 2. BFF(Backend for Frontend)としてのRails 3. こんな感じに進めてます ~具体的な施策を紹介しつつ~ 4. 終わりに

Slide 20

Slide 20 text

20 - そこで、RailsをBackend for Frontendとして、Next.jsでフロントエンドを提供することで、ユーザー体験の向上の出発点とした - Next.js/iOS/Android ←→ Rails (BFF/GraphQL) ←→ Backend Services BFF(Backend For Frontend)としてのRails

Slide 21

Slide 21 text

21 - 実はNext.jsをフロントエンドとして採用する少し以前より、GraphQLが導入されていたので、これを機にNext.jsからAPIリクエストする際は原則GraphQL にてやろうという流れに - なぜGraphQLか → 体験価値の向上 + より速い価値提供 - クライアントのリクエスト回数が減る + 無駄なデータの取得が減るという点でアプリの高速化になる - クライアントが要求するリソースが変わっても、スキーマに定義されている範疇においては、クライアントの変更だけで済む BFF(Backend For Frontend)としてのRails

Slide 22

Slide 22 text

22 - Next.jsでのviewの提供によって、これまでよりリッチな体験を提供しつつ、 GraphQLを使った、より効率的なデータの取得によって、ユーザー体験を向上させる - また、開発者体験としても、フロントエンドとバックエンドが疎結合になったことで開発の複雑性を下げ、より速く価値のデリバリーができるように - viewだけの変更でビジネスロジックのCIを回さなくて良くなる - 型という基本要素を再利用することで開発の速度が上がる - フロントエンドのエンジニアにとってもRailsの知識が不要になって主戦場で開発できるなどなど BFF(Backend For Frontend)としてのRails

Slide 23

Slide 23 text

23 アジェンダ 1. 問題意識 2. BFF(Backend For Frontend)としてのRails 3. こんな感じに進めてます ~具体的な施策を紹介しつつ~ 4. 終わりに

Slide 24

Slide 24 text

24 アジェンダ 1. 問題意識 2. BFF(Backend For Frontend)としてのRails 3. こんな感じに進めてます ~具体的な施策を紹介しつつ~ 4. 終わりに

Slide 25

Slide 25 text

25 とはいえ、もう2012年から始まったサービス。 10年以上の時を経ているのでRails viewの画面数が数百pある。そのため、段階的にRailsのviewで作っている画面をNext.jsで作る画面に移行していく。こんな感じに進めてます ~具体的な施策を紹介しつつ~

Slide 26

Slide 26 text

26 購入者と販売者がやり取りをするメッセージ画面にてテンプレートを使えるようにしよう！→画面に手を加えるなら、Next.jsでview書き換えようこんな感じに進めてます ~具体的な施策を紹介しつつ~ Before After

Slide 27

Slide 27 text

27 よって以下のようなステップでNext.jsによる画面へ移行 1. Railsのviewでの機能群の洗い出し→GraphQLの a. ピン留め、ピン外し機能 b. 画像アップロード機能 c. メッセージの取得 d. メッセージの送信 e. メッセージの既読化 2. Next.jsでの画面実装こんな感じに進めてます ~具体的な施策を紹介しつつ~ およそ1ヶ月かかった、、、🔥

Slide 28

Slide 28 text

28 GraphQLを推進して何が嬉しいか - 先述の通り、リクエスト回数および無駄なデータ取得がない分、負荷が減る - 型という基本要素を再利用できる - →推進していけば行くほど開発速度が基本的に上がるだろう - 実装してコマンド叩けばGraphQLスキーマが出来上がる - API仕様書の手動の更新が不要！！嬉しい using graphql-ruby - APIのスキーマについて、モバイルとのコミュニケーションが増えた - スキーマに変更があったらPRの段階でモバイルチームにもメンションされてPR 上で議論するこんな感じに進めてます ~具体的な施策を紹介しつつ~

Slide 29

Slide 29 text

29 minneはなぜGraphQLを推進しているか kazu / GMO PEPABO inc. 2024.11.07 Omotesando.rb #103

Slide 30

Slide 30 text

30 “ 全てはより早く、高い価値提供をして事業を成長させるために ”

Slide 31

Slide 31 text

Thank You!! 31 みなさん、待ってます