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
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
970
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
210
rage against annotate_predecessor
junk0612
0
150
Trem on Rails - Prompt Engineering com Ruby
elainenaomi
1
100
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
290
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
130
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
230
OSS開発者という働き方
andpad
5
1.6k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.6k
AI時代のUIはどこへ行く?
yusukebe
4
940
時間軸から考えるTerraformを使う理由と留意点
fufuhu
8
2.9k
Improving my own Ruby thereafter
sisshiki1969
1
140
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Building Applications with DynamoDB
mza
96
6.6k
Rails Girls Zürich Keynote
gr2m
95
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Language of Interfaces
destraynor
160
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Fireside Chat
paigeccino
39
3.6k
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とか気にしなくてよければ多少楽できる
終わり • 質問以外でも • 「うちではこんな感じでやってるよ!」 • 「⾃分はこんな感じで移⾏したよ!」 • みたいな話あればぜひ聞きたいです!