この記事を書いた理由
RubyonRailsのサンプルやポートフォリオ作成時に
非同期化について勉強しましたがなんとなくのイメージで
非同期化 = おー、カッコイイ！！
このままではダメだと思ったのと、純粋に興味があったので書きたいと思いました。
Ajaxの非同期化について
そもそも非同期化について深く理解する為にこちらの記事を参考にさせていただきました。
個人的にとても分かりやすいです。
Railsで非同期化を実装
Rails 6.1.7.3
①まずは非同期化したい箇所を部分テンプレート化
②対象のviewファイルでidの設定とHtmlからJavascriptで読み込まれるように設定
# 部分テンプレート適用ファイル
<div id="favorite_buttons_<%= @article.id %>">
<%= render "public/favorites/favorite", article: @article %>
# 部分テンプレートファイル
<%= link_to article_favorites_path(article), method: :post, remote: true do %>
idの設定(id="favorite_buttons_)ですが、これはコントローラで設定したアクション後に
Javascriptでこのidを頼りにviewを探しにいくので大切な設定です。
(区別化や一意性を目的として特定させるイメージ)
※ちなみにForm_withの場合は、自動でidが付与されるので不要。
(モデル名_カラム名がidになる。
モデル名がfavorite、カラム名がlikeだと、favorite_likeというidになる。)
またremote: trueのオプション設定することにより、viewの読み込みがHTMLからJavascriptに変わる。
ターミナルの表記が「Processing by ~ as HTML」から「Processing by ~ as JS」に変わればOK。
③コントローラでjsファイルを読ませる為に、アクション後のredirect_toはコメントアウト。
これでアクション内にrenderもredirect_toもない場合は
「app/views/コントローラ名/アクション名.js.erb」を読み込むようになる。
renderを用いた場合は指定した名前のjs.erbを読み込みます。
def create
@article = Article.find(params[:article_id])
favorite = current_user.favorites.new(article_id: @article.id)
favorite.save
# redirect_to article_path(article)
end
④js.erbを作成する
(例)
- app/views/favorites/create.js.erb
- app/views/favorites/destroy.js.erb
⑤コードを記述する
$('#favorite_buttons_<%= @article.id %>').html("<%= j(render "public/favorites/favorite", article: @article) %>");
この$()のカッコ内をセレクタで今回は#favorite_buttons_を指定してます。
※ちなみに「#」がidを意味しており「.」にするとクラス要素にできる。
<%= %>を用いて@article.idを記述。
この@articleは、コントローラのcreateアクション内で定義された@articleです。
.html(~)でビューで部分テンプレートを呼び出すのと同じ記述。
j()はescape_javascript()の省略形。
js.erbファイルで部分テンプレートを呼び出す際に必要な書き方。
これでコントローラを通って最新の状態になったインスタンス変数を用いて、
部分テンプレートで書き換える、という動作になる。
以上となります。
間違いや修正があれば対応していきます。
最後までありがとうございました。