Railsではフォームやリンクを生成するヘルパーを使う時、共通して data-confrm
という属性をつけると、確認アラートを表示することができました。しかし、Rails7においてはこれだけでは動きませんでした。
そもそも、どのようにこの動作を実現しているかといえば、 rails-ujs
というgem(中身はjs)のおかげです。rails-ujs はrails5.1.0以降、rails本体に取り込まれました。
https://github.com/rails/rails/tree/main/actionview/app/assets/javascripts
rails-ujs の役割として、confirmの制御、非getリクエストの実行、非同期リクエストの実行、サブミットボタンの非活性制御を行うライブラリとなっています。railsの便利機能を実現するためのフロントエンドで動く小さなjavascriptです。
Rails7においては、このgemはデフォルトでインストールされていません。
つまり rails-ujs を単体でインストールすれば動くということです。
npm install @rails/ujs --save
実態としては小さなjsであるため、npm経由でインストール可能です。このjsをassetsパイプライン経由などで読み込ませることで今までの開発体験を取り戻すことができます。
しかし、なぜRails7ではデフォルトでインストールされていないか、そこを知っておく必要があるでしょう。
Rails7では、新しいフロントエンドフレームワークとして、Turbo
とStimlus
(2つ合わせてhotwired
と呼ばれます)が導入されました。Turbo自体は rails-ujs の置き換えという立場ではありませんが、rails-ujs の機能を一部取り込んでいます。それが今回、data-confirm が動作しな理由の一つです。
Turboを前提とした確認ダイアログの実装
Turboを使用する場合、data-confirm
の代わりに data-turbo_confirm
を使用します。
= form_tag "#action", method: "post" ,data: { turbo_confirm: "送信しますか?" }
そしてこの属性は常にformタグに設定する必要があります。これが一癖。例えば、formを生成するbutton_toの場合は、下記のように指定する必要があります。
= button_to "削除", "#button", method: "delete", form: { data: { turbo_confirm: "削除しますか?" } }
link_toはどうなるの?
こちらも data-turbo_confirm
に置き換えです。
data-turbo_method を指定すると、data-turbo_confirm が有効になるようです。
= link_to "削除リンク", "#button", data: { turbo_method: "get", turbo_confirm: "削除しますか?" }
重要な考え方は、Formのdata属性に設定する必要があるということです。これを意識しておけば、難しくないですね。