【Rails】投稿サイトに削除確認画面をつけよう
皆様こんにちは、もしくははじめまして。IDEです。 今回の記事は、表題の通り、投稿サイトの削除機能における削除確認画面の実装についてです。
目次
機能実装の目的・背景
- 目的:投稿サイトの削除機能に削除する前に確認するページを作る
- 作成の背景:アプリケーションのペルソナに投稿サイトに慣れていない層を想定しているため、投稿を削除する際に確認画面を挟んだ方が良いのではないかと考えた
- 他の実装方法
- ダイアログを表示させる→味気ないので今回は不採用(完全な好み)
- form_forメソッドを使う→新規投稿等フォームに入力した後の内容の確認ではないため不採用。(ルーティングやコントローラーの設定はこちらを参考にしました。)
実際の挙動
詳細画面〜削除してTOPページに戻るまでの挙動です。 まだビューがあまり整っていないのでだいぶ恥ずかしいですが💦💦
サンプルコード
①ルーティング
routes.rb
Rails.application.routes.draw do 〜中略〜 resources :delis do member do get 'confirm' end end end
今回は投稿機能につけたいルーティングおため、:delisシンボル内に記述していきます。 collectionかmemberのどちらかを設定していきますが、今回は削除したい投稿を指定したいため、ルーティングに:idがつくmemberを使っていきます。 確認画面は削除するためのお膳立てみたいなものだと思っています。 投稿を削除するため情報を用意(取得)しなければいけないので、HTTPメソッドはGETメソッドを指定しています。
②コントローラー
delis_controller.rb(投稿機能のコントローラー)
class DelisController < ApplicationController before_action :deli_find, only: [:confirm, :destroy] 〜中略〜 def confirm end def destroy @deli.destroy end 〜中略〜 private def deli_find @deli = Deli.find(params[:id]) end end
deli_findメソッドは削除したい投稿を指定する記述です。confirmメソッド、destroyメソッドの両方にある記述なのでメソッド化してbefore_actionさせます。
③ビュー
show.html.erb(投稿詳細画面)
〜前略〜 <% if user_signed_in? && current_user.id == @deli.user_id %> <div class="deli-edit"> <%= link_to "編集", edit_deli_path(@deli.id), method: :get ,class:"edit-list" %> <%= link_to "削除", confirm_deli_path(@deli.id),method: :get, class:"confirm-list" %> </div> <% end %> 〜後略〜
confirm.html.erb(削除確認画面)
<div class="delete-form"> <h2 class="confirm-message">投稿を削除しますか?</h2> <div class="select-button"> <%= link_to "削除する", deli_path(@deli.id), method: :delete, class:"delete-path" %> <%= link_to "戻る", deli_path(@deli.id), class:"back-path" %> </div> </div>
destroy.html.erb(削除完了画面)
<div class="destroy-complete"> <h2 class="complete-message">投稿を削除しました</h2> <div class="root-link"> <%= link_to "TOPページへ戻る", root_path, class:"back-root" %> </div> </div>
個人的引っかかったポイント
今回個人的に時間をかけてしまったのは、HTTPメソッドについてです。 ルーティング設定の際、HTTPメソッドをずっとPOSTメソッドで設定していました。form_forメソッドで実装する際はPOSTメソッドで設定されていたので同じようにやってしまったんですね。 なぜ削除の確認画面ではGETメソッドで設定するのか? 以下の理由ではないかと考えました。
まとめ
今回は投稿を削除する際の確認画面を実装していきました。 当たり前にある機能の1つのため、今後また実装する際にスムーズに記述できるよう、ここに備忘録として残しておきます。 最後までお付き合いいただいた方、ありがとうございました。
参考記事
今回の記事を書くに当たり、以下の記事を参考にさせていただきました。 ありがとうございました。