ブックマークボタンのajax化について

どうもどハマりエンジニアです。

本日はajaxについて説明してくよ！

 

ajaxとは、Asynchronous JavaScript + XML の略で、非同期通信と呼ばれる通信方法のことを指す。

railsにおいてajax通信を実装する場合二通りある。

  • remote: trueを指定する方法
  • JSファイルに任意のタイミングでajax処理を発火させるように記述を施す方法

 

今回はremote:trueを使い実装していく。

 

＜処理の流れ＞

リンクボタンをクリックした時、ルーティングを経由してアクションに、remote:trueオプション付きで遷移する。いつもならhtml.erbにいくが、今回はremote:trueに設定しているので、html.erbにいくのではなく、js.erbに向かうことになる。

 

ではここからはブックマークをajax化させて処理を書いていく

 

 

remote:trueに直していく

(_unbookmark.html.erb)

<%= link_to board_bookmarks_path(board.id),
method: :post, remote: true,
id: :"js-bookmark-button-for-board-#{board.id}" do %>
<%= icon 'far', 'star' %>
<% end %>

(_bookmark.html.erb)

<%= link_to board_bookmarks_path(board.id),
method: :delete, remote: true,
id: :"js-bookmark-button-for-board-#{board.id}" do %>
<%= icon 'fas', 'star' %>
<% end %>

まずはremote:trueを追加する。

idは必ず一つのhtmlの中では被らないようにしないといけない！

 

 

ブックマークのコントローラを修正していく

(bookmarks_controller.rb)

class BookmarksController < ApplicationController
def create
@board = Board.find(params[:board_id])
current_user.bookmark(@board)
end

def destroy
@board = current_user.bookmarks.find_by(board_id: params[:board_id]).board
current_user.unbookmark(@board)
end
end

 

ユーザーモデルにメソッドを作ろう！（コントローラーに明示的に何をしているかわかるように）

 

(user.rb)

def bookmark(board)
bookmark_boards << board
end

def unbookmark(board)
bookmark_boards.destroy(board)
end

一つ目のメソッドは、これは「ブックマークをする」という動作を明示的に書くことによって可読性を高めるために作成したメソッド。もし一つ上のコントローラにて別の書き方をするならば、

def create
  board = Board.find(params[:board_id])
  Bookmark.create(user: current_user, board: board)
  # 省略
end

このように書くことが出来るとのこと。

つまりこれは「bookmark_boards << board」はBookmark.create　的な感じかな。難しいよ・・・

 

あとはjs.erbを作っていこう

(views/bookmarks/create.js.erb)

$("#js-bookmark-button-for-board-<%= @board.id %>").
replaceWith("<%= j(render('boards/bookmark', board: @board))%>");

上段はviewで作成したid

下段は入れ替わり後に表示するテンプレート

ちなみに入れ替わり後のテンプレートはこれ

<%= link_to board_bookmarks_path(board.id),
method: :delete, remote: true,
id: :"js-bookmark-button-for-board-#{board.id}" do %>
<%= icon 'fas', 'star' %>
<% end %>

fas,starは色が塗ってある星マーク。

つまり色なしから色ありに変わるということ。

逆にdestroyのコードも作っていこう。

 

(views/bookmarks/destroy.js.erb)

$("#js-bookmark-button-for-board-<%= @board.id %>").
replaceWith("<%= j(render('boards/unbookmark', board: @board)) %>");

これはcreateとほぼ同じである。

 

 

以上でajax処理が出来た！

正直他のパターンを複数やらないとわからないかもしれない・・・

ご視聴ありがとうございました。