Rails Turbo StreamsでリアルタイムUIを実現！create / update / destroy を自動反映する仕組みをやさしく解説

1. RailsとHotwireの基本を押さえよう

1. RailsとHotwireの基本を押さえよう

Railsは、Webアプリケーションを効率よく作るためのフレームワークです。MVCという役割分担の考え方を採用しており、モデルはデータ、ビューは画面、コントローラは処理の流れを担当します。開発者が迷わないように、決まりごとを重視するコンベンションも特徴です。

Hotwireは、RailsでモダンなUIを作るための仕組みの集合体です。JavaScriptを大量に書かなくても、画面を動的に更新できます。その中心にあるのがTurboで、今回の主役であるTurbo Streamsもここに含まれます。

2. Turbo Streamsとは何か？

2. Turbo Streamsとは何か？

Turbo Streamsは、サーバー側から「画面のこの部分をこう変えてください」という指示を送る仕組みです。例えるなら、先生が黒板を全部消すのではなく、必要な一部分だけを書き換えるようなイメージです。

これにより、create（作成）、update（更新）、destroy（削除）といった操作が行われた瞬間に、一覧画面などが自動で変化します。ユーザーはページを再読み込みする必要がなく、スムーズな操作感を得られます。

3. Turbo Streamsが動く全体の流れ

3. Turbo Streamsが動く全体の流れ

Turbo Streamsは、通常のRailsの処理と同じ流れで動きます。フォーム送信やボタン操作でリクエストが送られ、コントローラが処理し、ビューを返します。その返却形式がHTMLではなく、Turbo Stream専用の形式になるだけです。

つまり、Railsの基本を理解していれば、新しい概念を大量に覚える必要はありません。これは初心者にとって大きな安心材料です。

4. create時に一覧へ自動追加する例

4. create時に一覧へ自動追加する例

まずはデータを新しく作成したときに、一覧画面へ自動で追加される例です。投稿アプリを想像するとわかりやすいでしょう。

# posts_controller.rb
def create
  @post = Post.new(post_params)
  if @post.save
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to posts_path }
    end
  end
end

<!-- create.turbo_stream.erb -->
<turbo-stream action="append" target="posts">
  <template>
    <%= render @post %>
  </template>
</turbo-stream>

appendは「後ろに追加する」という意味です。targetで指定した場所に、新しい要素が差し込まれます。

5. update時に内容をその場で書き換える

5. update時に内容をその場で書き換える

次は更新処理です。編集した内容を保存した瞬間に、一覧の表示も変わります。これは「入れ替え」の動作になります。

# posts_controller.rb
def update
  @post = Post.find(params[:id])
  if @post.update(post_params)
    respond_to do |format|
      format.turbo_stream
      format.html { redirect_to posts_path }
    end
  end
end

<!-- update.turbo_stream.erb -->
<turbo-stream action="replace" target="<%= dom_id(@post) %>">
  <template>
    <%= render @post %>
  </template>
</turbo-stream>

replaceは指定した部分を丸ごと差し替えます。DOM IDという考え方を使うことで、どの要素を変えるかを明確にできます。

6. destroy時に画面から自動削除する

6. destroy時に画面から自動削除する

削除処理では、一覧から該当データを消します。ゴミ箱に入れると画面から消える感覚に近いです。

# posts_controller.rb
def destroy
  @post = Post.find(params[:id])
  @post.destroy
  respond_to do |format|
    format.turbo_stream
    format.html { redirect_to posts_path }
  end
end

<!-- destroy.turbo_stream.erb -->
<turbo-stream action="remove" target="<%= dom_id(@post) %>">
</turbo-stream>

removeは要素を完全に取り除きます。画面が即座に変わるため、操作結果が直感的に伝わります。

7. ViewComponentと組み合わせる考え方

7. ViewComponentと組み合わせる考え方

ViewComponentは、画面の部品をクラスとして管理する仕組みです。Turbo Streamsと組み合わせることで、部品単位で安全に差し替えができます。表示のルールが一箇所にまとまるため、後から修正する際も混乱しにくくなります。

初心者のうちは、まず「部分的に画面が変わる」という体験を理解することが大切です。仕組みを理解してから、部品化を意識するとスムーズです。

8. Turbo Streamsが初心者に向いている理由

8. Turbo Streamsが初心者に向いている理由

Turbo Streamsは、JavaScriptをほとんど書かずにリアルタイムUIを実現できます。Railsの基本的なCRUD操作と直結しているため、学習の流れを崩しません。

画面更新のたびにページ全体を描き直さないため、動作も軽く、ユーザー体験も向上します。まずはcreate、update、destroyの3つをしっかり使えるようになるだけで、現代的なWebアプリに近づきます。