Hotwireの機能のうち、Turbo StreamsもTurbo Frames（前の記事でまとめました）と同じくページの一部のHTMLによるページの部分更新を実現したものですが、Turbo StreamsはデータでいうCRUDにあたる、内容の追加・更新・削除をしやすくしてあります。こちらも見てみましょう。

Railsでの用例の話をします
記事の読者はRailsの基礎は知っているものとします
Rails7.0.4 + Ruby3.1.2 で動作させています

おおまかな流れ

HTTPに載せて使用する場合は、Turbo Framesのおおまかな流れと同じく、サーバーがレスポンスで返してきたページの一部のHTMLを使って部分更新をします。なので通信の流れ自体は同じです。これから述べるHTMLの内容の違いに注目しましょう。

Turbo StreamsはWebSocketに載せて使用する事もできます。この場合はサーバーからプッシュされてくるページの一部のHTMLを使って部分更新をします。（この記事では詳しくは扱いません）

実装

「ランダムな数字のリスト」というアプリを考えます。

app/controllers/randoms_controller.rb

class RandomsController < ApplicationController
  def index
  end

  def append
    @random = rand(1000)

    respond_to do |format|
      format.turbo_stream { render partial: 'append' }
      format.html         { redirect_to randoms_url }
    end
  end
end

app/views/randoms/index.html.erb

<div id="randoms">
</div>

<%= form_with url: append_randoms_path do |f| %>
  <%= f.submit '末尾に追加' %>
<% end %>

app/views/randoms/_append.html.erb

<%= turbo_stream.append "randoms" do %>
  <div>
    <p><%= @random %></p>
  </div>
<% end %>

ここで重要なことは、

html,csv,jsonなどと同じようにturbo_streamという新しいファイルタイプを扱う
- Content-Typeは text/vnd.turbo-stream.html
HTML要素のid属性が軸になっている

ということです。

動作

「末尾に追加」ボタンを押すと、以下のように遷移していきます。

乱数のリストができ、ボタンを押すごとにその末尾に新しい乱数が追加されます。

HTMLの内容を見ていきましょう。まずは最初のページ。

<!DOCTYPE html>
<html>
  <head>
    （省略）
  </head>

  <body>
    <div id="randoms">
    </div>

    <form action="/randoms/append" accept-charset="UTF-8" method="post">
      <input type="hidden" name="authenticity_token" value="L1QHIa7HLjySDpbW1pRtDeXSPzNJcrzZUcqZz9YF94iS2jjuHb64OVjFZo_UlyS1musQ27mngC6GPaD4lgalow" autocomplete="off" />
      <input type="submit" name="commit" value="末尾に追加" data-disable-with="末尾に追加" />
    </form>
  </body>
</html>

次に、「末尾に追加」リクエストのレスポンスです。

<turbo-stream action="append" target="randoms">
  <template>
    <div>
      <p>66</p>
    </div>
  </template>
</turbo-stream>

このturbo-streamタグの内容に従って、Turbo Streamsはrandomsというid属性を持った要素にtemplateタグの中身をappend（innerHTMLの末尾に追加）します。

実際にどうなっているかをChromeのデベロッパーツールで見てみると、

このように、div要素の中に乱数のリストが作られていることがわかります。

Turbo Streamsでできる動作

今回の実装例ではappend（innerHTMLの末尾に追加）を使いましたが、他にも以下の動作が可能です。

prepend（innerHTMLの先頭に追加）
replace（要素をまるごと置き換える）
update（innerHTMLを置き換える）
remove（要素を取り除く）
before（要素の直前に追加）
after（要素の直後に追加）

これらを使えば、ちょっとしたTODOリスト的なものであれば（JSを書くことなく）作ってしまうことができます。

また、WebSocketと合わせて使えばかんたんなチャットを作るのも難しくないでしょう。

終わり

最初は基本的なRailsアプリで作っておいて、ページ全部切り替えてると遅いなーとなるようなところに段階的にTurbo Frames/Streamsを投入していく、というような開発の仕方がやりやすそうです。

次はStimulusについて…たぶん…書きます。

参考にした記事