「ログアウトしてよろしいですか？」のアラートを出したい【Rails】

f:id:y_hakoiri:20191102121704j:plain

Railsでdeviseを使ってアプリを作成しています。

ユーザーがログインやログアウトした際に「ログインしました」「ログアウトしました」というフラッシュメッセージを出すのは比較的簡単ですが、

例えばログアウトボタンを押したら「ログアウトしてよろしいですか？」的なアラートが出て、

OKを押すと初めてログアウトする、みたいな挙動を実現したくなりました。

今の段階だと、右上のログアウトボタンを押した段階ですぐにログアウトされてしまいます。

= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: 'header-link'

これを実現するために自分で思い浮かべたのは、以下の二つの方法

まずはJSのみ使う方法から調べました

指定したセレクタが押されたら、windowを出すことができます

大きく分けて３種類かな？

今回の私の用途だと、confirmが使えそうですね

ただ、OKボタンが押された時にログアウトするとなると

OKボタン自体をdeleteメソッドのリンクにする必要があり、

そうなるとwindowのいじり方が分からないな・・・と

次に、二つ目の選択肢である

CSSとJavaScriptで手作りのアラートを作る方法。

あらかじめHTMLとCSSでアラートのスタイルを作っておいて、

普段は非表示にしておいて、ログアウトボタンが押されたら

JSでDOMを操作しdisplay:noneのスタイルを外す、みたいなイメージです

実際に私たちが使うようなおしゃれなアプリとかは

こうやってきちんとスタイルを当てて作られているんだろうけど、

今回は最小限のユーザービリティだけ確保して、

あまりフロントにこだわりすぎたくないな・・・と言う本音。

どうしようかな・・・と色々調べていたところ、

便利すぎる方法を見つけてしまいました

= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: 'header-link', data: { confirm: 'ログアウトしますか？' }

なんとRailsのヘルパーのオプションであるらしい！！

data: { confirm: 'ログアウトしますか？' }

これを追加すると、先ほど説明したように

confirmのwindowが出てくれるんだそう。

これならわざわざJSを使う必要もなく、

ログアウトさせるためにパスを指定する必要もない、簡単すぎ・・・！

実際使ってみるとこんな感じ

便利すぎる・・・！

今回もRailsに感動した私でした。

以下一部参考にしました。

箱のプログラミング日記。