Tweet
Tweet

Slide 1

Slide 1 text

Railsで作った個⼈サービスを 段階的にNext.js+GraphQLに移⾏してみる 株式会社リスタ @mikeda

Slide 2

Slide 2 text

今⽇の話 • Railsで作った既存サービスをNext.js+GraphQL化したい • 出来れば開発を⽌めずに少しづつ段階的に移⾏したい • 個⼈検証⽤サービスで試してみた という話をします。

Slide 3

Slide 3 text

⾃⼰紹介 • @mikeda • 株式会社リスタ CTO

Slide 4

Slide 4 text

Next.js化したいモチベーション • エンジニアにWEBもアプリも両⽅みてもらいたい • UX改善に興味があるエンジニアを採⽤したい

Slide 5

Slide 5 text

エンジニアにWEBもアプリも両⽅みてもらいたい

Slide 6

Slide 6 text

リスタのサービスと使⽤技術 • WEB • JOBLIST / JOBLIST派遣 : Rails • JOBLISTマガジン : Rails • アプリ • JOBLIST Collect : iOS/Swift, Android/Kotlin • 新規サービス : React Native(未リリース)

Slide 7

Slide 7 text

WEBとアプリ両⽅やるのがキツイ • WEB・API : Rails • iOS : Swift • Android : Kotlin • 全部やれるエンジニアはかなりレア

Slide 8

Slide 8 text

でも担当を分けたくない • 社員のエンジニアが1〜3⼈ • 開発リソースを柔軟に振り分けたい • ベンチャーだから⽅向性はどんどん変わる • 今⽉までは全⼒WEB、来⽉から全⼒でアプリやりたい！ • 例えばどちらかしか出来ないエンジニアが1⼈ずつだと、常に 50%/50%でしか開発リソースの配分が出来ない

Slide 9

Slide 9 text

新規アプリをReact Nativeで作った • React Native + expo + TypeScript • APIはRailsでREST API ※ コロナ影響でリリース延期中😭 • WEBのエンジニアでもかなりやりやすい • JSでコーディング • スタイルはCSSで書く

Slide 10

Slide 10 text

全体的にReactによせたい • WEBフロントエンド : React • アプリフロントエンド : React Native • バックエンド(共通API) : GraphQL? • エンジニアみんなが全てのサービスをみれるようにしたい！

Slide 11

Slide 11 text

UX改善に興味があるエンジニアを採⽤したい

Slide 12

Slide 12 text

Railsエンジニアで募集をかけると • サーバーサイドのロジック実装が好き！(できればCSSとか書き たくない)という⼈がいっぱいくる • でもベンチャーではサービスのUX(ユーザー体験)を改善した い！という⼈がほしい

Slide 13

Slide 13 text

フロントエンドを厚くすると募集傾向変わる？ • Railsのフロントエンドは薄い • ビジネスロジック・データ処理は基本サーバーサイド • サーバーサイドに興味のある⼈が来る • React化してフロントエンドを厚くする • ビジネスロジック・データ処理がフロントエンドに寄る • フロントエンドに興味のある⼈がくる？ • UX改善が進みやすくなる？(仮説)

Slide 14

Slide 14 text

既存のRailsアプリを乗せ換えられるか？

Slide 15

Slide 15 text

既存Railsアプリを乗せ換えたい • サービスの開発を⽌めずに少しづつ乗せ換えたい • 開発⽌めるとビジネス影響が⼤きいし、プレッシャーにもなる • 開発期間の⾒積もりも難しい • RailsとReactで同じビューが併存しない形で移⾏したい • ページ単位で移⾏していく、だとそうなってしまう • 両運⽤にするとたいへんだから • サーバー増やしたくない(費⽤をかけたくない)

Slide 16

Slide 16 text

検証⽤の個⼈サービスを作って試してみる

Slide 17

Slide 17 text

ざっくり⼿順 • Railsでざっくりサービス作成 • react-railsでビューを徐々にReactコンポーネント化 • RailsをGraphQLサーバー化 & データ取得をGraphQL化 • Next.js + Vercelに切り替える • RailsはAPI(GraphQL)サーバーになる

Slide 18

Slide 18 text

関連技術を簡単に説明

Slide 19

Slide 19 text

React / TypeScript • 省略！

Slide 20

Slide 20 text

Next.js • Reactベースのフロントエンドフレームワーク • SSR/SSGでSEO・OGP対策出来る • ファイルベースのルーティング

Slide 21

Slide 21 text

SSR/SSG • SSR : サーバーサイドで動的レンダリング • SSG : サーバーサイドで静的HTML⽣成 • SEO対策・OGP対応に

Slide 22

Slide 22 text

Vercel • Next.jsを簡単にデプロイ出来るホスティングサービス • GithubにPR作ったらプレビュー環境を⾃動⽣成 • masterマージしたら本番デプロイ • SSG、画像最適化などいい感じに対応してくれる • 無料でけっこう使える

Slide 23

Slide 23 text

GraphQL • 専⽤クエリで柔軟にデータの取り出しが出来るAPIサーバー

Slide 24

Slide 24 text

実際の移⾏作業

Slide 25

Slide 25 text

Railsでざっくりサービス作成

Slide 26

Slide 26 text

Railsで作った個⼈サービス • 鉄拳やろうよ.com • (最近「鉄拳7」という格ゲーにハマってます) • まだぜんぜんまともに動いてません • ちゃんとリリース&運⽤したい！ • 業務(ゲーム)知識のあるエンジニア募集中！ • 初期実装 • Rails / webpacker / typescript / stimulus / HAML / scss

Slide 27

Slide 27 text

react-railsでビューを徐々にReactコンポーネント化

Slide 28

Slide 28 text

こういうビューがあったとする パーシャル ビュー

Slide 29

Slide 29 text

react-railsでReactコンポーネント化 ビュー Reactコンポーネント データの受け渡し(jbuilder)

Slide 30

Slide 30 text

Reactコンポーネント化を進める

Slide 31

Slide 31 text

最終的にページ全体をコンポーネント化 ビュー Reactコンポーネント 省略！

Slide 32

Slide 32 text

react-rails補⾜ • SSRできる(今回は試してない) • プロパティはdata属性で渡される • 安易にto_jsonとかして事故らないように注意

Slide 33

Slide 33 text

graphql-rubyでRailsをGraphQLサーバー化

Slide 34

Slide 34 text

graphql-ruby • Railsでいい感じにGraphQLサーバーを実装できるgem

Slide 35

Slide 35 text

graphql-ruby : 型定義

Slide 36

Slide 36 text

graphql-ruby : クエリを定義

Slide 37

Slide 37 text

graphql-ruby : graphiqlで動作確認

Slide 38

Slide 38 text

graphql-codegenでTypeScript⽤のコード⽣成

Slide 39

Slide 39 text

graphql-codegen • GraphQLのSchemaからTypeScriptの型定義、クエリ実⾏⽤の React Hookを⾃動⽣成できる。

Slide 40

Slide 40 text

graphql-codegen : 設定ファイルを作る

Slide 41

Slide 41 text

graphql-codegen : GraphQLのクエリを書く

Slide 42

Slide 42 text

graphql-codegen : 実⾏する

Slide 43

Slide 43 text

graphql-codegen : TypeScriptの型が⽣成される

Slide 44

Slide 44 text

graphql-codegen : クエリからReact Hookも⽣成される

Slide 45

Slide 45 text

graphql-codegen : 補⾜ • 更新系クエリ(mutation)、Enum、Unionなどの型も作られる • GraphQLのFragmentを定義しておくとさらに便利 • SSGでapollo-client使えないのがちょっとつらい

Slide 46

Slide 46 text

APIアクセスをGraphQL化

Slide 47

Slide 47 text

APIアクセスをGraphQL化 ビューから渡すのやめて Reactコンポーネント側でデータ取得

Slide 48

Slide 48 text

APIアクセスをGraphQL化 : 補⾜ • この時点では全体共通のApp.tsxがないため、各ページごとに Apollo(GraphQLクライアント)を初期化する必要がある。 • SEO対策が必要なページはSSRする必要がある • 今回は検証サービスのため全てCSRで対応

Slide 49

Slide 49 text

Next.js + Vercelに切り替え

Slide 50

Slide 50 text

ページ遷移をNext.js仕様に • aタグをnext/linkのLinkタグでかこむ • jsでのページ遷移はnext/routerに

Slide 51

Slide 51 text

データ取得・更新を全てGraphQL化 • 残っていた箇所を切り替え

Slide 52

Slide 52 text

cssの移⾏ 既存のscssをApp.tsxでimportすればだいたいそのまま動く

Slide 53

Slide 53 text

メタタグの切り替え • next/headを使ってNext.js側で レンダリングするように変更

Slide 54

Slide 54 text

Vercel連携 • PRを作るとプレビュー環境が⾃動 で作成される • ⼀通り動作確認して問題なければ ドメイン切り替えで移⾏完了！

Slide 55

Slide 55 text

移⾏後の作業

Slide 56

Slide 56 text

CSS Modules化 • CSSをコンポーネントごとに分割してメンテナンス性・パフォーマンス向上 • コンポーネントごとに黙々と対応する

Slide 57

Slide 57 text

その他作業 • SSR / SSG / CSRの調整 • imgタグをnext/imageに変更 • …

Slide 58

Slide 58 text

だいたい完了！ • すごく⼤変でした

Slide 59

Slide 59 text

まとめと感想

Slide 60

Slide 60 text

まとめと感想 • React/TypeScript/GraphQLの開発体験はすごくよい • コード⾃動⽣成でサーバーサイドとフロントエンドの連携が楽 • 型チェックの安⼼感 • IDEでの補完・リファクタリングがかなりやりやすくなる • 移⾏はかなりたいへん • 挙動・パフォーマンスの考え⽅が⼤きく変わり覚えることが多い • ノウハウ無い状態で既存サービス載せ替えるのはかなりの覚悟が必要 • SEOとかOGPとか気にしなくてよければ多少楽できる

Slide 61

Slide 61 text

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