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
530
RailsからReactを剥がした話
Riya Amemiya
December 03, 2023
Tweet
Share
More Decks by Riya Amemiya
See All by Riya Amemiya
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
690
TypeScriptの型で2進数計算
riyaamemiya
0
85
AIの力でテストのガバレッジ100%にした話
riyaamemiya
0
390
Other Decks in Technology
See All in Technology
技術力の伸ばし方を考える
khirata
0
150
Password cracking: past, present, future
openwall
0
300
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
790
iThome2024 Wailing Wall of Enterprise Security
notsurprised
0
300
データ基盤を支える技術
chanyou0311
5
3k
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
790
OpenID Foundation updates
fujie
0
240
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
12
3.3k
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
230
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
37k
QAエンジニアが伝えたい品質保証の羅針盤 / Compass for Quality Assurance
mii3king
2
350
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
84
45k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Web Components: a chance to create the future
zenorocha
306
41k
4 Signs Your Business is Dying
shpigford
176
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Building Applications with DynamoDB
mza
88
5.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
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