![見出し画像](https://assets.st-note.com/production/uploads/images/118897375/rectangle_large_type_2_a623a0c2c8ac1002d9fe0ffa4473999a.png?width=1200)
知識ゼロからの 『とほほのRuby on Rails入門』 #おまけ
これはプログラミング初心者がRuby on Railsの勉強をしていく記録です。
◇ この記事で勉強しているサイト
◇ 前回までの記事一覧
『とほほのRuby on Rails入門』の項目は前回ですべて終わりましたが、
![](https://assets.st-note.com/img/1697269188717-kVLftSn0DX.png?width=1200)
このままだと一度投稿したら二度と消せないコメントする人にとって大変プレッシャーがかかる仕様なので、コメントの削除をできるようにしてみました。
これをやってみて、すごく大きな学びがあったので記録しておきます!
完成したもの
![](https://assets.st-note.com/img/1697269895790-nxKd3giACm.png?width=1200)
別ページに移行できるようにしました。
![](https://assets.st-note.com/img/1697270032234-Zn5WHz1PDk.png?width=1200)
だいぶ苦戦したのでシンプルに削除ボタンだけにしました。
そしてDeleteボタンを押すと…
![](https://assets.st-note.com/img/1697270184875-Mjjn9j0dUs.png?width=1200)
これだと誰でもどのコメントでも消すことができてしまうのでほんとは良くないですが。
ユーザー設定とかまで絡めると今の私には難しすぎると思ったのでこれで大目に見てください。
コード
![](https://assets.st-note.com/img/1697271267226-9NcKfs4FLK.jpg?width=1200)
リンクを追加しました。
![](https://assets.st-note.com/img/1697270556404-KXGxa5Kn13.png)
editとdestroyというメソッドを追加しました。
![](https://assets.st-note.com/img/1697270556482-isdTp1cgNy.png)
コメント削除用にedit.html.erbを新規作成しました。
![](https://assets.st-note.com/img/1697271789710-tB7gyCqWQO.png)
resourcesを使っていたおかげで編集や削除のルーティングもすでにあったので、何も変えずに済みました。
過程
完成したものを見ると簡単そうに見えますよね。
でもこれ4時間くらいウンウン悩んでやっと出来ました。
何が難しかったかと言うと、
![](https://assets.st-note.com/img/1697272260053-KEG4XB1Pgg.jpg)
Controllerのこういう記述を自分でいちから書くとなると、何を書いたらいいのかまったく分かりませんでした。
解決に至った道筋は ”ブラウザ画面から順を追って処理の流れを考える” ことでした。
ここから下の説明は結構長いですが、私はこれで “コントローラのメソッドに何を書けばいいか” という謎が解けてすごくスッキリしました。
順を追って処理の流れを考える
まずブラウザ画面のURLに”localhost:3000/“と入力すると、getメソッドで’/‘にアクセスする事になるので、home_controllerのindexメソッドが呼び出されます。
![](https://assets.st-note.com/img/1697274259038-wLMyzvRU2h.jpg?width=1200)
今からこの画面を何度も確認していく事になります。
![](https://assets.st-note.com/img/1697275092676-OT80P1WnDg.png)
このメソッド内で移行先の指定はないので、ブラウザ画面にはhomeのindex.html.erbが表示されます。
![](https://assets.st-note.com/img/1697275189850-TYxsPVl9ih.png)
これの@messageや@menusに入る値を、先程のhome_controllerのindexメソッドが指定しています。
なのでコントローラのメソッド内に書くインスタンス変数は、その後呼び出されるviewに使われているものを書けばいいと言うことです!
(その事にここで気がつきました)
さらに順を追っていきます。
ブラウザ画面は今こうなっています。
![](https://assets.st-note.com/img/1697275934480-bCMIxVmWGG.png?width=1200)
「本」の文字のリンクを押すと、getメソッドで”books_path”(”/books”のこと)にアクセスします。
![](https://assets.st-note.com/img/1697277831114-4zIHPrytgo.png?width=1200)
(切り抜いてみたけど、どっちにしろちっちゃい)
![](https://assets.st-note.com/img/1697276849955-i4nC7pRjPv.png)
このメソッドの中でも特に移行先の指定はないので、booksのindex.html.erbがブラウザ画面に表示されます。
![](https://assets.st-note.com/img/1697276884730-dDlX1QAX5Q.png)
![](https://assets.st-note.com/img/1697277442447-buA8WOpFZ3.png?width=1200)
ちなみにデータは3つしかありませんが、:id 1と2は削除したので上から順に:id 3、4、5です。
ここからさらに「サンプル」という文字のリンクを押すと、getメソッドで”book”(”/books/5”のこと)にアクセスします。
※”book”は”book_path(book)”の省略形で、括弧の中身だけで記載されています。
ここで変数が@bookではなくbookなのは@books.each do | book | という記述のbookというローカル変数だからだと思います。
「サンプル」というデータは:idが5なので、ここではbookという変数には:id=5という値が入っています。
下の画像にあるように、”book_path(book) “
は”/books/:id”というURLなので、”book_path(:id=5)”の場合は”/books/5”というURLを指すことになります。
![](https://assets.st-note.com/img/1697278119525-WRiElgJR2P.png?width=1200)
ややこしいですが伝わりますかね(ーー;)
でもこの部分は以前はよくわからなかったのでやっとスッキリしました。
話は戻りますが、このルーティングによりbooks_controllerのshowメソッドが呼び出されます。
![](https://assets.st-note.com/img/1697280333203-bxi5cAxGOw.png)
そしてこの:idには先程の5という値が入ります。
またこのメソッドの中でも特に移行先の指定はないので、booksのshow.html.erbがブラウザ画面に表示されます。
![](https://assets.st-note.com/img/1697280749418-acmVpIS8Ke.png?width=1200)
真ん中らへんのlink_to〜が自分で付け足したところです。
そしてここでやっと自分で記述を付け足しました。
もとは
<%= comment.commenter %>
こうだったものを、リンクをつけるためにlink_toを足し、リンク先にするパスを確かめ、
![](https://assets.st-note.com/img/1697281299835-yKUMUDPyeN.png?width=1200)
ルーティングを自分で書く場合は、ここも考えないといけなくて更に大変ですね。
<%= link_to comment.commenter, edit_book_comment_path(comment) %>
このように変えました。
ここでもedit_book_comment_path(comment)としたのは、この記述が@book.comments.each do | comment |という記述の中にあるからです。
これで、このリンクを押すとcomments_controllerのeditメソッドが呼び出されるようになりました。
comments_controllerにeditメソッドはまだ無いので今から作ります。
![](https://assets.st-note.com/img/1697281620930-GeVHnD2FpK.png)
このメソッド内でも特に移行先は指定しない予定なので、ブラウザ画面にはcommentsのedit.html.erbが表示されることになります。
なので、viewsのcommentsフォルダー内にedit.html.erbを新規作成します。
中の記述は作りたい内容に合わせて考えます。
今回の場合は、「コメントした人」「コメントの内容」が表示され「削除ボタン」を押せばコメントのデータが削除できる、という状態がゴールです。
そして書いたのがこれ。
![](https://assets.st-note.com/img/1697282427323-LdXt5zQanr.png)
(編集しているときに気がつきましたが、戻るのリンク先を手直しし忘れていますね)
Deleteボタンのパスは、これから作る予定のcomments_controllerのdestroyメソッドに繋がるように、これまたルーティング一覧(↓)から探し
![](https://assets.st-note.com/img/1697283067911-MteDxhwosc.png?width=1200)
deleteメソッドでbook_comment_pathにアクセスすればいけるだろうなと思ってそうしました。
そしてこのcommentsのedit.html.erbに出てくるインスタンス変数を、コントローラで記述しておいたらいいので、コントローラに書くのは
@comment = コメントに関するデータベースからid番号を指定して取り出す
という感じの記述。
そしてここはブラウザ画面のURLと見比べてみてわかったことなんですが、:book_idというのがコメントのid番号みたいです。
なので以下のように書けばOKだけど、練習コードでは2段階に分けていたので同じようにしてみました。
@comment = Book.find(params[:id]).comments.find(params[:book_id])
![](https://assets.st-note.com/img/1697284438906-xfz2UvXHti.png)
ここでブックのid番号も指定しないといけないのは、さっきの
![](https://assets.st-note.com/img/1697283067911-MteDxhwosc.png?width=1200)
このルーティングのURLに:book_id(コメントのid番号が代入される部分)と:id(ブックのid番号が代入される部分)があるからかなと思いました。
最後にdestroyメソッドを作ります。
![](https://assets.st-note.com/img/1697287316451-VFOus4QtLu.png)
メインとなるのは@comment.destroyです。
これを書くために、その上の2つで ”@commentとはなんぞや“ を定義しています。
そしてデータを消した後は、books_controllerのshowメソッドを呼び出して本の詳細画面に戻るようにしたかったので、redirect_to〜としてパスは下のルーティングを参考にbook_path(@book)にしています。
![](https://assets.st-note.com/img/1697287807928-V9ZwuLN76Y.png?width=1200)
※ここで括弧の中を@bookにしたのは、同じメソッド内に@book = Book.find(params[:id])があるからそうしてみました。
あとがき
これで上手くいきました!!!!
出来た時はほんとーーーーに嬉しかったです。
このやり方にピンと来た時はわくわくが止まりませんでした。
そして上手くいった時は難解な問題が解けたときの気持ちよさ!!!!
またすごく成長できたような気がしています。
やってみてよかった。
文章だとだいぶ伝わりにくかったと思いますが、railsがある人は実際にブラウザ画面とファイルたちを順を追って見ていくとすごく分かりやすいと思います。おすすめです。
参照した記事たち
◇ 解決策が直接載っていたわけではないんですがこの記事たちのおかげでピンと来ました。
◇ 色々検索している時にすごくいい記事を見つけたのでご紹介。
親子関係のモデルの作り方について、すごく詳しく書いてくれています。
最後に
長文でしたがここまで読んでくださった方がいましたらありがとうございますそしてお疲れさまでした!