微炭酸ログ

Ruby や Rails を中心に。

Turbo Streams を学ぶ

Turbo Rails

基本

以下のように Turbo Streams なレスポンスを返すと、指定した id（この例だと id="messages"） の要素に対してストリームアクション（この例だと prepend）できます。

指定したDOMだけに変更を加えることができるので、よりSPAっぽくなります。

ストリームアクションに使うHTML片を生成するために、部分テンプレートが使用できます。
（ partial: 'messages/message', locals: { message: message } のところ）

def create
  message = @room.messages.create!(message_params)
  render turbo_stream: turbo_stream.prepend(:messages, partial: 'messages/message', locals: { message: message })
end

ストリームアクションは5種類ある

ストリームアクションは以下の5種類があります。

  • append：後尾に追加する
  • prepend：先頭に追加する
  • replace：DOMごと置換する
  • update：DOMのコンテンツを更新する
  • remove：削除する

xxxxx.turbo_stream.erb を使う書き方もある

コントローラに書かずに別にファイルを用意することもできます。

↓ app/controllers/messages_controller.rb

def create
  @room.messages.create!(message_params)
end

↓ app/views/messages/create.turbo_stream.erb

<%= turbo_stream.prepend 'messages' do %>
  <%= render partial: 'messages/message', locals: { message: @message } %>
<% end %>

一度に複数のストリームアクションが動くようにもできる

以下のように、一度に複数のストリームアクションが動くようにもできます。

<%= turbo_stream.remove 'new_message' %>
<%= turbo_stream.prepend 'messages' do %>
  <%= render partial: 'messages/message', locals: { message: @message } %>
<% end %>

参考