Ajaxについて【自分用】 #Ruby

【概要】

Ajaxについて。になります。
前回も記事を執筆したのですが、自分の中の理解度チェックも兼ねて再度執筆します。

【環境】

・rails7系

【turbo_streamとは】

「turbo_stream」とは以下の機能を持っております。

・複数箇所のHTML要素を更新することが可能。
・HTML要素の追加・削除が可能。

ちなみに、これと対をなすものが「Turbo Frames」になります。
違いは下記です。

・タグで囲った1箇所のみ更新可能。
・HTML要素の置換しか対応できない。

【基本的な使用方法】

【書き方】

#<%# turbo_stream.<アクション名> <ターゲットのid>, <追加するオブジェクト> %>
<%= turbo_stream.prepend "cats", @cat %>

実際は下記を省略したものですが、意味だけ抑えておく。でもいいと思います。

<%= turbo_stream.prepend "cats" do %>
  <%= render partial: "cates/cat", #renderは省略可能。
             locals: { cat: @cat } %> #renderのオプションも省略可能。
<% end %>

【7つのメソッド】

下記は基本形のメソッドです。

構文	意味
prepend	先頭に要素を追加する。
append	末尾に追加する。
before	指定したturbo frameの前に要素を追加する
after	beforeの逆
replace	ターゲット要素も含めて更新
update	ターゲットの要素のコンテンツのみ更新
remove	削除する

一つ、例にとって見てみましょう。

①ajax化したいviewファイルを作成

xxx.controller.rb

def create
  @message = Message.new(message_params)
  if @message.save
    render turbo_stream: [
      turbo_stream.replace("new_message_form", partial: "form", locals: { message: Message.new }),
      turbo_stream.append("message_list", partial: "message", locals: { message: @message })
    ]
#2つ以上の要素を使用する場合は、配列で表示。
#1つの場合は、省略可能。
  else
    # エラーメッセージを返すなどの処理
  end
end

②

new.html.erb

<h1>Create a New Message</h1>

<!-- メッセージフォーム -->
<div id="new_message_form">
  <%= turbo_frame_tag "new_message_form" do %>
    <%= render "form", message: Message.new %>
  <% end %>
</div>

<!-- メッセージリスト -->
<div id="message_list">
  <%= turbo_frame_tag "message_list" do %>
    <%= render @messages %>
  <% end %>
</div>

③

app/views/messages/create.turbo_stream.erb

<%= turbo_stream.replace "new_message_form", partial: "form", locals: { message: Message.new } %>
<%= turbo_stream.append "message_list", partial: "message", locals: { message: @message } %>

Ajaxについて【自分用】