<Hazm Blog />

Rails7におけるdata-confirm

Cover Image for Rails7におけるdata-confirm
Hazm
Hazm

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では、新しいフロントエンドフレームワークとして、TurboStimlus(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属性に設定する必要があるということです。これを意識しておけば、難しくないですね。