Rails 7での新機能: Turbo FramesとTurbo Streamsを活用した実践ガイド

はじめに
- この記事の概要
- 対象読者
1. Turbo Framesの基本
2. Turbo Streamsの基本
3. Turbo StreamsとAction Cableの組み合わせ
4. Turbo Driveの活用
まとめ

はじめに

この記事の概要

こんちには、株式会社TOKOSの石津です！

この記事では、Rails 7の新機能であるTurbo FramesとTurbo Streamsを活用した実践ガイドについて解説しています。

Turbo Framesは、ページの一部を非同期的に更新するための機能で、ページ全体をリロードせずに一部分だけを更新できます。

一方、Turbo Streamsは、サーバーサイドからクライアントへのリアルタイムなDOMの更新を行う機能で、複数のクライアント間でリアルタイムに同期するようなアプリケーションが簡単に実現できます。

また、記事ではAction CableとTurbo Streamsの組み合わせを使ったリアルタイムチャット機能の実装例も紹介しています。

この組み合わせにより、リアルタイムな通信が可能なアプリケーションを構築できます。

さらに、この記事ではTurbo Driveの活用方法も説明しており、ページ遷移を高速化するための機能を使いこなすことができるようになります！

対象読者

Webアプリケーション開発に携わるエンジニア
Ruby on Railsを利用した開発に興味がある方
Rails 7の新機能（Turbo FramesとTurbo Streams）を学びたい方
既存のRailsプロジェクトに新機能を取り入れたいと考えている方

1. Turbo Framesの基本

Turbo Framesは、ページの一部を非同期的に更新するための機能です。これにより、ページ全体をリロードせずに一部分だけを更新することができます。

まずは、Turbo Framesを使用した簡単な例を見てみましょう。

<!-- app/views/posts/index.html.erb -->
<%= turbo_frame_tag "posts" do %>
  <%= render @posts %>
<% end %>

<!-- app/views/posts/_post.html.erb -->
<%= turbo_frame_tag dom_id(post) do %>
  <div class="post">
    <h2><%= post.title %></h2>
    <p><%= post.body %></p>
  </div>
<% end %>

上記の例では、turbo_frame_tagを使用して”posts”というIDのTurbo Frameを作成しています。

このTurbo Frame内にあるコンテンツが非同期的に更新されます。

2. Turbo Streamsの基本

Turbo Streamsは、サーバーサイドからクライアントへのリアルタイムなDOMの更新を行うための機能です。

これにより、複数のクライアント間でリアルタイムに同期するようなアプリケーションを簡単に実現できます。Turbo Streamsの基本的な使い方を見てみましょう。

class PostsController < ApplicationController
  def create
    @post = Post.new(post_params)

    respond_to do |format|
      if @post.save
        format.turbo_stream { render turbo_stream: turbo_stream.prepend("posts", partial: "posts/post", locals: { post: @post }) }
        format.html { redirect_to @post, notice: "Post was successfully created." }
      else
        format.html { render :new, status: :unprocessable_entity }
      end
    end
  end

  # ...
end

この例では、createアクションで新しい投稿が作成されるとTurbo Streamを使用して、投稿一覧の先頭に新しい投稿が追加されます。

format.turbo_streamでTurbo Streamのレスポンスを指定し、turbo_stream.prependを使って新しい投稿を投稿一覧の先頭に追加しています。

これにより、画面の更新を最小限に抑えながら、新しい投稿がリアルタイムに表示されます。

3. Turbo StreamsとAction Cableの組み合わせ

Turbo StreamsとAction Cableを組み合わせることで、リアルタイムな通信が可能なアプリケーションを構築できます。

以下に、Action Cableを使ってチャット機能を実装する例を示します。

まず、MessageモデルとMessagesChannelを作成します。

$ rails generate model Message content:text
$ rails generate channel messages

次に、MessagesControllerで新しいメッセージを作成し、Action Cableを介してブロードキャストします。

# app/controllers/messages_controller.rb
class MessagesController < ApplicationController
  def create
    @message = Message.new(message_params)

    if @message.save
      ActionCable.server.broadcast("messages", { turbo_stream: turbo_stream_action_for(@message) })
    end
  end

  private

  def message_params
    params.require(:message).permit(:content)
  end

  def turbo_stream_action_for(message)
    turbo_stream.prepend("messages", partial: "messages/message", locals: { message: message })
  end
end

MessagesChannelでクライアントからの接続を受け付けるように設定します。

class MessagesChannel < ApplicationCable::Channel
  def subscribed
    stream_from "messages"
  end
end

最後に、チャット画面のビューを作成し、turbo-cable-stream-sourceタグを使ってAction Cableを統合します。

<%= turbo_cable_stream_source_tag(stream_from: "messages") %>
<%= turbo_frame_tag "messages" do %>
  <%= render @messages %>
<% end %>

これで、チャット機能がリアルタイムに更新されるようになります。

4. Turbo Driveの活用

Turbo Driveは、ページ遷移を高速化するための機能です。これにより、従来のページ遷移よりも迅速にページを表示できるようになります。

Turbo Driveはデフォルトで有効になっていますが、個別に無効にすることもできます。

<head>
  <!-- ... -->
  <%= turbo_drive_tag disabled: true %>
  <!-- ... -->
</head>

まとめ

この記事では、Rails 7の新機能であるTurbo FramesとTurbo Streamsの基本的な使い方を紹介しました。

また、Action Cableとの組み合わせによるリアルタイムな通信や、Turbo Driveの活用についても説明しました。

これらの機能をうまく活用することで、効率的に高速なウェブアプリケーションを構築することができます。

今回の実践ガイドを参考に、Rails 7を使ったプロジェクトでこれらの新機能を活用してみてください。

Railsの勉強をしたい方はこの本が参考になるかと思いますので興味がある方は是非読んで見て下さい!