ログアウトボタンを押すと確認のアラートを表示させる方法

概要

ruby on rails を使ってフリマアプリを作成しています。
実装している途中にユーザーがログアウトボタンを押すと何事もなかったかのようにログアウトがされることに気づき、その事についてメモ程度に記録を残しておきます。

修正前の状態

因みにコードはこんな感じ

.logout-user
  = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "header__right--btn", id: "logout-btn"

このままですとユーザーが間違ってボタンを押した時にサイトから強制退場させられてしまいます。
せめて『ログアウトいたします。よろしいですか？』みたいなアラートが欲しいかなと思い考えました。

java script（jQuery)を使う方法

まず最初に思いついたのはJavaScript（jQuery)を使う方法。
因みに、この時に知ったのですが、alertですとOK以外の選択肢がない為私が求めている実装としては不十分。クリックに対してYes or Noを選択するのはconfirmなのだそうです。

また知識が１つ増えました！！
これを実装するとすると

$(function(){
  $("#logout-btn").click(function(){
    var result= window.confirm('ログアウトします。よろしいですか？');
    if(result){
      // OKの時の処理
    }
    else{
      // NGの時の処理
    }
  })
});

みたいな感じでしょうか？
OKの場合とNGの場合で処理が分岐しますのでそれぞれの対応を考える必要があります。
ここで一瞬思考が停止・・・

さて、どうしたものか？
もっと簡単な方法はないだろか？

・・・
・・・
・・・　
ありました！！

link_toメソッドのオプションを使う方法

なんと、今まで私がやろうとしていたことを全てrailsのオプションの中で解決出来ることがわかりました！！
コードを少しだけ追加するだけで解決です。

修正前
.logout-user
  = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "header__right--btn", id:"logout-btn" 

修正後
.logout-user
 = link_to "ログアウト", destroy_user_session_path, method: :delete, class: "header__right--btn", id:"logout-btn" 
, data: {confirm: "ログアウトします。よろしいですか？"}　⬅️この部分が追加されました

data: {confirm: "ログアウトします。よろしいですか？"}
を追加するだけでログアウト確認のウインドウが出てきてOKとNGの分岐もしてくれるみたいです。

実際の挙動がこちら

しっかりできてますね！
ちょっと感動しました。

因みにこんなところでも使っています。

いろんなところで活躍するので覚えておくと便利ですね！

ここまでお読みになっていただいた方、本当にありがとうございます。
もう少しJSの勉強をして今度は心が折れないように、JSでも同じ実装が出来るように努力します。