コメント機能（Ajax）実装

自分用にまとめます。

実装

コントローラー・モデル作成済み

routes.erb

  resources :posts do
    resources :comments, only: [:create, :destroy]
  end

コメントはpostsのshowページで投稿や一覧表示、削除など行うため、createとdestroyのみ作成。

comments_controller.rb

class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.new(comment_params)
    @comment.user_id = current_user.id
    @comments = @post.comments.all
    @comment.save
    render :create
  end

  def destroy
    @comment = Comment.find_by(id: params[:id], post_id: params[:post_id]).destroy
    @comment.destroy
    render :destroy
  end

  private
    def comment_params
      params.require(:comment).permit(:comment, :post_id)
    end
end

redirect_to などで遷移の記述部分を変更。
上記の場合、
createアクションの際は、create.js.erb
destroyアクションの際は、destroy.js.erb
に飛ぶようになっている。

js.erbは後ほど作成するファイル。

posts_controller.rb

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
    @comment = Comment.new
    @comments = @post.comments.all
  end
end

今回はposts/showでコメントの投稿をできるようにする

posts/show.html.slim

# コメント一覧表示
.row
  .col-lg-4
    .col-lg-4

      # create.js.erbで書き換えるため記述必須
      div id="comment-text"

        # コメント一覧部分をパーシャルで飛ばす
        = render 'comments/comment', comments: @comments

    
# コメントフォーム
  .row
    .col-lg-3
    .col-lg-6.text-center
      .frame-post-show

        # jsファイルを呼び出すためにlocal: trueの記述を外す
        = form_with(model: [@post, @comment]) do |f|

          = f.label :comment, class: "font-weight-bold col-lg-3 text-center"
          <br>
          = f.text_area :comment, :size=>"57x5"
          <br>

          .text-center= f.submit "コメントする", class: "btn btn-outline-secondary btn-sm"

_comment.html.slimファイルをcommentsディレクトリ配下に手動で作成
パーシャルで飛ばしたコメント一覧部分を貼り付ける。

comments/_comment.html.slim

- @comments.each do |comment|

  # destroy.js.erbで書き換えるため記述必須
  div id="comment-#{comment.id}"
    .frame-post-comment
      = attachment_image_tag comment.user, :image, fallback: 'noimage.png', size: "50x40", class: "mb-3"
      = link_to comment.user.name, user_path(comment.user)
      - if comment.user == current_user
      
        # jsファイルを呼び出すためにremote: trueを追記
        = link_to '削除', post_comment_path(comment.post, comment), method: :delete, remote: true, data: { confirm: "削除してよろしいですか？" }, class: "btn btn-outline-danger btn-sm m-0 ml-3"
      <br>
      small.m-0= comment.created_at.to_s(:datetime_jp)
      .mt-4.mb-2= comment.comment

create.js.erbファイルをcommentsディレクトリ配下に手動で作成

comments/create.js.erb

#　id="comment-text"部分を_comment.html.slimの内容にページ遷移なしで書き換える
$('#comment-text').html("<%= j(render 'comments/comment',{ comments: @comments }) %>");

# f.text_areaを空にする（記述しないと、投稿した後もフォームにコメント内容が残ったままになる）
$('textarea').val('');

destroy.js.erbファイルをcommentsディレクトリ配下に手動で作成

comments/destroy.js.erb

# "comment-#{comment.id}"を持った投稿を非表示にする
$('#comment-<%= @comment.id %>').remove();

完成！