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からReactを剥がした話
Search
Riya Amemiya
December 03, 2023
Technology
0
700
RailsからReactを剥がした話
Riya Amemiya
December 03, 2023
Tweet
Share
More Decks by Riya Amemiya
See All by Riya Amemiya
そのJavaScript、V8が泣いてます。V8の気持ちを理解して書くパフォーマンス最適化
riyaamemiya
19
6.5k
「え?!それ今ではCSSだけでできるの!?」驚きの進化を遂げたモダンCSS
riyaamemiya
0
40
不健康エンジニア「健康」を知る
riyaamemiya
1
1.2k
AIと共同執筆してより質の高い記事を書こう
riyaamemiya
1
580
社内で発信し続けてたら19歳なのに技術リード的なポジションになっちゃった話
riyaamemiya
0
110
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
910
TypeScriptの型で2進数計算
riyaamemiya
0
220
AIの力でテストのガバレッジ100%にした話
riyaamemiya
0
870
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
310
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
0
460
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
7
2.5k
PythonとLLMで挑む、 4コマ漫画の構造化データ化
esuji5
0
120
インサイト情報からどこまで自動化できるか試してみた
takas0522
0
120
いまさら聞けない ABテスト入門
skmr2348
0
170
20250929_QaaS_vol20
mura_shin
0
110
about #74462 go/token#FileSet
tomtwinkle
1
260
PLaMo2シリーズのvLLM実装 / PFN LLM セミナー
pfn
PRO
2
630
Flaky Testへの現実解をGoのプロポーザルから考える | Go Conference 2025
upamune
1
250
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
100
業務でAIの力を最大限に発揮するために #弁護士ドットコム
bengo4com
0
290
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Agile that works and the tools we love
rasmusluckow
330
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Building an army of robots
kneath
306
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The World Runs on Bad Software
bkeepers
PRO
71
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Transcript
RailsからReactを剥がした話 1
2
自己紹介 GMOメディア所属 西悠太 フロントエンドエンジニア X: Riya31377928 3
なぜ移行したのか ReactからRailsのERBに移行しました。 多くの方が「なぜ?」と思うかもしれません。 RailsからReactに移行するのはよくある話ですが、逆はあまり聞きません。 4
移行した理由は以下の通りです 移行したページはlpなのでReactのメリットがあまりない Reactのコードが負債になっている 自分以外にReactを書ける人がいない 5
移行したページはlpなのでReactのメリットがあまりない 移行したページはlpで、インタラクティブな要素はほとんどありません。 また、CSRを利用しているのでSEOにもあまりメリットがありません。 そのため、Reactを使うメリットがあまりないと考えました。 6
Reactのコードが負債になっている 外部の会社に委託して作成したため、Reactのコードが負債になっていました。 TypeScriptだけど型がない、コンポーネントが分割されていない、コードが複雑、などな ど。 7
自分以外にReactを書ける人がいない 私以外のチームメンバーはRailsをメインで書いているため、Reactを書ける人がいません。 たった数ページのためにReactを書ける人を育成するのは難しいと考えました。 以上の理由から、ReactからRailsのERB移行を決めました。 8
移行した手順 9
1. ロジックを整理する まず始めに、どんな工程を踏んで画面が表示されているのかを整理しました。 10
画面が表示されるまでの工程は以下の通りです 1. Railsのコントローラーでデータを取得する 2. RailsのコントローラーでReactのコンポーネントにデータを渡す 3. Reactのコンポーネントでデータを加工する 4. 必要に応じてReactからAPIを叩く 5.
Reactのコンポーネントでデータを表示する 11
特にネックになっていたのが、4の「必要に応じてReactからAPIを叩く」でした。 Railsのコントローラーでデータを取得しているのに、Reactから不足分のデータを取得してい ました。 そのため、何度も再レンダリングが発生していました。 12
2. コンポーネントを整理する 次に、移行対象のコンポーネントを整理しました。 コンポーネントAはBに依存していて、BはCに依存しているというような複雑な依存関係があ りました。 それらを整理し、移行対象のコンポーネントを特定しました。 13
3. コンポーネントを一個ずつ移行する コンポーネントを一個ずつ移行していきました 1. if文をRubyのコードに変換 2. 共通関数をヘルパーに移植 3. propsをlocal_assignsに変換 4.
コードを整理して可読性を上げる 5. JSを可能な限り削除する 14
苦労した点 15
見た目の互換性を完璧にReactと合わせないといけない lp作成部分がReactで作成されていたため、見た目の互換性を完璧に合わせるのは大変でし た。 React独自の機能をバニラJSで実装し直したり、CSSを修正したりしました。 ピクセル単位で見ると誤差はありますが、人間の目では全く分からないレベルになりまし た。 16
流れてくるデータが多次元配列 DBから取得したデータが多次元配列で流れていました。 [ ["id", 1], ["title", "Title"], ["description", "Description"], ["is_public",
true], ["page_url", "hoge"], ["name_param", "hoge"], ["school_id", 1], ["tpl_image", {"id"=>1, "image_url"=>"http://res.cloudinary.com/hoge, "image_smart_url"=>nil}], ... ] 17
本当はちゃんとしたデータ構造に直したかったのですが、他のページでも参照しているた め、今回は直さずに移行しました。 必要なデータには position というキーがあるので、それを使ってソートしました。 items.map { |item| item.deep_transform_keys(&:to_sym) }.each_with_index.sort_by
{ |item, index| [item[:position], index] }.map(&:first) # map で配列の中身をシンボルに変換 # each_with_index で配列の中身とインデックスを取得 # sort_by でposition でソートし、position が同じ場合はインデックスでソート # map でインデックスを削除 18
if文をRubyのコードに変換 私は普段からReactを書いているので、Rubyの真偽値の扱いに手間取りました。 JSでは、 '' や 0 などの値が false として扱われますが、Rubyでは ''
や 0 は true として扱われます。 19
ERBとReactの改行、空白の違い ERBでは改行や空白がそのまま出力されますが、Reactでは改行や空白が無視されます。 これになかなか気づけず、苦労しました。 20
ERB <p> <%= text %> </p> <p> こんにちは </p> 21
React const Hoge = () => { const text =
" こんにちは" return ( <p> {text} </p> ) } <p> こんにちは</p> 22
コードを整理して可読性を上げる React側でデータを加工していたため、コードが複雑になっていました。 そのため、コードを整理して可読性を上げるのに苦労しました。 Railsのコントローラーで整形してからデータを渡すように変更したり、必要なデータを一括 で取得するように変更したりしました。 バグ検証に時間がかかりましたが、コードが整理されていくのは楽しかったです。 23
JSを可能な限り削除する Reactで無駄にJSを書いていた部分があったので、可能な限り削除しました。 例えば、ホバー時にスタイルを変更するという処理は、 onmouseover と onmouseout を使 って実装しました。 24
まとめ そんなこんなで、ReactからRailsのERBに移行しました。 移行には苦労しましたが、コードが整理されていくのは楽しかったです。 React好きとしては、少し寂しい気持ちもありますが、移行してよかったと思っています。 適材適所で使うことが大切だと思います。 25
おまけ https://zenn.dev/gmomedia/articles/5a6819c5a9e9ad 26