Railsでdata-confirmを使ってデータ削除時にアラートを表示する

HTML5のデータ属性は、HTMLの要素に独自のデータを持たせることができるものですが、その中でもdata-confirm属性は、持たせたデータをブラウザのダイアログで表示させることができます。

今回は、削除ボタンを押したときにダイアログで確認を入れる動作を実装する方法を紹介します。

destroyアクション

今回はuserデータを削除する場合にアラートを出すことにします。その場合のdestroyアクションは下記のようになります。

    def  destroy
        @user = user.find_by(id: params[:id])
        if @user.destroy
            redirect_to users_path
        else
            render :edit
        end
    end

data-confirmを使った削除ボタンの実装

本題のdata-confirmを使った削除ボタンは下記のようになります。通常の削除リンクにdata-confirm属性を付与しているだけですが、これだけでクリック時に確認のアラートが表示されます。

<%= link_to user_path(user.id), "削除する", method: :delete, data: {confirm: "削除しますか？"} %>

簡単に実装できて、ユーザーにも便利なので、ぜひ、使ってください。

Ruby on Railsをこれから本格的に勉強したい人は「エンジニアになるための600時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。