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時間のプログラミング学習に耐え抜くコツ」という記事がおすすめです。