Ajax化する

困ったこと

現状、ライクボタンを押すとページが更新されて、またページ最上部に戻ってしまいます。なのでオピニオンページに戻る場合にはとても面倒です。

Ajaxで解決する

これを解決する為に、Ajaxを実装していきます。

Ajaxはページを更新せず一部分を変更できる技術です。以下のように場所はそのままでボタンが押せるようになります。

RailsでAjaxを作成する手順

RailsでAjaxを作成することは簡単です。以下の3ステップでAjaxを実現することができます。

• 1. 変更したい部分をパーシャル化する
• 2. コントローラでAjaxを可能にする
• 3. Ajax用のjsファイルを作成する

それではさっそくやってみましょう。

1. 変更したい部分をパーシャル化する

Ajaxを実装するにはまず、Ajax化したい部分をパーシャルにします。今回変更したいところはボタン部分ですよね。

まずlike.html.erbをopinionsフォルダの中に作成します。そして今まであったボタン部分のコードををlike.html.erbに移てください。

# opinions/_like.html.erb

<% if @like.new_record? %>
  <%= button_to "#{@opinion.likes.count} いいね", [@opinion, @like], class: 'btn btn-danger' %>
<% else %>
  <%= button_to "#{@opinion.likes.count} いいねを取り消す", [@opinion, @like], class: 'btn btn-default', method: :delete %>
<% end %>

そして大事なのは<%= button ~ %>の中にremote: trueを加えることです。これを書くことによってこのリクエストはAjaxで行われるようになります。つまりページの更新は行わずリクエストのみを送る事が出来るようになります。

次に、パーシャルをdivタグで囲みclassもしくはidを付与します。なぜclassかidを付与するかと言うと、後でAjaxで変更する部分を特定出来るようにするためです。

# opinions/show.html.erb

<div class="like">
  <%= render 'opinions/like' %>
</div>

2. コントローラでAjaxを可能にする

respond_toの中にformat.jsと追加しましょう。これは、Ajaxリクエストの場合JS形式で返すという意味です。

# likes_controller.rb

respond_to do |format|
  if @like.save
    format.html { redirect_to opinion_path(@like.opinion),  notice: 'Like was successfully created.' }
    format.js

3. Ajax用のjsファイルを作成する

Ajaxリクエストでcreateアクションが呼ばれた場合、同名のjs.erbファイルが実行されます。「app/views/コントローラ名/アクション名.js.erb」の形で作成します。今回は「likes/create.js.erb」を作成しましょう。そして、以下のように記述して下さい。

# likes/create.js.erb

$(".like").html("<%= j render 'opinions/like' %>")

これは、作成されたライクを反映したページを表示するという内容です。では、うまくいっているかブラウザで確認してみましょう。以下のように、同じとろこで更新されていればOKです。