Keyboard shortcuts

Press or to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

付録C Turbo Streams アクション一覧

Turbo Streams の 8 つのアクションと、対応する Rails のヘルパーをまとめます。詳細と最新仕様は、公式リファレンスで確認してください。

8 つのアクション

アクション何をするかヘルパー例
appendtarget の末尾に追加するturbo_stream.append "tasks", @task
prependtarget の先頭に追加するturbo_stream.prepend "tasks", @task
replacetarget の要素自体を置き換えるturbo_stream.replace @task
updatetarget の中身だけを置き換えるturbo_stream.update "flash", partial: "layouts/flash"
removetarget を削除する(中身の HTML は不要)turbo_stream.remove @task
beforetarget の直前に挿入するturbo_stream.before "task_1", @task
aftertarget の直後に挿入するturbo_stream.after "task_1", @task
refreshページの再描画を促す<turbo-stream action="refresh">(第15章)

target と targets

  • targetid を 1 つ指定し、その 1 要素を対象にする。
  • targets … CSS セレクタを指定し、当てはまるすべての要素を対象にする。

送り方の整理

送る経路使う場面登場章
フォーム送信の応答(format.turbo_stream自分の操作への反映第16章
コントローラからの broadcast(Turbo::StreamsChannel.broadcast_*_to他ユーザーへの配信第18章
モデルの callback(broadcasts_toレコードの作成・更新・削除を自動配信第18章
ページ内の <turbo-stream> 要素初期表示時に命令を含める第15章

覚えておく要点

  • replace は要素ごと、update は中身だけ(第15章)。
  • 1 つのレスポンスに、複数の命令を入れられる(第16章・第17章)。
  • 命令の宛先(id)は dom_id で揃えると、表示側とずれない(第17章)。
  • フォーム送信の応答で効く(MIME は text/vnd.turbo-stream.html、第15章)。GET は既定では受け取らないが、data-turbo-stream で opt-in できる。

ヘルパーの細かい引数や、ここに載せていない使い方は、公式リファレンスと turbo-rails のソースで確認してください。