Rails7の罠
1.method DELETEが効かない
ログアウトできない、削除できない、別のレコードが削除される...
2.フラッシュメッセージ、ダイアログが表示されない
3.JSがリロードしないと発火しない
4.そもそもRails newの時どのJS使えばいいんだ...
5.JSやTailwind CSSが反映されない
6.Tailwind CSSが反映されていたのに反映されなくなった
他にもあったらコメント欄で教えてください。
1.method DELETEが効かない
ログアウトできない、削除できない、別のレコードが削除される
link_toのmethod:オプションの書き方が変わった
Turboを使っている場合、link_toメソッドのmethod:オプションの書き方が変わりました。
destroyのレスポンスに status: :see_other を付ける必要がある
上記に全てが記されています。いつも有難うございます。救われてます。
2.フラッシュメッセージ、ダイアログが表示されない
バリデーション失敗時に status: :unprocessable_entity を付ける必要がある
Turboを使っている場合、バリデーション失敗時のレスポンスに必ず status: :unprocessable_entity を付ける必要があります。これがないとバリデーション失敗時のエラーメッセージが表示されません。
確認ダイアログ（confirm:オプション）の出し方が変わった
上記に全てが記されています。いつも有難うございます。救われてます。
3.JSがリロードしないと発火しない
その他、JS関係がうまくいかない場合はコンパイルがうまくいっていないか、こちらが有力です
application.jsでTurbo Driveを無効化
Turbo Driveを無効化
🐱 アプリケーション全体でTurbo Driveを無効化するよ。
Turbo.session.drive = false
🐱 全体を無効にしておいて、リンク・フォームにdata-turbo="true"を設定することで個別に有効にすることもできるよ。
※Turbo DriveこそRails７の特徴なので、「はじめに」から読むことをお勧めします。
有料級の情報を有難うございます。いつも救われてます。
4.そもそもRails newの時どのJS使えばいいんだ...
コマンドオプションめっちゃある
-j, [--javascript=JAVASCRIPT]
#Choose JavaScript approach [options: importmap (default), webpack, esbuild, rollup]
#Default: importmap
「それってあなたの感想ですよね」 な私的使い分け
Hotwireを使いたい → import map
特にJavaScriptのニーズをHotwireスタックに依存しているアプリケーションにおいては、import mapが長期的に正しい選択肢となるでしょう。
Hotwireに向いてるアプリって？
・素朴なUI
CRUDをベースにした素朴なUIを作るのに向いています。
JSをがっつり使ったリッチなUIを作るのには向いていません。
Hey.com以上のものが必要かどうか？がひとつの目安になりそうです。
・サーバーサイドエンジニアだけの小規模なチーム
Hotwireを使うとサーバーサイドだけに集中できるようになります。サーバーサイドとフロントエンドの分業はなくなり、JSはサーバーサイドエンジニアが書くものになります。そのため、フロントエンドエンジニアがいないような、サーバーサイドエンジニアだけで構成される小規模なチームに向いています。
小規模なアプリケーションだと、一人の開発者がフロントエンドとバックエンドの両方を触れたほうが都合が良いです。逆に大規模な場合は分業したほうが都合が良いことも多く、Hotwireは向いていないのかなと思います（大規模なチームを経験したことがないので推測ですが）。
・Railsに慣れているチーム
Hotwireを使うとRailsの資産をフルに活かせます。Railsに慣れているチームがHotwireを使うと、素のRailsアプリを開発するのに比べても遜色ない速度でSPA風のアプリケーションを開発できます（実際は作り込み次第です。デモ程度のものであれば素のRailsで作るのとほとんど労力は変わりません）。
これも「猫でも分かる〜」の筆者の方のブログです。上記以外にもHotwireの特徴やHerokuを使ったときのレスポンス速度、実際のSPAと比べたユーザー体験の違いなども記載があります。
Hotwireはサクッとアプリを作れるのが特徴ですので、一度実際にRails newしてみるのをお勧めします。
あとは全部 → esbuild
・Rails6までの使用感のままコードを書きたい
・jQuery、React、NextなどJSライブラリ、フレームワークを使いたい
・Tailwind CSSやBootstrapを使いたい
・様々なGemを使用する
ちなみにimportmap,esbuild,以外にwebpack,rollupがありますが、esbuildはGo言語で書かれていてwebpack,rollupよりもずっと速いそうです。
なので、Hotwireを使いたいならimport map、それ以外ならesbuildで使い分けています。
初学者の個人的使い分けですので、ご意見等あればぜひコメントください。
5.レイアウトが崩れる、JSやTailwind CSS、画像が反映されない
原因①ビルドできていない
そもそもブラウザがどこを読み取っているか。
→ /public/assetsにプリコンパイルされたファイルを読み取っている。
例えば、app/javascript/top.jsにJSを書いたとき、そのままではブラウザが読み取れないので読み取れる形にプリコンパイルされる。それができていないと読み込めない。
プリコンパイルされているかどうかは以下で確認できる。
$ ls -la public/assets
drwx------ 2 u数字 dyno 12288 Aug 24 20:59 .
drwx------ 3 u数字 dyno 4096 Aug 24 20:59 ..
-rw------- 1 u数字 dyno 15699 May 27 00:52 actioncable-543なんか文字列いっぱいよ0107cbc9a1aa0c838d9a74e.js
-rw------- 1 u数字 dyno 3707 May 27 00:52 actioncable-54334なんか文字列いっぱいよ0107cbc9a1aa0c838d9a74e.js.gz
-rw------- 1 u数字 dyno 14080 May 27 00:52 actioncable.esm-e01089cなんか文字列いっぱいよba7537f70690.js
以下略
public/assets内に目当てのファイルがなければ、それは"プリコンパイル"がうまくいっていないということです。
プリコンパイルさせるには、という記事は以前に書いたので下記参照
原因②importがちゃんとできていない
cssファイル作ったり、yarnとかnpmとかで何かをimportしたときはapplication.tailwind.cssに追記が必要。ちなみに@tailwindより上に@importがないとだめ。
@import './top.css';
@import './bubble.scss';
@tailwind base;
@tailwind components;
@tailwind utilities;
特にyarnとかnpmとかで何かをimportしたとき、自動で@importが追記されるんだけど、下記のようになってて読み込めtてないことがある
@tailwind base;
@tailwind components;
@tailwind utilities;@import './bubble.scss';
JSも同じく、jsファイルを作ったらapplication.jsに追記の必要がある。
そのJSが必要なページだけにJSファイルを読み込ませたい場合は下記参照
6.Tailwind CSSが反映されていたのに反映されなくなった
ついにRails7関係なくなったけどよく困ってる人がいるので書いとく。
原因①他のクラスと競合して効かなくなる(めっちゃよくある)
CSSにはそもそも、優先度とかインライン要素かブロック要素かみたいなルールがある。それを分かってないと上手く直らないけどそんなもん覚えてないので、差分を見て効かなくなる前の状態まで一旦戻すか、GPTに聞くか、テンプレートサイトを見に行って真似する。
GPTはTailwind CSS得意なので結構綺麗に直してくれたりする。
あと私は下記のテンプレートサイトをよく見ている。コツはコードを見た時にできるだけ短くシンプルなものから選ぶこと。(TailwindだけでなくCSSやJS使って動き出してるテンプレもあるので)
あとCSS勉強したいならCodeMafia先生の下記が網羅的でおすすめ。
原因②古いキャッシュが残ってる
rails sやbin/devしたときにコンパイルされたファイルはassetsに溜まっていくのですが古い履歴が悪さをしている時があります。
$ bin/rails assets:clobber
コマンドを打って、サーバーを立ち上げ直すと反映されることがあります。
他になんか追加した方がいい情報があればコメントください。