データを削除できるようにした

はじめに
現状のRailsポートフォリオアプリケーションでは、登録して表示させたデータを削除することができない。
削除できるようにしていこう。
現状の一覧ページ(ローカル)
この登録したデータを削除したい。

削除ボタンを追加
まずは、以下を参考にして、削除ボタンを追加する。

8行目を追記した。

削除ボタンが追加された。

削除ボタンを押すと
ジャンカラのほうの削除ボタンを押すと、以下の画面に遷移した。

Routing Errorだ。
ルーティングを設定してもルーティングエラーが解消されない
こちらを参考にして、削除のルーティングを設定する。

以下の7行目のように書いてもエラーは解消されなかった。

ルーティングのresourcesにdestroyを追加してみる
以下を参考にして、resources :posts, only: [:destroy]を追加してみよう。


何も変わらなかった。
詳細ページへのルーティングを追加する
先ほどのエラーをもう一度確認しよう。

詳細画面へのルーティングを設定すれば、とりあえずこのエラーは解消するだろう。
まずは、以下を参考にする。

9行目を追加した。8行目は、URLが同じだが、postなので残しておこう。

これで画面のリロードをかけると、先ほどのエラーとは別のエラーが発生した。
これは、ケアレスミスだ。

アクションの前に/を書いてしまっていたので、#に修正した。

再び、リロードをかけると、分かりやすいエラーが発生した。

詳細ページのアクションを作成する
showアクションがないことが原因のエラー。
追加した。

画面をリロードすると、テンプレートファイルがない時に発生するエラーが顔を出した。

詳細ページのテンプレートファイルを作成する
app > views > postsにアクション名が含まれるerbファイルを新規作成した。

ブラウザをリロードすると、エラーが解消されて、詳細ページが表示された。

現状、削除ボタンを押すと詳細ページに飛ぶ
削除ボタンをクリックすると、詳細ページに飛んでしまう。

以下のソースコードを書いているからだろう。

削除の記述を行い、削除できるかどうか試してみる
methodは、deleteにした。

ルーティングの最初にも、deleteと書いた。

コントローラーには、destroyアクションを追加した。

削除ボタンを押しても、先ほどと同じく、詳細ページに飛んだ。
以下のルーティングが呼ばれているからだろう。

resourcesの記述を削除してみる
2行目に追加していた以下の記述を削除してみる。

それでも挙動に変化はなかった。
基本に立ち返る
Rails 削除機能の実装方法 手順 #Ruby – Qiitaを参考にして、ビュー、コントローラ、ルーティングを一つ一つ進めていこう。
焦らず、ゆっくりと。
まずは、削除ボタンを作成する。

ビューファイルを以下のように変更した。

次に、ルーティングを設定しよう。

以下のように、ルーティングファイルを変更した。

そして、コントローラ。以下の例では、if文で、ログインユーザかどうかを確認している。今回は、deviseを導入した会員登録機能を実装していないので、この記述は書かない。

destroyアクションに以下を追記した。Postテーブルから現在のパラメータの値を見つけて、@postというインスタンス変数に入れたのが19行目。20行目では、@postに対して、destroyアクションを使用した。

最後に、削除完了後に遷移するページを作成していく。

postsディレクトリに、destroy.html.erbを新規作成した。

果たして、これで削除できるのか?
それでも上手くいかない
一覧ページの削除ボタンを押しても、詳細ページに飛ばされてしまう。
ログはこちら。

現在の処理の流れを追ってみる
現在の処理の流れを追ってみよう。
link_toメソッドで、削除ボタンが生成されている。

生成された2つ目の投稿のHTMLはこちら。

data-method属性はdeleteなので、削除のリンクとして申し分ないように思える。
なぜ詳細ページに飛んでしまうのか?
それ以降に問題があるのでは?
次のステップは、ルーティング。
と、順番に見ていこうと思ったが、救世主となる記事を検索することに成功した。
上手く削除できた
1年以内でフィルタリングをかけて、以下のキーワードでググった。

method: :deleteという書き方は、最近のRailsでは機能しないようだ。data: { turbo_method: : delete }という書き方に変更する必要があるみたい。

変更した。

削除ボタンを押すと、無事に、2つ目の投稿が削除された。

要素の検証で確認すると、data-turbo-methodという属性がついていた。

ひとまず、投稿を削除することができてよかった。
本番でも削除を試そう
gitにソースコードをアップして、手動デプロイを行った。
現状は、以下のように、データが5つある。

サウナを削除できるかどうか試してみよう。
1500の右にある削除を押すと、無事に削除することができた。

本当に削除してもよろしいですか?という確認メッセージは欲しいところだ。
次回以降、実装していく。
コメントを残す