Railsでajax削除の実装

はじめに

今回はrailsとjsを使って非同期の削除機能を実装していきます。
素のjsの学習のためにjQueryは使用していませんのでご了承下さい。また、プログラミング初学者のため間違い等ありましたらご指摘の程よろしくお願いします！

そもそもajaxって何？

ajaxとは非同期通信とも言われ、画面の遷移を行わずに画面の変更部分のみに変更を加える処理の事です。
これによって無駄なレンダリングをしないのでロード時間も短縮され、ユーザーが快適にサービスを使う事ができます。
ちなみに同期通信は画面全体を再描画するため、例え変更された部分が一部分だとしても画面全体がレンダリングされてしまいます。使っているユーザーからすると少しストレスを感じてしまう可能性があるのです。

同期通信と非同期通信の処理の違い

同期通信は削除が行われると指定のコントローラのアクションに移動し、アクション名.html.erbファイルを探します。
それに対し非同期通信は指定のコントローラーのアクションを実行するまでは同じですが、その後、アクション名.js.erbファイルを探しにいきます。これらの処理の流れを意識してこの後の実装をしてみて下さい

手順１ remote: trueオプションを追加

<li><%= link_to '削除', category_path(category.id), method: :delete, remote: true, class:'category-destroy' %></li>

link_toの記述にremote: trueを追加します。
これだけでHTML形式からJS形式でリクエストを送る事ができます。

手順２　destroy.js.erbファイルにjsの処理を記述

remote: trueを追加した事でjsファイルを探しにいきます。さらにjs.erbを使う事でjsの記述の中にrubyの文法を埋め込む事ができます。こちらのファイルはあくまでビューファイルとして扱うので対応するviewsフォルダ内に格納して下さい。
querySelector("#category-<%= @category.id %>")で削除したい情報を渡しています。
.remove()で指定の対象を削除しています。
これらの記述でビューで特定の要素を消す事ができます。
ちなみにjsの記述をしなくてもDB上からは削除されていますが、リロードしない限り画面から消えないためjsの記述が必要になります。

app/views/categories/destroy.js.erb

(function(){
  document.querySelector("#category-<%= @category.id %>").remove()
})();

最後に

これで非同期通信による削除機能が完成です！
railsを使っての非同期通信はとても簡単に実装できるので初学者の方も是非使ってみて下さい！
この記事で初学者の助けになれば幸いです。
何か間違えなどあればご指摘お願いします！