ブログなどの投稿ページにマストなコメント投稿、削除機能をAjaxを用いて動的に作ってみました。コメント投稿、削除でいちいちページ遷移するより圧倒的に使いやすいです。
ネット上に自分の求めていたジャストの記事が無かったので、今回の実装をまとめてみました！
個人ブログに同様の内容を書いておりましたが、技術的な内容はQiitaに集約することにしたので、こちらにも投稿します。
（参考）個人ブログ
投稿ページの実装、JQueryの読み込みはできている前提です。
※ バージョンは、Ruby：2.3.0、Rails：5.1.4です。
スキーマ（コメントテーブル）
create_table "comments", force: :cascade do |t|
t.text "content"
t.integer "post_id"
t.integer "user_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end
どの投稿に対するコメントであるかを格納するために「post_id」、誰の投稿であるかを格納するために「user_id」カラムの作成が必要です。
モデル（アソシエーション設定）
belongs_to :user
belongs_to :post
validates :content, presence: true
ユーザーはたくさんのコメントを持てる、投稿はたくさんのコメントは持てると、一対他（ユーザー・投稿：一、コメント：他）の関係になっているので、コメントのモデルは「berongs_to」でのアソシエーションになります。
コメントの内容が無いとコメントの意味が無いので、コメント内容必須のバリデーションを設定しています。
belongs_to :user
has_many :comments, dependent: :destroy
ユーザーはたくさんの投稿を持てる、投稿はたくさんのコメントを持てる、の関係なので投稿のアソシエーションはこのようになります。
「dependent: :destroy」は、この場合「投稿が削除された時に、同時にコメントも消去する」という意味です。
コメントだけ残ってしまっても意味が無いので記載が必要です。
has_many :posts, dependent: :destroy
has_many :comments, dependent: :destroy
同様の考え方です。
ルーティング
resources :posts do
resources :comments
end
コメントがどの投稿へのものであるかを識別するために、ルーティングのURLに投稿のIDを含める必要があります。
具体的には「/post/12/comment/」といったURLになります。（ネストする、と言います。）
12がpost_idです。
（参考）Rails のルーティング | Rails ガイド
コメントコントローラー
def create
@post = Post.find(params[:post_id]) #①
@comment = @post.comments.build(comment_params) #②
@comment.user_id = current_user.id #③
if @comment.save
render :index #④
end
end
def destroy
@comment = Comment.find(params[:id]) #⑤
if @comment.destroy
render :index #⑥
end
end
private
def comment_params
params.require(:comment).permit(:comment_content, :post_id, :user_id)
end
createアクション：
#①：コメントをする対象の投稿(post)のインスタンスを作成します。
#②：「.build」を使うことで、@postのidをpost_idに含んだ形でcommentインスタンスを作成します。
「.new」で普通にインスタンスを作成して、次の行でpost_idを入れても同じです。
（参考）build - リファレンス - - Railsドキュメント
#③：現在のuserのidを入れます。
#④：保存がされると、render :indexによって「app/views/comments/index.js.erb」を探しにいきます。
「form_with」でフォームを送信した時は、デフォルトでjsファイルを探しにいく設定になっています。
htmlファイルを探しにいってほしい場合には、form_withの後に「local: true」と記載する必要があります。
（参考：form_withについて）rails-ujs と form_with の使い方 - ボクココ
（参考：renderについて）レイアウトとレンダリング | Rails ガイド
destroyアクション：
#⑤：削除する対象のコメントインスタンスを探します。
#⑥：削除がされると、「index.js.erb」を探しにいきます。
削除のリンクを記載している「link_to」の中に「remote: true」を記載していることでjsファイルを探しにいってくれます。（app/views/comments/_index.html.erb に記載しています。）
「remote: true」を記載していなかった場合は、htmlファイルを探しにいきます。
投稿のコントローラー
def show
@post = Post.find(params[:id])
@comment = Comment.new #①
@comments = @post.comments #②
end
どちらも、投稿のビュー「app/views/posts/show.html.erb」でパーシャルに渡す変数として使用します。
#①：入力フォームで使用するインスタンスを作成しています。
#②：コメント一覧表示で使用するためのコメントデータを入れています。
投稿のビュー
<div>
<h4>コメント</h4>
<div id="comments_area"><!-- #① -->
<!-- 投稿されたコメント一覧をブログの詳細ページに表示するためのrender -->
<%= render partial: 'comments/index', locals: { comments: @comments } %>
</div>
<% if user_signed_in? %>
<!-- コメント入力欄をブログの詳細ページに表示するためのrender -->
<%= render partial: 'comments/form', locals: { comment: @comment, post: @post } %>
<% end %>
</div>
#①：「id="comments_area"」がポイントです。
このidをターゲットにして、このdiv内をAjaxで書き換えます。
このdivの内側に、renderを使ってパーシャルを表示します。
@commentをパーシャル内で使うローカル変数commentとして渡しています。
（参考：パーシャルを利用するときのrenderの使い方について）
render - リファレンス - - Railsドキュメント
（参考：ローカル変数について）Railsの部分テンプレートからインスタンス変数を参照するのはやめよう。
どちらもとても勉強になりました。
パーシャル部分のビュー
<% comments.each do |comment| %>
<% unless comment.id.nil? %>
<p><%= link_to "#{comment.user.name}さん", user_path(comment.user.id) %></p>
<p>コメント：<%= comment.content %></p>
<% if comment.user == current_user %>
<p><%= link_to 'コメントを削除する', post_comment_path(comment.post_id, comment.id), method: :delete, remote: true %></p>
<% end %>
<% end %>
<% end %>
パーシャルはファイル名の先頭に「_」を入れます。
投稿のビューから渡したローカル変数(comments)を comment に入れて一つずつ表示しています。
ポイントは、コメントの削除のところで「(comment.post_id, comment.id)」と投稿のidとコメントのidを渡す必要があることと、5. コメントコントローラーのところでも触れましたが「remote: true」をつけることによって、コントローラーでjsファイルを探しにいってもらうことです。
idをcomment.post_idとcomment.idの2つ渡す必要があるのは、削除したいコメントを指定するには「post/12/comment/31」のようにpost_idとcomment_idを指定する必要があるためです。
<%= form_with(model: [post, comment] ) do |form| %>
<div>
<%= form.text_area :comment_content %>
</div>
<div class="actions">
<%= form.submit "コメントをする" %>
</div>
<% end %>
ポイントは、「model: [post, comment]」とすることです。
post, commentはそれぞれ、7. 投稿のビューで渡しているインスタンスのローカル変数です。
投稿に紐づいたコメントを生成するため、ここでpost、commentのインスタンスを渡すことが必要になります。
jsファイル
$("#comments_area").html("<%= j(render 'index', { comments: @comment.post.comments }) %>")
$("textarea").val('')
とてもシンプルです。
このファイルに、7. 投稿のビューの中で id = "comments_area"とした箇所を書き換える処理を記載しています。
「$("#comments_area")」が id = "comments_area"をターゲットとする記載です。
ターゲットとした箇所を、「render 'index'」で指定している8. パーシャル部分のビューの内容で書き換えています。
{ comments: @comment.post.comments }で、@comment.post.comments をローカル変数 comments に入れて渡しています。
@comment.post.comments は、コメント一覧表示するのに必要なコメント全件です。
「$("textarea").val('')」によって、コメント入力後のコメント入力欄を空にしています。
最後に
以上で、Ajaxを用いた動的なコメント投稿・削除機能が実装できたはずです！
※分かりやすくするために、デザイン面のbootstrapに関するコードは消しています。
間違っている箇所、分かりにくい箇所等あれば是非教えてください！