【Rails】投稿サイトに削除確認画面をつけよう

皆様こんにちは、もしくははじめまして。IDEです。
今回の記事は、表題の通り、投稿サイトの削除機能における削除確認画面の実装についてです。

目次

  1. 機能実装の目的・背景
  2. 実際の挙動
  3. サンプルコード
    ・ルーティング
    ・コントローラー
    ・ビュー
  4. 個人的ひっかかったポイント
  5. まとめ
  6. 参考記事

機能実装の目的・背景

  • 目的:投稿サイトの削除機能に削除する前に確認するページを作る
  • 作成の背景:アプリケーションのペルソナに投稿サイトに慣れていない層を想定しているため、投稿を削除する際に確認画面を挟んだ方が良いのではないかと考えた
  • 他の実装方法
    • ダイアログを表示させる→味気ないので今回は不採用(完全な好み)
    • form_forメソッドを使う→新規投稿等フォームに入力した後の内容の確認ではないため不採用。(ルーティングやコントローラーの設定はこちらを参考にしました。)

実際の挙動

Image from Gyazo

詳細画面〜削除して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メソッドで設定するのか?
以下の理由ではないかと考えました。

  • form_for→データベースにはない情報の確認のため、POSTで直前の情報を送りたいから
  • 今回→すでにデータベースにある情報を取得したいからGETを使用 おそらく少し考えれば簡単なことだったと思うのですが、気がつくのに時間がかかってしまいました。
    何をさせたいのかを明確にすることと、エラー文をもう少し読み込むことを意識していきます。


    まとめ

    今回は投稿を削除する際の確認画面を実装していきました。
    当たり前にある機能の1つのため、今後また実装する際にスムーズに記述できるよう、ここに備忘録として残しておきます。
    最後までお付き合いいただいた方、ありがとうございました。


    参考記事

    今回の記事を書くに当たり、以下の記事を参考にさせていただきました。
    ありがとうございました。

  • Rails のルーティング
  • 【Ruby on Rails】確認画面を作る方法!hiddenか?セッションか?