⭐️コメント投稿、削除機能のajax化

前回に続き、ajax化
今回はコメント投稿、削除機能をajax化していきます！
（コメント編集機能も実装しました）

手順

1 . コメントコントローラを修正
2 . コメント作成、削除処理をajax化
3 . コメント作成、削除時の動的レンダリング処理を追加

1 . コメントコントローラを修正

・上記createアクションに記載していた下記を削除し、コメント削除処理を追加。

if @comment.save
    redirect_to board_path(@comment.board_id), success: t('defaults.message.created', item: Comment.model_name.human)
  else
    redirect_to board_path(@comment.board_id), danger: t('defaults.message.not_created', item: Comment.model_name.human)
  end

・定義したdestroyアクションをルーティングに追加します。

2 . コメント作成、削除処理をajax化

・form_withのlocal: trueを削除して非同期処理にします。
（form_withはデフォルトでremote: trueの設定になっているため記述しなくても良い）

・コメントの削除ボタンlink_toにremote: trueを追加します。

3 . コメント作成、削除時の動的レンダリング処理を追加

・コメントの追加に成功した場合、追加したコメントをコメント一覧に追加する処理をjavascriptで実装します。
・また、コメントの追加に失敗した場合は、エラーメッセージを表示するようにします。

・app/views/comments/create.js.erb

$("#error_messages").remove()
<% if @comment.errors.present? %>
  $("#new_comment").prepend("<%= j(render('shared/error_messages', object: @comment)) %>")
<% else %>
  $("#js-table-comment").prepend("<%= j(render('comments/comment', comment: @comment)) %>")
  $("#js-new-comment-body").val('')
<% end %>

・コメントの追加と同様に、コメントの削除した時にコメントリストから対象のコメントを取り除きます。

・app/views/comments/destroy.js.erb

$("tr#comment-<%= @comment.id %>").remove();

✅総括

ajax化を実装する流れは頭に入ってきましたが、
手順3のコメント作成、削除時の動的レンダリング処理の実装での、
Javascriptの記法に前回に引き続き慣れないので、Javascriptの記法さえ頭に入れられればスイスイコードが書けそう。
Railsでは今後もJavascriptも使うことがたくさんありそうなので、ajax化する時にまた復習しながら進めていきたいです！