Railsでremote: trueを使ったAjax処理を実装する

RailsでAjax処理を実装する方法をまとめます。

今回は、掲示板（board）をフォローする／フォローを外す処理をAjaxで実装してみます。

Ajaxの処理を実装する前に、Gemfile、application.html.erb、application.jsからturbolinksを除いておきます。

ルーティングを設定する

まず、routes.rbでルーティングを設定します。フォローする／外すをfollows#createとfollows#destroyで実装します。

  resources :boards do
    resources :follows, only: [:create, :destroy]
  end

コントローラーの実装

follows#createとfollows#destroyはそれぞれ以下のとおりです。

    def create
        follow = Follow.create(user_id: current_user.id, board_id: params[:board_id])
        @board = Board.find_by(id: params[:board_id])
    end


    def destroy
        follow = Follow.find_by(user_id: current_user.id, board_id: params[:board_id])
        @board = Board.find_by(id: params[:board_id])
        follow.destroy  
    end

Viewファイルの実装

どの掲示板（board）のフォローをする／外すかをJavascriptから識別するために、idをつけておきます。今回は、フォロー／アンフォローによって表示を差し替える部分は、部分テンプレート（_follow.html.erb）で書いています。

    <div id="follow_<%= @board.id %>" >
    <%= render "follow", board: @board %>
</div>

その部分テンプレート_follow.html.erbは下記のようになります。

色々書いていますが、大事な部分は、follows#createとfollows#destroyを呼び出すリンクにremote: trueを設定することです。remote: trueを設定することで、viewファイルとしてcreate.js.erbとdestroy.js.erbを呼び出すことができ、Javascriptによって、viewファイルを非同期で書き換えることができます。

<% if board.follow_user(current_user.id) %>
    <%= link_to board_follow_path(board_id: board.id, id: board.follow_user(current_user.id).id), method: :delete, remote: true do %>
        <i class='fas fa-star'>
<% else %>
    <%= link_to board_follows_path(board.id), method: :post, remote: true do %>
        <i class='far fa-star'>
<% end %>

create.js.erbとdestroy.js.erbはどちらも下記となります。クリックされたidのついているdivの箇所だけが、部分テンプレート_follow.html.erbを再読込するように書かれています。

$('#follow_<%= @board.id %>').html("<%= escape_javascript(render 'follow', board: @board) %>");

これで完了です。

Ruby on Railsをこれから本格的に勉強したい人は「エンジニアになるための600時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。