みなさん、こんにちは！
筆者は大学生限定のプログラミングスクール「GeekSalon」でメンターをしています！
興味のある方や話だけでも聞いてみてい方はぜひのぞいてみてください👍
さっそく今回の本題に入っていきます！
今回は投稿の詳細を表示するように、投稿に対してなされたコメントの詳細を表示する機能を実装していきます。
##記事を書くに至った背景
筆者は、投稿機能を用いてお店の情報を、投稿へのコメント機能を通じてお店の商品を、コメントへのコメントを通じて商品への口コミを記録できるようなプロダクトを実装しようと思い立ちました！
このようなプロダクトを完成させるためには、①投稿に対するコメントの詳細を見ることができる機能、そして②投稿に対するコメントにさらにコメントできる機能が必要になります。
そのため、コメントの詳細ページを実装する記事、コメントにさらにコメントできる機能を実装する記事を探したのですがなかなかいいものがなく、自力で実装することにしました。
この記事は筆者の実装の振り返りのようなものです。
上記で述べたように、①投稿に対するコメントの詳細を表示し、②コメントに対しさらにコメントできる機能の実装の２つを行っていきますので、記事も２本立てで行きます。今回はその（前編）です。
後編の記事はこちらから
【Rails】（後編）投稿のコメントにさらにコメントしよう
##実装環境
Ruby 3.0.2-1
Rails 6.1.4.1
（※投稿機能、投稿に対するコメント機能は実装済みという前提で記事を書いていきます。）
##実装① ～routes.rb～
コメント機能は実装済みのため、ルーティングは
resources :tweets do
resources :comments, only: [:create, :destroy]
end
のようになっているはずです。そこにコメントの詳細ページを表示するためのshowパスを追加してあげましょう。追加後はこんな感じです。
resources :tweets do
resources :comments, only: [:create, :destroy, :show]
end
これでルーティングは終わりです。
コマンドプロンプトにrails routesを入力してみると、comments#showに対応するパスができていることが確認できます。
##実装② ～comments_controller.rb～
次はコントローラーに記述を加えていきます。
comments_controller.rbにshowアクションを記述していきましょう。
記述後はこんな感じです。
def show
@comment = Comment.find(params[:id])
end
これでコントローラーにアクションを定義することができました。
##実装③ ～view/comments/show.html.erb～
次にViewページを作成していきます。
viewのcomments配下に、show.html.erbファイルを追加しましょう。
追加したら、viewファイルに記述を加えていきます。
<div class="comment">
<p><%= @comment.content %></p>
<p><%= @comment.created_at %></p>
</div>
適宜、自分に必要な記述を加えてください。
##実装④ ～コメント詳細ページへ飛ぶリンク～
最後に、tweets/show.html.erbに、コメントの詳細ページへ飛ぶリンクを作っていきます。rails routesで確認すると、comment#showの記述は
tweet_comment GET /tweets/:tweet_id/comments/:id(.:format) comments#show
となっているため、リンクは
<%= link_to "コメントの詳細へ", tweet_comment_path(@tweet.id, c.id) %>
などとしてあげましょう。そしてこのリンクをtweets/show.html.erbの適切な位置に配置してあげましょう。完成イメージはこんな感じです。
＃省略
<% @comments.each do |c| %>
<div>
<%= c.user.name unless c.user.blank? %>
<br>
<%= c.content %>
<br>
<%= link_to "コメントの詳細へ", tweet_comment_path(@tweet.id, c.id) %>
<% if user_signed_in? && current_user.id == c.user_id %>
<%= button_to "削除する", tweet_comment_path(@tweet.id, c.id), method: :delete %>
<% end %>
</div>
<br>
<% end %>
＃省略
rails sでサーバーを立ち上げて確認してみてください。無事にコメントの詳細を表示できるはずです。
##実装⑤ ～コメントの詳細ページから、ツイートの詳細へと戻るリンク～
最後にコメントの詳細ページからツイートの詳細ページに戻るリンクを、view/comments/show.html.erbに記述していきます。
戻るリンクを作る際の注意点は、リンクにツイートのIDを埋め込むことくらいです。
具体的にリンクは、<%= link_to "戻る", tweet_path(@comment.tweet_id) %>
のようになります。
コメントテーブルにはtweet_idカラムが入っているはずなので、それを有効活用しましょう。
これですべて終わりです。
実装お疲れ様でした。
続いてコメントにコメントする機能も付けたい方は、以下の記事をお読みください。
【Rails】（後編）投稿のコメントにさらにコメントしよう