Rails 7でReactとHotwireを 同時に使って個人開発して得た知見 Reject on Rails 2023 LEF（@lef237） Gotanda.rb 2023-10-17

自己紹介 LEF（@lef237）って誰？ ・LEF ←「レフ」と読みます ・好きな食べ物は角煮まんじゅう ・好きなRubyのメソッドは、
 　 Array#transpose ・フィヨルドブートキャンプ卒 ・えにしテックで働いています

少し時間を遡って2023年4月――

自作サービスをリリースしました！

https://quotelist.fly.dev/

引用表示画面 引用された回数を元に「人気順」で並び替えられます

引用箱のフロントエンド ・Turboでの実装が難しいもの　 →　 Reactを使う ・Turboでの実装が簡単なもの　 →　 Turboを使う 同時に使って開発スピードを上げました！

この構成に落ち着くまでには長い道のりがありました…

「共同引用ボタン」を実装するためにどの技術を使う？

Reactの勉強をしたいし、まずはReactで書いてみよう

検討その１ フロントエンドを全部Reactで書く

『引用箱』でReactが必要な箇所は画面の一部 全面的にReactにしてしまうと、erbやslimでViewを書けない 別の道を模索 なるべくRails Wayに沿った書き方をしたい

検討その２ react-rails gemを使う

このような書き方で、簡単にRailsのView上にReactを表示できる View上でデータの受け渡しも可能

react-rails gemを使うにはWebpackerが必要 Webpackerとは？ → Rails 6では標準的に使われていたJavaScriptのためのパッケージ Rails 7以降、公式がWebpackerを非推奨にしている react-rails gemを使わない方法を模索 週刊Railsウォッチ: Webpackerが公式に引退宣言、『Everyday Rails』日本語版がRails 7に対応ほか（20220124前編）｜TechRacho by BPS株式会社 https://techracho.bpsinc.jp/hachi8833/2022_01_24/115099

検討その３ react-rails gemのような処理を自前で実装する

Rails 7でreact-rails gemの書き方をできる限り再現したい マウント処理に関するコードを工夫する必要がある ネットで色々調べた結果、頑張れば実装できそう 日本語、英語、中国語、スペイン語など、世界中の記事を読み漁りました

頑張ってマウント処理を書きました！ divUtil.ts MountComponents.tsx Mount.tsx ※application.jsにも手を加えています

react-rails gemに近い形で、Reactコンポーネントを表示できるようにしました View上でReactへとデータを受け渡せるように工夫しました ↑実際に、共同引用ボタンで使っているコードです content_tagを使いつつ、data:{ quoteId: quote.id, (略) }.to_jsonと書くことで、 JSON形式でReactへとデータを渡しています 先程のマウント処理によって、データの受け渡しを実現しました View側の書き方 詳しい使い方は、こちらのリンク先で解説しています。 https://lef237.hatenablog.com/entry/2023/03/08/112950

開発が進み、引用文の削除ボタンを作ることになりました

投稿削除時に確認ダイアログを表示したい！

削除ボタンの確認ダイアログをReactで実装する場合 実装手順 コード例 p… 削除ボタンを作Y e… クリック時にwindow.confirmを使ってダイアログを表‡ A… 「OK」をクリックしたときにAPI呼び出しを行ってデータを削除する こんな感じでちょっと複雑になっちゃいます…… CSRFトークンも考慮したり……

せっかくRails 7上で開発しているのだからHotwireでうまく解決できないか？

Hotwireとは？ この３つの技術をまとめた総称

簡単なブラウザの動作をJavaScriptなしで書ける HTMLさえあれば画面が動く Rails 7との親和性がとても高い！

たったこれだけのコードで実現できる！！ 『引用箱』で使っている実際のコードです 削除ボタンの確認ダイアログをTurboで実装する場合

開発を通じて得た知見 Rails 7ではTurboを使うと迅速に開発できる Turboで書けない処理はReactで補うとイイ感じ TurboをStimulusで補う方法だけでなく、Reactで補う方法もある

引用箱のソースコード リンク集 コードについて解説したブログ記事および該当のPull Request Rails 7 で React & TypeScript を導入する方法（tsx, esbuild, jsbundling-rails） Rails 7 の jsbundling-rails (esbuild) で、viewファイルからReactへとデータを渡す方法と、Mount処理を簡単にする方法 【TurboDrive】Rails 7 でReactとHotwire（Turbo & Stimulus）を同時に使いたいときには、Turbo Driveを無効化しよう！ 【Rails 7 + React (TypeScript)】読書好きの方向けの引用共有サービス「引用箱」をリリースしました Reactのエンドポイントの処理を書き換えて、連番でなくても重複が無ければ表示されるようにした by lef237 · Pull Request #70 · lef237/quotelist https://lef237.hatenablog.com/entry/2023/02/21/113432 https://lef237.hatenablog.com/entry/2023/03/08/112950 https://lef237.hatenablog.com/entry/2023/03/26/110425 https://lef237.hatenablog.com/entry/2023/04/16/112002 https://github.com/lef237/quotelist/pull/70 lef237/quotelist: 引用箱 クオートリスト QuoteList https://github.com/lef237/quotelist ご不明な点があれば までお知らせください！ LEF（@lef237）

謝辞 フィヨルドブートキャンプの皆様、そしてニート生活を許してくれた母に
 この場を借りてお礼を申し上げます たくさんの方に支えられて、開発を進められました