見出し画像

PicTweet ツイートを削除しよう

ツイートの削除機能を実装

データベースからデータを削除する処理

  • CRUDのD(DELETE)を体験

  • データの操作で基本的な処理となる「削除」を理解

  • destroyアクションの処理を理解

  • Prefixを復習

実装の流れを確認しよう

1. ツイートを削除するためのルーティングを設定する

2. 削除ボタンをビューに追加する

3. destroyアクションをコントローラーに定義する

ツイート削除機能の実装

destroyアクションのルーティングを設定

config/routes.rb ファイル

Rails.application.routes.draw do
root to: 'tweets#index'
resources :tweets, only: [:index, :new, :create,:destroy]  ←ここ
end

確認用URL
http://localhost:3000/tweets

index.html.erbを編集しましょう

次にlink_toメソッドを使用して、削除ボタンを追加

app/views/tweets/index.html.erb ファイル
<div class="contents row">
<% @tweets.each do |tweet| %>
<div class="content_post" style="background-image: url(<%= tweet.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li>
<%= link_to '削除', "/tweets/#{tweet.id}", data: { turbo_method: :delete } %>
</li>
</ul>
</div>
<p><%= tweet.text %></p>
<span class="name">
<%= tweet.name %>
</span>
</div>
<% end %>
</div>

【解説】
5行目の<%= image_tag 'arrow_top.png' %>
について
image_tag
mgタグを生成するためのRailsのヘルパーメソッド
第一引数にapp/assets/images配下、もしくは、public配下の画像ファイルを指定
public配下の画像ファイルを指定する場合のみファイル名の前に/が必要

ボタン完成!

link_toの遷移先をPrefixで指定

これまでlink_toにはURI Patternを用いて遷移先を指定していましたが、今回は、Prefixを用いて遷移先を指定
link_toを用いて遷移先のパスを指定する際は、Prefixを使用するのが一般的

Prefixプレフィックス

Prefixとは、ルーティングのURI Patternに名前をつけて変数化したもの
これにより、URI Patternの代わりにPrefixを用いてパスを表現

ルーティングに対応するPrefixを確認しましょう

ターミナル
% rails routes


削除するdestroyアクションに対応するPrefixはtweetということが分かる

app/views/tweets/index.html.erb ファイルで
<div class="contents row">
<% @tweets.each do |tweet| %>
<div class="content_post" style="background-image: url(<%= tweet.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li>
<%= link_to '削除', tweet_path(tweet.id), data: { turbo_method: :delete } %> </li>
</ul>
</div>
<p><%= tweet.text %></p>
<span class="name">
<%= tweet.name %>
</span>
</div>
<% end %>
</div>

tweets_controller.rbを編集

今回のdestroyアクションは、ツイートを削除するだけで、ビューにツイート情報を受け渡す必要はない

そのため、インスタンス変数ではなくただの変数として置き、destroyメソッドを使用

app/controllers/tweets_controller.rb ファイル
class TweetsController < ApplicationController

def index
@tweets = Tweet.all
end

def new
@tweet = Tweet.new
end

def create
Tweet.create(tweet_params)
redirect_to '/'
end

def destroy  ←ここから
tweet = Tweet.find(params[:id])
tweet.destroy
redirect_to root_path
end  ←ここまで

private
def tweet_params
params.require(:tweet).permit(:name, :image, :text)
end

end

確認用URL
http://localhost:3000/tweets

投稿を削除して確認する

この記事が気に入ったらサポートをしてみませんか?