remote: trueを利用した非同期通信【Ruby on Rails】

非同期通信といえばAjaxを利用するのが一般的？かも知れないけど、

remote: trueを使えば、より少ない記述で非同期化できるのを知り、
便利すぎるので放置していたはてなブログに書いてみようかと思い立った。
とりあえずは、一番簡単だった削除機能の非同期化について。

まずは、削除ボタンを表示しているhtml内の記述。

[index.html.erb]

(〜前略〜)

<%= link_to "削除", product_path(product), method: :delete, class: 'btn btn-sm btn-outline-secondary', remote: true, data: { confirm: '削除しますか？' } %>

(〜後略〜)

前提条件として、Productテーブルの１インスタンスを削除するという場合は
削除ボタン内にremote: trueと記述。
これにより、js形式のリクエストを送るようになります。
厳密にはちょっと違うかも知れないけど、イメージはだいたいそんな感じ。

続いてコントローラの記述

[products_controller.rb]

class ProductsController < ApplicationController
  before_action :set_product

(〜中略〜)

  def destroy
    @product.destroy
    respond_to do |format|
      format.html { redirect_to products_url, notice: '商品を削除しました。' }
      format.js
    end
  end

(〜中略〜)

  private
  def set_product
    @product = Product.find(params[:id])
  end

(〜後略〜)

end

destroyアクション内のrespond_to do |format|内に「format.js」と記述してあげる事で
app/views/productsディレクトリ内にある「destroy.js.erb」ファイルを呼び出します。

続いて、今回の肝となる「destroy.js.erb」内の記述。

[destroy.js.erb]

$("#product-<%= @product.id %>").remove()

見ての通り、たったの一行で終了です。
$("")内に書いているのは、削除したい箱(HTML要素)のid。
そこで指定したidのHTML要素をremove()で削除します。

色々と説明不足かも知れないけど、これにより非同期で@productが削除されるようになります。

以下の記事を参考にするのも良いかも知れません。
qiita.com