初学者がハマった！Railsフォーム送信後にページが遷移しない原因と解決方法
前回の投稿で Turbo の役割について理解できていなかったため、改めて整理してまとめ直しました。
結論：
data: { turbo: false } を記述しないと、私のケースの場合、フォーム送信後にページが遷移しませんでした。
はじめに
現在、Rails でモデルを使用せず、params だけで入力データを管理する超簡易版の体重測定アプリを作成しています。2日分の体重を入力すると、その増減に応じて異なる画像が表示される仕様です。
実際のコードはこちらです：
<%= form_with url: weights_judge_path, method: :post, local: true, data: { turbo: false } do %>
<div>
<label>1日目：</label>
<%= number_field_tag :day1 %> kg
</div>
<div>
<label>2日目：</label>
<%= number_field_tag :day2 %> kg
</div>
<%= submit_tag "比較" %>
<% end %>
ブラウザ画面
比較ボタンを押すと、ChatGPTで作ったゴリラ🦍の画像が出力されます笑
data: { turbo: false } がなぜ必要なのか？
以下のように data: { turbo: false } を記述しない場合、比較ボタンを押してもページが遷移しませんでした。
<%= form_with url: weights_judge_path, method: :post, local: true do %>
これは Rails 7 からデフォルトで有効になっている Turbo により、フォーム送信時にページ全体をリロードせず非同期でリクエストが送信されるためです。
今回のように「送信後は結果ページへ遷移して結果を表示したい」ケースでは、この Turbo の動作が逆に障害となりました。
そのため、Turbo の動作をオフにするために data: { turbo: false } を付与する必要があったということを学びました。
そもそもTurboとは？
参考記事： なにやらTurboとは、Rails7から標準搭載された Hotwire (Turbo Drive) という仕組みがあり、
- ページ遷移
- フォーム送信
を Ajax（非同期）で実行し、ページ全体をリロードせずに必要な部分だけを書き換える機能を
持っている。
これによりページ遷移が高速化されますが、送信後にページが遷移しなくなるという特徴があります。
data: { turbo: false } のまとめ
- Turbo の非同期送信・部分更新を オフにする記述
- 記述することで送信後にページがリロード・遷移する従来の動作となり、結果ページが表示される
逆に記述がないと、Turboが効き、非同期送信され、同じページで結果の一部だけ更新される
結論
Turbo がデフォルトでは有効のため、フォーム送信時にページ遷移しようとせず非同期送信になるので、ページが切り替わらず画面が止まったように見えるみたいです。
今回学んだことは、
フォーム送信後に結果ページへ遷移させたい場合は必ず data: { turbo: false } を付ける
ということでした！
Discussion