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
690
RailsからReactを剥がした話
Riya Amemiya
December 03, 2023
Tweet
Share
More Decks by Riya Amemiya
See All by Riya Amemiya
不健康エンジニア「健康」を知る
riyaamemiya
1
1.2k
AIと共同執筆してより質の高い記事を書こう
riyaamemiya
1
570
社内で発信し続けてたら19歳なのに技術リード的なポジションになっちゃった話
riyaamemiya
0
80
いつか使うかも貯金してたらめちゃめちゃ機能が増えてた話
riyaamemiya
0
900
TypeScriptの型で2進数計算
riyaamemiya
0
210
AIの力でテストのガバレッジ100%にした話
riyaamemiya
0
870
Other Decks in Technology
See All in Technology
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
1
210
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
540
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
350
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
420
Snowflake Intelligenceにはこうやって立ち向かう!クラシルが考えるAI Readyなデータ基盤と活用のためのDataOps
gappy50
0
110
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
380
大「個人開発サービス」時代に僕たちはどう生きるか
sotarok
20
9.8k
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
440
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
800
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
760
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Making Projects Easy
brettharned
117
6.4k
Docker and Python
trallard
45
3.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Side Projects
sachag
455
43k
Rails Girls Zürich Keynote
gr2m
95
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