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.1k
Railsで作ったサービスを段階的にNext.js+GraphQLに移行してみる
Tomohiro Ikeda
March 23, 2021
Tweet
Share
Other Decks in Programming
See All in Programming
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
580
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
130
React + TextAliveでカッコいいLyric Applicatioinを作ろう!!
tosuri13
0
400
Increased Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
200
仮想ファイルシステムを導入して開発環境のストレージ課題を解消する
segadevtech
2
500
Jakarta EE meets AI
ivargrimstad
0
360
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
600
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
260
デザインシステムとコンポーネント指向によるフロントエンド開発プロセスの革新 / Innovation in Frontend Development Processes through Design Systems and Component-Oriented Architecture
nrslib
8
5.3k
Ruby Parser progress report 2024
yui_knk
2
220
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
200
Featured
See All Featured
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Practical Orchestrator
shlominoach
185
10k
Become a Pro
speakerdeck
PRO
22
4.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Clear Off the Table
cherdarchuk
91
320k
Navigating Team Friction
lara
183
13k
The Mythical Team-Month
searls
218
43k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Infographics Made Easy
chrislema
239
18k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
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とか気にしなくてよければ多少楽できる
終わり • 質問以外でも • 「うちではこんな感じでやってるよ!」 • 「⾃分はこんな感じで移⾏したよ!」 • みたいな話あればぜひ聞きたいです!