Ajaxを実装する

Ajaxとは

Webブラウザ上で非同期通信を行い、ページの再読み込みなしに
ページを更新するためのJavaScriptのプログラミング手法です。

Ajaxを使うことで、スムーズな操作を行うことができます。
いいね機能を実装するときを例に説明します。

Ajaxを使わない場合

①いいねボタンをクリック
②HTMLリクエストが送信される
③コントローラ内のcreateアクション
④dbに保存

Ajaxを使う場合

①いいねボタンをクリック
②JSリクエストが送信される
③コントローラ内のcreateアクション
④create.js.erbを探し、同時にdbに保存

railsでAjaxを使う

form_with

デフォルトでAjaxをフォームで使えます。
もしこの設定を変更したい時は、:localオプションを使います。

<%= form_with(model: @article) do |f| %>

上のコードから以下のHTMLが生成されます。

<form action="/articles" accept-charset="UTF-8" method="post" data-remote="true">

data-remote="true"により、
フォームの送信がAjaxによって送信されるようになります。

link_to

このメソッドには:remoteオプションがあり、
このオプションを設定することで、
Ajaxを使用することができるようになります。

<%= link_to "記事", @article, remote: true %>

上記のコードによって、以下が生成されます。

<a href="/articles/1" data-remote="true">記事</a>

button_to

このメソッドもlink_toと同じようにremote:オプションをつけて
Ajaxを使用することができます。

remote: trueを指定することによって、
レンダリング処理をhtmlではなくjsファイルで実行されます。
なので、コントローラの該当アクションと結びつく.js.erbファイルを実装します。

jsファイル
$("#id名").html("<%= j(render 'likes/like') %>");

上記で使ったhtmlメソッドは、指定した要素("id名")の内容を置き換えています。
指定したid自体は変わりません。
htmlメソッド以外にもreplaceWithメソッドというのもあります。
このメソッドは、指定した要素そのものの内容を置き換えます。
なので指定したid自体を変えてしまします。(上書きのイメージ)

またj(renderは、escape_javascript(renderのエイリアス(別名)です。
パーシャルのレンダリング結果をJavaScriptの文字列として受け取るために必要です。
railsで使う特殊な文字をエスケープさせています。