【初心者用】Ruby on Railsの勉強【ツイートの削除機能の実装】

今回はツイートを削除するための機能を実装していきます。間違った投稿をしてしまった場合に削除する機能がないと困りますよね。削除するためにはデータベースから情報をdeleteする処理を作成する必要があります。

 

※今回もモデル名やコントローラー名にはhogeまたはhogesを使用しています。ここは自分の作成するアプリケーションによって名前を変更しましょう。

 

 

✔︎本記事の内容

  • CRUDのD(DELETE)を学ぶ
  • destroyアクションを理解する
  • Prefixを学ぶ

 

今回は7つのアクションのうちdestroyを使用します。7つのアクションてなんぞ?という人は別記事にて解説していますのでご覧になってください。>>7つのアクションについて

いつも通りMVCの形に沿って実装を進めていきます。

 

削除機能の実装の流れはこんな感じ

  1. ツイート削除にアクセスした時のルーティングを設定する
  2. 削除ボタンをトップビューに表示する
  3. destroyアクションをコントローラーに定義する
  4. 削除完了ビューを作成する

早速実装していきましょう。

 

ツイート削除機能の実装

 

✔︎destroyアクションのルーティングを設定しよう

何はともあれまずはルーティングを行います。そうしないと削除というリクエストがあった時にどの処理を使うのかのルートが分かりませんからね。ルーティングファイルであるroutes.rbのresourcesの部分に:destroyアクションを追加してみましょう。

config/routes.rb
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で行き先を決めていたのをこの方法を用いることで省略できますよって感じです。

【例】Prefixの使用例
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を用いた記述に編集してみましょう。

app/views/hoges/index.html.erb
 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の部分にあたります。編集は以下の通り

app/controllers/tweets_controller.rb
 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というものが出てきました。これは1つのものを指定する時に使用します。そして、hogeに代入してある情報をdestroyメソッドで削除するという処理にしているわけです。

 

 

✔︎削除完了画面を作成しよう

app→views→hogesディレクトリにdestroy.html.erbというファイルを作成しましょう。

この中身は「削除完了。トップページに戻る」という見た目を作ってあげるだけです。以下のように編集しましょう。

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!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です