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
560
RailsからReactを剥がした話
Riya Amemiya
December 03, 2023
Tweet
Share
More Decks by Riya Amemiya
See All by Riya Amemiya
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
730
TypeScriptの型で2進数計算
riyaamemiya
0
96
AIの力でテストのガバレッジ100%にした話
riyaamemiya
0
420
Other Decks in Technology
See All in Technology
Goでテストをしやすくするためにやったこと
kazukihayase
1
510
MySQL 8.4 LTS が あらわれた
yoku0825
PRO
1
220
IoTサービスにおけるSLI設計とLUUPでの実践
grimoh
2
210
いまからでも遅くない!仮想化基盤運用者に向けたコンテナ基盤移行で気にすべきポイント
moribito
0
170
Developing image pull secrets provisioner / Kubernetes Meetup Tokyo #65
pfn
PRO
2
200
いまからでも遅くない!ROKS (RedHat OpenShift on IBM Cloud) の運用
helenxiao
0
210
自動テストは何の役に立つのか そして役に立たないのか
undefined_name
2
920
Safie Viewer for iOS の 技術的負債との付き合い方
safie
0
120
スマートロック開発におけるSLI/SLOを用いた解錠体験の改善 / Improving the unlocking experience using SLI/SLO in smart lock development
bitkey
PRO
2
130
VS CodeとVimが好きなエンジニアが考えた最強のエディタ
miura55
0
120
自動生成されたhttpエンドポイントごとにカスタムミドルウェアを挿入したい話
uhzz
1
1.7k
Waroomの開発モチベーションと今後のロードマップ / Waroom development motivation and roadmap
nari_ex
1
270
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
Clear Off the Table
cherdarchuk
87
310k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
9k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
Into the Great Unknown - MozCon
thekraken
16
1.2k
KATA
mclloyd
18
12k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.2k
Code Review Best Practice
trishagee
57
16k
The Art of Programming - Codeland 2020
erikaheidi
45
12k
GraphQLとの向き合い方2022年版
quramy
34
13k
Ruby is Unlike a Banana
tanoku
96
10k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
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