Ruby on Rails

【Ruby on Rails5.2】RailsにおけるAjaxの考え方と使い方

  /

・RailsでAjaxを使う方法

はじめに

AjaxとはAsynchronous JavaScript XMLの略で非同期通信でありWebブラウザ上で、非同期通信を行うことでページの再読み込みを行わずに結果を反映する方法でありWeb界隈では必須の処理です。
RailsではAjaxをサポートしているため手軽にAjax処理を行うことが出来ます。

【Ruby on Rails5.2】RailsにおけるAjaxの考え方と使い方 ・RailsでAjaxを使う方法 はじめに AjaxとはAsynchronous JavaScript XMLの略で非同期...

Ajaxを使う方法

ビュー

ビュー側では、Ajaxを行いたいイベント（データ削除イベント等）に対して「remote: true」オプションを追加します。

下記のSlimコードでは、一覧画面上にある削除イベントをAjaxを利用しています。

link_to '削除', task, method: :delete, remote: true, data: { confirm: "タスク「#{task.name}」を削除します。よろしいですか？"}, class: 'btn btn-danger delete'

link_toメソッドに「remote: true」オプションが追加しています。
これで削除のイベントが発生したときに非同期通信が行われます。

コントローラー

通信後に行う処理は下記コントローラーで行います。

def destroy
  @task.destroy
  head :no_content
end

2行目は単純な削除処理です。
3行目のheadは削除処理の後に結果を返すレスポンスボディを空（正常終了）で返却しています。

画像では表現が難しいですが、削除ボタンを押した後に対象データに対する削除処理が行われています。
ただし、画面上は読み込みを行っていない関係上データは表示され続けているため正常終了後は対象データが画面上からも消えているように見せかけるため非表示にする必要があります。

非表示方法については色々ありますがRailsにはTurbolinks機能があるため、有効にしている場合は注意が必要です。

document.addEventListener('turbolinks:load', function(){
    document.querySelectorAll('.delete').forEach(function(a){
        a.addEventListener('ajax:success', function(){
            var td = a.parentNode;
            var tr = td.parentNode;
            tr.style.display = 'none';
        });
    });
});

Rails5でのform_withについて

基本的には「remote: true」でAJAXリクエストになるのですが、form_withはデフォルトでAJAXリクエストを行っています。
AJAXリクエストを無効にするには「local: true」オプションを設定します。

form_with model: @task, local: true do |f|

なお、Rails6.1以降では form_withもデフォルトAJAXリクエストは無効となっています。
Rails 6.1で form_withのデフォルトが「remoteなし」になった（翻訳）
https://techracho.bpsinc.jp/hachi8833/2021_01_22/103256

RELATED POST