Railsで作ったサービスを段階的にNext.js+GraphQLに移行してみる

Transcript

1. Railsで作った個⼈サービスを 段階的にNext.js+GraphQLに移⾏してみる 株式会社リスタ @mikeda

2. 今⽇の話 • Railsで作った既存サービスをNext.js+GraphQL化したい • 出来れば開発を⽌めずに少しづつ段階的に移⾏したい • 個⼈検証⽤サービスで試してみた という話をします。

3. ⾃⼰紹介 • @mikeda • 株式会社リスタ CTO

4. Next.js化したいモチベーション • エンジニアにWEBもアプリも両⽅みてもらいたい • UX改善に興味があるエンジニアを採⽤したい

5. エンジニアにWEBもアプリも両⽅みてもらいたい

6. リスタのサービスと使⽤技術 • WEB • JOBLIST / JOBLIST派遣 : Rails •

   JOBLISTマガジン : Rails • アプリ • JOBLIST Collect : iOS/Swift, Android/Kotlin • 新規サービス : React Native(未リリース)

7. WEBとアプリ両⽅やるのがキツイ • WEB・API : Rails • iOS : Swift •

   Android : Kotlin • 全部やれるエンジニアはかなりレア

8. でも担当を分けたくない • 社員のエンジニアが1〜3⼈ • 開発リソースを柔軟に振り分けたい • ベンチャーだから⽅向性はどんどん変わる • 今⽉までは全⼒WEB、来⽉から全⼒でアプリやりたい！ •

   例えばどちらかしか出来ないエンジニアが1⼈ずつだと、常に 50%/50%でしか開発リソースの配分が出来ない

9. 新規アプリをReact Nativeで作った • React Native + expo + TypeScript •

   APIはRailsでREST API ※ コロナ影響でリリース延期中😭 • WEBのエンジニアでもかなりやりやすい • JSでコーディング • スタイルはCSSで書く

10. 全体的にReactによせたい • WEBフロントエンド : React • アプリフロントエンド : React Native

    • バックエンド(共通API) : GraphQL? • エンジニアみんなが全てのサービスをみれるようにしたい！

11. UX改善に興味があるエンジニアを採⽤したい

12. Railsエンジニアで募集をかけると • サーバーサイドのロジック実装が好き！(できればCSSとか書き たくない)という⼈がいっぱいくる • でもベンチャーではサービスのUX(ユーザー体験)を改善した い！という⼈がほしい

13. フロントエンドを厚くすると募集傾向変わる？ • Railsのフロントエンドは薄い • ビジネスロジック・データ処理は基本サーバーサイド • サーバーサイドに興味のある⼈が来る • React化してフロントエンドを厚くする •

    ビジネスロジック・データ処理がフロントエンドに寄る • フロントエンドに興味のある⼈がくる？ • UX改善が進みやすくなる？(仮説)

14. 既存のRailsアプリを乗せ換えられるか？

15. 既存Railsアプリを乗せ換えたい • サービスの開発を⽌めずに少しづつ乗せ換えたい • 開発⽌めるとビジネス影響が⼤きいし、プレッシャーにもなる • 開発期間の⾒積もりも難しい • RailsとReactで同じビューが併存しない形で移⾏したい •

    ページ単位で移⾏していく、だとそうなってしまう • 両運⽤にするとたいへんだから • サーバー増やしたくない(費⽤をかけたくない)

16. 検証⽤の個⼈サービスを作って試してみる

17. ざっくり⼿順 • Railsでざっくりサービス作成 • react-railsでビューを徐々にReactコンポーネント化 • RailsをGraphQLサーバー化 & データ取得をGraphQL化 •

    Next.js + Vercelに切り替える • RailsはAPI(GraphQL)サーバーになる

18. 関連技術を簡単に説明

19. React / TypeScript • 省略！

20. Next.js • Reactベースのフロントエンドフレームワーク • SSR/SSGでSEO・OGP対策出来る • ファイルベースのルーティング

21. SSR/SSG • SSR : サーバーサイドで動的レンダリング • SSG : サーバーサイドで静的HTML⽣成 •

    SEO対策・OGP対応に

22. Vercel • Next.jsを簡単にデプロイ出来るホスティングサービス • GithubにPR作ったらプレビュー環境を⾃動⽣成 • masterマージしたら本番デプロイ • SSG、画像最適化などいい感じに対応してくれる •

    無料でけっこう使える

23. GraphQL • 専⽤クエリで柔軟にデータの取り出しが出来るAPIサーバー

24. 実際の移⾏作業

25. Railsでざっくりサービス作成

26. Railsで作った個⼈サービス • 鉄拳やろうよ.com • (最近「鉄拳7」という格ゲーにハマってます) • まだぜんぜんまともに動いてません • ちゃんとリリース&運⽤したい！ •

    業務(ゲーム)知識のあるエンジニア募集中！ • 初期実装 • Rails / webpacker / typescript / stimulus / HAML / scss

27. react-railsでビューを徐々にReactコンポーネント化

28. こういうビューがあったとする パーシャル ビュー

29. react-railsでReactコンポーネント化 ビュー Reactコンポーネント データの受け渡し(jbuilder)

30. Reactコンポーネント化を進める

31. 最終的にページ全体をコンポーネント化 ビュー Reactコンポーネント 省略！

32. react-rails補⾜ • SSRできる(今回は試してない) • プロパティはdata属性で渡される • 安易にto_jsonとかして事故らないように注意

33. graphql-rubyでRailsをGraphQLサーバー化

34. graphql-ruby • Railsでいい感じにGraphQLサーバーを実装できるgem

35. graphql-ruby : 型定義

36. graphql-ruby : クエリを定義

37. graphql-ruby : graphiqlで動作確認

38. graphql-codegenでTypeScript⽤のコード⽣成

39. graphql-codegen • GraphQLのSchemaからTypeScriptの型定義、クエリ実⾏⽤の React Hookを⾃動⽣成できる。

40. graphql-codegen : 設定ファイルを作る

41. graphql-codegen : GraphQLのクエリを書く

42. graphql-codegen : 実⾏する

43. graphql-codegen : TypeScriptの型が⽣成される

44. graphql-codegen : クエリからReact Hookも⽣成される

45. graphql-codegen : 補⾜ • 更新系クエリ(mutation)、Enum、Unionなどの型も作られる • GraphQLのFragmentを定義しておくとさらに便利 • SSGでapollo-client使えないのがちょっとつらい

46. APIアクセスをGraphQL化

47. APIアクセスをGraphQL化 ビューから渡すのやめて Reactコンポーネント側でデータ取得

48. APIアクセスをGraphQL化 : 補⾜ • この時点では全体共通のApp.tsxがないため、各ページごとに Apollo(GraphQLクライアント)を初期化する必要がある。 • SEO対策が必要なページはSSRする必要がある • 今回は検証サービスのため全てCSRで対応

49. Next.js + Vercelに切り替え

50. ページ遷移をNext.js仕様に • aタグをnext/linkのLinkタグでかこむ • jsでのページ遷移はnext/routerに

51. データ取得・更新を全てGraphQL化 • 残っていた箇所を切り替え

52. cssの移⾏ 既存のscssをApp.tsxでimportすればだいたいそのまま動く

53. メタタグの切り替え • next/headを使ってNext.js側で レンダリングするように変更

54. Vercel連携 • PRを作るとプレビュー環境が⾃動 で作成される • ⼀通り動作確認して問題なければ ドメイン切り替えで移⾏完了！

55. 移⾏後の作業

56. CSS Modules化 • CSSをコンポーネントごとに分割してメンテナンス性・パフォーマンス向上 • コンポーネントごとに黙々と対応する

57. その他作業 • SSR / SSG / CSRの調整 • imgタグをnext/imageに変更 •

    …

58. だいたい完了！ • すごく⼤変でした

59. まとめと感想

60. まとめと感想 • React/TypeScript/GraphQLの開発体験はすごくよい • コード⾃動⽣成でサーバーサイドとフロントエンドの連携が楽 • 型チェックの安⼼感 • IDEでの補完・リファクタリングがかなりやりやすくなる •

    移⾏はかなりたいへん • 挙動・パフォーマンスの考え⽅が⼤きく変わり覚えることが多い • ノウハウ無い状態で既存サービス載せ替えるのはかなりの覚悟が必要 • SEOとかOGPとか気にしなくてよければ多少楽できる

61. 終わり • 質問以外でも • 「うちではこんな感じでやってるよ！」 • 「⾃分はこんな感じで移⾏したよ！」 • みたいな話あればぜひ聞きたいです！