【初心者用】Ruby on Railsの勉強【ツイートの削除機能の実装】
今回はツイートを削除するための機能を実装していきます。間違った投稿をしてしまった場合に削除する機能がないと困りますよね。削除するためにはデータベースから情報をdeleteする処理を作成する必要があります。
※今回もモデル名やコントローラー名にはhogeまたはhogesを使用しています。ここは自分の作成するアプリケーションによって名前を変更しましょう。
✔︎本記事の内容
- CRUDのD（DELETE）を学ぶ
- destroyアクションを理解する
- Prefixを学ぶ
今回は７つのアクションのうちdestroyを使用します。７つのアクションてなんぞ？という人は別記事にて解説していますのでご覧になってください。>>７つのアクションについて
いつも通りMVCの形に沿って実装を進めていきます。
削除機能の実装の流れはこんな感じ
- ツイート削除にアクセスした時のルーティングを設定する
- 削除ボタンをトップビューに表示する
- destroyアクションをコントローラーに定義する
- 削除完了ビューを作成する
早速実装していきましょう。
ツイート削除機能の実装
✔︎destroyアクションのルーティングを設定しよう
何はともあれまずはルーティングを行います。そうしないと削除というリクエストがあった時にどの処理を使うのかのルートが分かりませんからね。ルーティングファイルであるroutes.rbのresourcesの部分に:destroyアクションを追加してみましょう。
1 2 3 4 5 |
Rails.application.routes.draw do
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
resources :hoges, only: [:destroy]
end
|
※hogesには自分で生成したモデル名が入ります。
✔︎削除ボタンを投稿一覧に追加してみましょう
index.html.erbがトップページ（一覧表示）のビューですので、そのファイルを編集して削除ボタンを追加していきます。今回、削除ボタンはlink_toメソッドを用いて作成しますのでボタンと言うよりはリンク形式で作ります。削除するデータのidをパラメーターとして追記します。
✔︎link_toの行き先をPrefixで指定する方法を学ぼう
まずはPrefixって何？って話ですよね。PrefixとはルーティングのURI Patternに名前をつけて変数化したものです。これにより、URI Patternの代わりにPrefixを用いてパスを表現できます。いつもはlinkのurlで行き先を決めていたのをこの方法を用いることで省略できますよって感じです。
1 2 3 4 5 |
# Prefix未使用
<%= link_to "link_button", '/', class: "header__title--text" %>
# Prefix使用
<%= link_to "link_button", root_path, class: "header__title--text" %>
|
上記のように今までは’/’とかで行き先を決めていましたね。Prefix名に続けて_pathと記述することでURIパターンとして認識されます。
Prefixはrails routesで確認することができます。
1 2 3 4 5 6 7 8 9 10 |
Prefix Verb URI Pattern Controller#Action
hoges GET /hoges(.:format) tweets#index
POST /hoges(.:format) tweets#create
new_hoge GET /hoges/new(.:format) tweets#new
hoge DELETE /tweets/:id(.:format) tweets#destroy
rails_service_blob GET /rails/active_storage/blobs/:signed_id/*filename(.:format) active_storage/blobs#show
rails_blob_representation GET /rails/active_storage/representations/:signed_blob_id/:variation_key/*filename(.:format) active_storage/representations#show
rails_disk_service GET /rails/active_storage/disk/:encoded_key/*filename(.:format) active_storage/disk#show
update_rails_disk_service PUT /rails/active_storage/disk/:encoded_token(.:format) active_storage/disk#update
rails_direct_uploads POST /rails/active_storage/direct_uploads(.:format) active_storage/direct_uploads#create
|
今回、行っている削除つまりdestroyアクションです。それに対応するPrefixはhogeということが記載してあります。なので、hoge_pathと記述することでPrefixを用いた行き先の指定が行えます。では、Prefixを用いた記述に編集してみましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="contents row">
<% @hoges.each do |hoge| %>
<div class="content_post" style="background-image: url(<%= hoge.image %>);">
<div class="more">
<span><%= image_tag 'arrow_top.png' %></span>
<ul class="more_list">
<li>
<%= link_to '削除', hoge_path(hoge.id), method: :delete %>
</li>
</ul>
</div>
<p><%= hoge.text %></p>
<span class="name">
<%= hoge.name %>
</span>
</div>
<% end %>
</div>
|
今回、作成しているツイート機能ではそこまでURLが長くなることはありません。なので、正直作業量としてはPrefix用いても用いなくても変わりません。どちらも同じ結果になります。今後、複雑なアプリを作っていくとURLがとても長くなりコードが見辛くなることがあります。そうするとミスが生まれやすくなるのでPrefixを使って簡略化しましょうってことです。Prefix = 遷移先の文字数を省略するものという風に捉えておきましょう。
✔︎destroyアクションにコントローラーを定義しよう
いつも通り、コントローラーを編集していきましょう。hogesコントローラーにdestroyアクションを定義します。destroyメソッドを用いて削除するツイートを選択する場合はparams[:id]と記述してデータベースのテーブルを編集するように処理します。
params[:id]は先ほどPrefixで指定したパスのhoge_path(hoge.id)のhoge.idの部分にあたります。編集は以下の通り
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
class TweetsController < ApplicationController
def index
@hoges = Hoge.all
end
def new
@hoge = Hoge.new
end
def create
Hoge.create(Hoge_params)
end
def destroy
hoge = Hoge.find(params[:id])
hoge.destroy
end
private
def hoge_params
params.require(:hoge).permit(:name, :image, :text)
end
end
|
いつものようにインスタンス変数（＠）を使わないのと思われた方に解説します。今回の削除機能はビューに情報を渡す必要がありません。投稿するときは投稿した情報をビューで見れるようにしますが、削除はビューから消えるだけです。何か見た目を変える必要はないので、ただの変数として＠を使用しなくてOKです。
もう一つ、Active recordメソッドで新しくfindというものが出てきました。これは１つのものを指定する時に使用します。そして、hogeに代入してある情報をdestroyメソッドで削除するという処理にしているわけです。
✔︎削除完了画面を作成しよう
app→views→hogesディレクトリにdestroy.html.erbというファイルを作成しましょう。
この中身は「削除完了。トップページに戻る」という見た目を作ってあげるだけです。以下のように編集しましょう。
1 2 3 4 5 6 |
<div class="contents row">
<div class="success">
<h3>削除が完了しました。</h3>
<a class="btn" href="/">投稿一覧へ戻る</a>
</div>
</div>
|
トップページのパスは’/’です。問題なく処理されれば完成です。
以上でツイートの削除機能の実装は完成です。また、引き続きツイート機能アプリケーションに関して情報提供をしていきますので良ければご覧になってください。
Follow me!
