さて、引き続き電話帳アプリを作っていきます。前々回までで一覧画面、新規作成画面、編集画面ができました。
今回は、リソースの削除機能を実装します。
スポンサーリンク
削除処理のルーティングを確認する
まずルーティングを確認してみましょう。
1 | $ rails routes |
1 2 3 4 5 6 7 8 9 | Prefix Verb URI Pattern Controller#Action members GET /members(.:format) members#index POST /members(.:format) members#create new_member GET /members/new(.:format) members#new edit_member GET /members/:id/edit(.:format) members#edit member GET /members/:id(.:format) members#show PATCH /members/:id(.:format) members#update PUT /members/:id(.:format) members#update DELETE /members/:id(.:format) members#destroy |
9行目がmemberリソースの削除用に用意されたリクエストです。
見ての通り、
メソッドはDELETE
urlは/members/:id
となっています。
つまり、ID1番のmemberリソースを削除したい場合は、/members/1へとdeleteメソッドによるhttpリクエストを送ればいいというわけです。
※もちろん削除処理自体は自分で書く必要があります。
スポンサーリンク
削除リクエストを送るリンクを作る
まず削除リクエストを送るためのリンクを作ります。ボタンにしてもいいのですが、ここでは普通のリンクにします。
削除は一覧画面ではなく、各編集画面からできるようにしたいと思います。
views/members/edit.html.erbを開いて、5行目を挿入して下さい。
1 2 3 4 5 6 | <h2>編集</h2> <%= render "form" %> <%= link_to "削除する", member_path(@member.id), method: :delete %> <%= link_to "戻る", members_path %> |
link_toメソッドを使ってaタグを出力しています。結果的に、以下のaタグが出力されることになります。
1 | <a rel="nofollow" data-method="delete" href="/members/1">削除する</a> |
おさいになりますが、link_toメソッドの第一引数にアンカーテキストを、第二引数にリンク先urlを渡すことで、aタグを出力しています。
1 | <%= link_to "text", "url" %> |
出力↓↓
1 | <a href="url">text</a> |
上記の削除リンクについては引数が1つ増えています。第三引数以降はオプションで、キーを指定した上でその値を渡します。
※指定できるオプションは他にもあります。詳しくは→link_to – リファレンス – – Railsドキュメント
1 | <%= link_to "text", "url", method: :delete %> |
出力↓↓
1 | <a rel="nofollow" data-method="delete" href="url">text</a> |
この場合、aタグにdata-method="delete"という属性が追加されているのが分かると思います。
※rel="nofollow"も自動的に追記されています。
これで各編集画面に、削除リクエストを送るボタン（というかリンク）が出来ました。
destroyアクションを追加して削除処理を実装する
この削除リクエストに反応するのが、destroyアクションです。ルーティングを確認してください。
1 2 3 4 5 6 7 8 9 | Prefix Verb URI Pattern Controller#Action members GET /members(.:format) members#index POST /members(.:format) members#create new_member GET /members/new(.:format) members#new edit_member GET /members/:id/edit(.:format) members#edit member GET /members/:id(.:format) members#show PATCH /members/:id(.:format) members#update PUT /members/:id(.:format) members#update DELETE /members/:id(.:format) members#destroy |
membersコントローラーにdestroyアクションを追加して、リソースをDBから削除する処理を実装しましょう。
/app/controllers/members_controller.rbを開いて下さい。
destroyアクションを追加します。
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 26 27 28 29 30 31 32 33 34 35 36 37 38 | class MembersController < ApplicationController def index @members = Member.all end def new @member = Member.new end def create @member = Member.new(member_params) @member.save redirect_to members_path end def edit @member = find_member_by_id end def update @member = find_member_by_id @member.update(member_params) redirect_to members_path end def destroy end private def member_params params.require(:member).permit(:name, :yomi, :phone) end def find_member_by_id Member.find(params[:id]) end end |
その中で、リクエストパラメータに含まれるIDから該当のMemberオブジェクト（モデル）を作って、destroyメソッドで削除してしまいます。
1 2 3 4 | def destroy @member = find_member_by_id @member.destroy end |
注）このdestroyメソッドはモデルクラスが持つインスタンスメソッドであって、destroyアクションとは全然別物なので混同しないように。
たったこれだけの表記で、テーブルから該当の一行（一人のデータ）を削除してしまえるんです。Railsって楽ちんです。
削除するだけでは、その後表示する画面がなくてエラーになるので、一覧画面へとリダイレクトを行ってdestroyアクション終了です。
1 2 3 4 5 | def destroy @member = find_member_by_id @member.destroy redirect_to members_path end |
確認ダイアログを出す
これで削除するのリンクをクリックすれば、そのmemberリソースを削除することができるようになりました。
が、削除する場合、確認ダイアログを出してあげた方が親切です。
なので、削除するリンクをクリックした際に、まずこの確認ダイアログが表示し、OKをクリックして初めて削除処理が走るようにしましょう。
views/members/edit.html.erbを開いて下さい。
いちいちJavascriptを書くのは面倒ですが、Railsならめちゃ簡単です。なんとlink_toメソッドにもう一つオプションを追加するだけで出来ます。
1 | <%= link_to "削除する", member_path(@member.id), method: :delete, data: {confirm: "本当に削除しますか？"} %> |
これだけです。
第四引数に
data: {confirm: “本当に削除しますか？”}
を渡すだけで、確認ダイアログ用のJavascriptを出力してくれます。
これで削除処理も完成です。
