Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Railsで作ったサービスを段階的にNext.js+GraphQLに移行してみる
Search
Tomohiro Ikeda
March 23, 2021
Programming
1
1.2k
Railsで作ったサービスを段階的にNext.js+GraphQLに移行してみる
Tomohiro Ikeda
March 23, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
160
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
950
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
110
Benchmark
sysong
0
270
AIコーディング道場勉強会#2 君(エンジニア)たちはどう生きるか
misakiotb
1
250
iOSアプリ開発で 関数型プログラミングを実現する The Composable Architectureの紹介
yimajo
2
210
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
170
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
120
C++20 射影変換
faithandbrave
0
530
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
型付きアクターモデルがもたらす分散シミュレーションの未来
piyo7
0
810
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.4k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
The Language of Interfaces
destraynor
158
25k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Fireside Chat
paigeccino
37
3.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
It's Worth the Effort
3n
185
28k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
What's in a price? How to price your products and services
michaelherold
246
12k
Code Reviewing Like a Champion
maltzj
524
40k
Transcript
Railsで作った個⼈サービスを 段階的にNext.js+GraphQLに移⾏してみる 株式会社リスタ @mikeda
今⽇の話 • Railsで作った既存サービスをNext.js+GraphQL化したい • 出来れば開発を⽌めずに少しづつ段階的に移⾏したい • 個⼈検証⽤サービスで試してみた という話をします。
⾃⼰紹介 • @mikeda • 株式会社リスタ CTO
Next.js化したいモチベーション • エンジニアにWEBもアプリも両⽅みてもらいたい • UX改善に興味があるエンジニアを採⽤したい
エンジニアにWEBもアプリも両⽅みてもらいたい
リスタのサービスと使⽤技術 • WEB • JOBLIST / JOBLIST派遣 : Rails •
JOBLISTマガジン : Rails • アプリ • JOBLIST Collect : iOS/Swift, Android/Kotlin • 新規サービス : React Native(未リリース)
WEBとアプリ両⽅やるのがキツイ • WEB・API : Rails • iOS : Swift •
Android : Kotlin • 全部やれるエンジニアはかなりレア
でも担当を分けたくない • 社員のエンジニアが1〜3⼈ • 開発リソースを柔軟に振り分けたい • ベンチャーだから⽅向性はどんどん変わる • 今⽉までは全⼒WEB、来⽉から全⼒でアプリやりたい! •
例えばどちらかしか出来ないエンジニアが1⼈ずつだと、常に 50%/50%でしか開発リソースの配分が出来ない
新規アプリをReact Nativeで作った • React Native + expo + TypeScript •
APIはRailsでREST API ※ コロナ影響でリリース延期中😭 • WEBのエンジニアでもかなりやりやすい • JSでコーディング • スタイルはCSSで書く
全体的にReactによせたい • WEBフロントエンド : React • アプリフロントエンド : React Native
• バックエンド(共通API) : GraphQL? • エンジニアみんなが全てのサービスをみれるようにしたい!
UX改善に興味があるエンジニアを採⽤したい
Railsエンジニアで募集をかけると • サーバーサイドのロジック実装が好き!(できればCSSとか書き たくない)という⼈がいっぱいくる • でもベンチャーではサービスのUX(ユーザー体験)を改善した い!という⼈がほしい
フロントエンドを厚くすると募集傾向変わる? • Railsのフロントエンドは薄い • ビジネスロジック・データ処理は基本サーバーサイド • サーバーサイドに興味のある⼈が来る • React化してフロントエンドを厚くする •
ビジネスロジック・データ処理がフロントエンドに寄る • フロントエンドに興味のある⼈がくる? • UX改善が進みやすくなる?(仮説)
既存のRailsアプリを乗せ換えられるか?
既存Railsアプリを乗せ換えたい • サービスの開発を⽌めずに少しづつ乗せ換えたい • 開発⽌めるとビジネス影響が⼤きいし、プレッシャーにもなる • 開発期間の⾒積もりも難しい • RailsとReactで同じビューが併存しない形で移⾏したい •
ページ単位で移⾏していく、だとそうなってしまう • 両運⽤にするとたいへんだから • サーバー増やしたくない(費⽤をかけたくない)
検証⽤の個⼈サービスを作って試してみる
ざっくり⼿順 • Railsでざっくりサービス作成 • react-railsでビューを徐々にReactコンポーネント化 • RailsをGraphQLサーバー化 & データ取得をGraphQL化 •
Next.js + Vercelに切り替える • RailsはAPI(GraphQL)サーバーになる
関連技術を簡単に説明
React / TypeScript • 省略!
Next.js • Reactベースのフロントエンドフレームワーク • SSR/SSGでSEO・OGP対策出来る • ファイルベースのルーティング
SSR/SSG • SSR : サーバーサイドで動的レンダリング • SSG : サーバーサイドで静的HTML⽣成 •
SEO対策・OGP対応に
Vercel • Next.jsを簡単にデプロイ出来るホスティングサービス • GithubにPR作ったらプレビュー環境を⾃動⽣成 • masterマージしたら本番デプロイ • SSG、画像最適化などいい感じに対応してくれる •
無料でけっこう使える
GraphQL • 専⽤クエリで柔軟にデータの取り出しが出来るAPIサーバー
実際の移⾏作業
Railsでざっくりサービス作成
Railsで作った個⼈サービス • 鉄拳やろうよ.com • (最近「鉄拳7」という格ゲーにハマってます) • まだぜんぜんまともに動いてません • ちゃんとリリース&運⽤したい! •
業務(ゲーム)知識のあるエンジニア募集中! • 初期実装 • Rails / webpacker / typescript / stimulus / HAML / scss
react-railsでビューを徐々にReactコンポーネント化
こういうビューがあったとする パーシャル ビュー
react-railsでReactコンポーネント化 ビュー Reactコンポーネント データの受け渡し(jbuilder)
Reactコンポーネント化を進める
最終的にページ全体をコンポーネント化 ビュー Reactコンポーネント 省略!
react-rails補⾜ • SSRできる(今回は試してない) • プロパティはdata属性で渡される • 安易にto_jsonとかして事故らないように注意
graphql-rubyでRailsをGraphQLサーバー化
graphql-ruby • Railsでいい感じにGraphQLサーバーを実装できるgem
graphql-ruby : 型定義
graphql-ruby : クエリを定義
graphql-ruby : graphiqlで動作確認
graphql-codegenでTypeScript⽤のコード⽣成
graphql-codegen • GraphQLのSchemaからTypeScriptの型定義、クエリ実⾏⽤の React Hookを⾃動⽣成できる。
graphql-codegen : 設定ファイルを作る
graphql-codegen : GraphQLのクエリを書く
graphql-codegen : 実⾏する
graphql-codegen : TypeScriptの型が⽣成される
graphql-codegen : クエリからReact Hookも⽣成される
graphql-codegen : 補⾜ • 更新系クエリ(mutation)、Enum、Unionなどの型も作られる • GraphQLのFragmentを定義しておくとさらに便利 • SSGでapollo-client使えないのがちょっとつらい
APIアクセスをGraphQL化
APIアクセスをGraphQL化 ビューから渡すのやめて Reactコンポーネント側でデータ取得
APIアクセスをGraphQL化 : 補⾜ • この時点では全体共通のApp.tsxがないため、各ページごとに Apollo(GraphQLクライアント)を初期化する必要がある。 • SEO対策が必要なページはSSRする必要がある • 今回は検証サービスのため全てCSRで対応
Next.js + Vercelに切り替え
ページ遷移をNext.js仕様に • aタグをnext/linkのLinkタグでかこむ • jsでのページ遷移はnext/routerに
データ取得・更新を全てGraphQL化 • 残っていた箇所を切り替え
cssの移⾏ 既存のscssをApp.tsxでimportすればだいたいそのまま動く
メタタグの切り替え • next/headを使ってNext.js側で レンダリングするように変更
Vercel連携 • PRを作るとプレビュー環境が⾃動 で作成される • ⼀通り動作確認して問題なければ ドメイン切り替えで移⾏完了!
移⾏後の作業
CSS Modules化 • CSSをコンポーネントごとに分割してメンテナンス性・パフォーマンス向上 • コンポーネントごとに黙々と対応する
その他作業 • SSR / SSG / CSRの調整 • imgタグをnext/imageに変更 •
…
だいたい完了! • すごく⼤変でした
まとめと感想
まとめと感想 • React/TypeScript/GraphQLの開発体験はすごくよい • コード⾃動⽣成でサーバーサイドとフロントエンドの連携が楽 • 型チェックの安⼼感 • IDEでの補完・リファクタリングがかなりやりやすくなる •
移⾏はかなりたいへん • 挙動・パフォーマンスの考え⽅が⼤きく変わり覚えることが多い • ノウハウ無い状態で既存サービス載せ替えるのはかなりの覚悟が必要 • SEOとかOGPとか気にしなくてよければ多少楽できる
終わり • 質問以外でも • 「うちではこんな感じでやってるよ!」 • 「⾃分はこんな感じで移⾏したよ!」 • みたいな話あればぜひ聞きたいです!