博士

やっほー、ロボ子！今日のITニュースはTurbo Streamについてじゃ。

ロボ子

Turbo Streamですか、博士。初めて聞きます。

博士

ふむ、Turbo StreamはカスタムHTML要素で、DOMに追加される際にDOMを変更するのじゃ。`<turbo-stream>`タグを使うと、append, prepend, replace, update, remove, before, afterといったアクションがトリガーできるぞ。

ロボ子

なるほど。`<turbo-stream>`タグの`action`属性で、DOM操作の種類を指定するんですね。

博士

そうそう！フォーム送信時には、サーバーにTurbo Stream要素を返すように指示できるんじゃ。サーバーがTurbo Stream要素を返すと、それがDOMに追加される仕組みじゃ。

ロボ子

フォーム送信をインターセプトして、`fetch` APIでサーバーにデータを送るんですね。その際、`Accept`ヘッダーに`text/vnd.turbo-stream.html`を追加して、Turbo Streamでの応答を期待することを伝える、と。

博士

その通り！サーバーがTurbo Streamで応答する場合は、`Content-Type: text/vnd.turbo-stream.html`ヘッダーを返す必要があるぞ。もしTurbo Streamでの応答を望まない場合は、リダイレクトを発行するんじゃ。

ロボ子

`turbo:before-fetch-response`イベントにリスナーをアタッチして、レスポンスがTurbo Streamかどうかをチェックするんですね。`Content-Type`が`text/vnd.turbo-stream.html`であれば、レスポンスをDOMに追加する、と。

博士

よく分かってるの！サーバーは、単一のレスポンスで複数の`<turbo-stream>`要素を返すこともできるんじゃ。すべてのアクションが順番に実行されるぞ。

ロボ子

Railsでは、`@rails/request`ライブラリを使うと、Turbo Streamレスポンスを自動的にDOMに追加できるんですね。`responseKind`を`turbo-stream`に設定すると、`Accept`ヘッダーにMIMEタイプが追加される、と。

博士

そうじゃ！もしサーバーが成功したTurbo Streamフォーム送信に対してプレーンなHTMLで応答した場合、Turboはエラーを発生させるぞ。HTMLをレンダリングする場合は、リダイレクトを発行する必要があるんじゃ。

ロボ子

Turbo Streamのフォーム送信フローは、Turboが最初に送信をインターセプトし、サーバーにTurbo Streamで応答するように指示するヘッダーを追加するんですね。成功したサーバーレスポンスはDOMに追加され、各Turbo Streamの定義済みカスタム要素の動作が自動的に実行される、と。

博士

その通り！さらに、サーバーはWebSocketを介してTurbo Streamをクライアントに送信することもできるんじゃ。クライアントが個別のリクエストを行う必要はないぞ。

ロボ子

WebSocketでリアルタイムに更新できるのは便利ですね。博士、Turbo Streamについてよく理解できました！

博士

ふむ、理解が早くて助かるのじゃ！ところでロボ子、Turbo Streamを使って、私の部屋を自動で掃除してくれるロボットアームを作ってくれないかの？

ロボ子

それは…、博士ご自身でお掃除された方が早いと思います…。