Ajaxとは？

ページを更新することなくページの内容だけを入れ替えられる。
ajaxの中核を支えているのはJavacriptの技術。

デメリットもあるらしいがそれを差し引いてもメリットがあると今は理解した。
何から手を出していいのかわからない。

早速実践

ボタン

my_app/app/views/favorites/_favorite.html.erb

<% if current_user.like?(micropost) %>
  <%= button_to user_favorite_path(current_user, micropost), method: :delete remote: :true do %>
    <%= micropost.liked.count %>
    <span style = "color:red;">♡</span>
  <% end %>
<% else %>
  <%= button_to user_favorites_path(current_user, micropost), method: :post remote: :true do %>
    <%= micropost.liked.count %>
    <span >♡</span>
  <% end %>
<% end %>

:remote :trueでAjaxでリンクを処理ができるらしい。

コントローラ

my_app/app/controllers/favorite/favorites_controller.rb

class FavoritesController < ApplicationController
  before_action :logged_in_user, only: [:create, :destroy]
 
  def create
    @micropost = Micropost.find_by(id: params[:format])
    current_user.like(@micropost)
    respond_to do |format|
      format.html { redirect_to request.referer }
      format.js { redirect_to request.referer }
    end
  end
  
  def destroy
    @micropost = Micropost.find_by(id: params[:id])
    current_user.unlike(@micropost)
    respond_to do |format|
      format.html { redirect_to request.referer }
      format.js 
    end
  end
end

MVCのことを考えながら見てみると、
ボタン（オプション引数を使って）でコンローラに行ってビューに表示させる。
それにあっているのかな？

JavaScriptが有効になっていても、まだ十分に対応できていない部分があります。
というのも、Ajaxリクエストを受信した場合は、
Railsが自動的にアクションと同じ名前を持つJavaScript用の埋め込みRuby（.js.erb）ファイル（create.js.erbやdestroy.js.erbなど）を呼び出すからです。

ユーザーをフォローしたときやフォロー解除したときにプロフィールページを更新するために、
私たちがこれから作成および編集しなければならないのは、まさにこれらのファイルです。

予想

ファイルを小分けにする理由はリアクションを早くするためなのかもしれない。

jqueryを使う

CSS idで指定する

ドル記号（$）とCSS idを使って、DOM要素にアクセスする文法について知る必要があります。
例えばfollow_formの要素をjQueryで操作するには、次のようにアクセスします。

$("#follow_form")

jQueryの文法はCSSの記法から影響を受けており、#シンボルを使ってCSSのidを指定します。

HTMLに表示させる

指定された要素の内側にあるHTMLを、引数の内容で更新します。
例えばフォロー用フォーム全体を"foobar"という文字列で置き換えたい場合は、
次のようなコードになります。

$("#follow_form").html("foobar")

create.js.erbファイルでは、フォロー用のフォームをunfollowパーシャルで更新し、
フォロワーのカウントを更新するのにERbを使っています

予想

できるだけ小さいファイルにする方がいいのかな？

ビュー

app/views/microposts/_micropost.html.erb

<li id="micropost-<%= micropost.id %>">
.
.
.
    <%= render 'microposts/favorite', micropost: micropost %>
.
.
.
</li>

app/views/microposts/_favorite.html.erb

<div id="like_form">
<% if current_user.like?(micropost) %>
  <%= render "microposts/unlike", micropost: micropost %>
<% else %>
  <%= render "microposts/like", micropost: micropost %>
<% end %>
</div>

app/views/microposts/_unlike.html.erb

<%= button_to user_favorite_path(current_user, micropost), method: :delete ,remote: true do %>
    <%= micropost.liked.count %>
    <span style = "color:red;">♡</span>
<% end %>

app/views/microposts/_like.html.erb

<%= button_to user_favorites_path(current_user, micropost), method: :post, remote: true do %>
    <%= micropost.liked.count %>
    <span >♡</span>
<% end %>

エラー　ActionController::UnknownFormat

app/views/favorites/create.js.erb

$("#like_form").html("<%= escape_javascript(render 'microposts/like', micropost: @micropost) %>");

app/views/favorites/destroy.js.erb

$("#like_form").html("<%= escape_javascript(render 'microposts/unlike', micropost: @micropost) %>");

<% if current_user.like?(micropost) %> <%= render "microposts/unlike", micropost: micropost %> <% else %> <%= render "microposts/like", micropost: micropost %> <% end %>

できなかった。

current_user.like?(miropost)でcurrent_userがうまく機能しないらしい。
これからまた勉強し直して必ず身を結べるように努力する

いいね Ajaxにする