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