Save 37% off PRO during our Black Friday Sale! »

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

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

A6f20d9767cbd108385cbe1e440c3729?s=128

Tomohiro Ikeda

March 23, 2021
Tweet

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