Turbo備忘録

Ruby on Railsのバージョン:7.2.1
Rubyのバージョン:3.3.5

Turboについて

Turbo Drive　
ページ全体のリロードを不要にすることで、リンクやフォーム送信を高速化する

Turbo Frames　
ページを独立したコンテキストに分解し、ナビゲーションをスコープ化し、遅延ロードできるようにする

Turbo Streams
HTMLとCRUDライクなアクションのセットを使用するだけで、WebSocket、SSE、またはフォーム送信に応答してページの変更を配信する

Turbo Native
（モバイル開発用）Webセクションとネイティブセクション間のシームレスな遷移により、壮大なモノリスをネイティブiOSおよびAndroidアプリの中心に配置できる

Turbo Frames

index.html.erb

<h1>Turbo</h1>

<hr>
<%= turbo_frame_tag "new_post" do %>
  <%= link_to "新規投稿", new_post_path %>
<% end %>
<hr>

new.html.erb

<%= turbo_frame_tag "new_post" do %>
  ここが更新
<% end %>

上記のように記載したら下記のスクショのようになる。

↓新規投稿リンクを押下すると

となる。

turbo_frame_tagのブロック内の内容だけが更新されているということ
turbo_frame_tag のブロック内にあるリンクを踏むと、Turbo Frames により、リンク先のビューファイル、今回ならば new.html.erb の中の、同じ id をもつ turbo_frame_tag を探し出し、この内部だけを置き換える処理を行う。
new_postを目印にして、どこを更新するかを決めているためここの値が一致していない場合はエラーになる。
また、原則として link_to を使用する場合は、下記のように data-turbo-frame 属性を指定する方が無難です。これで、link_toの行がturbo_frame_tag外に移動したとしても効果を発揮する。

<%= turbo_frame_tag "new_post" do %>
  <%= link_to "新規投稿", new_post_path, data: { turbo_frame: "new_post" } %>
<% end %>

この技術で、一覧表示とページネーションがあるページ（index.html.erb）から２ページ目を閲覧する時に投稿一覧の部分をTurbo Framesで更新すること（turbo_frame_tagで囲む）ができる。

dom_id

dom_id ヘルパーメソッドを利用してnew_postを表す

<h1>Turbo</h1>

<hr>
<%= turbo_frame_tag dom_id(Post) do %>
  <%= link_to "新規投稿", new_post_path, data: { turbo_frame: dom_id(Post) } %>
<% end %>
<hr>

new_postをdom_id(Post)と記載することで表すことができます。

Turbo Streams

Turbo Streams には７つの action が設定されています。

action 解説
append タグ内の一番下に追加
prepend タグ内の一番上に追加
before タグ外の一番上に追加
after タグ外の一番下に追加
update タグ内を置換
replace タグを含めて丸ごと置換
remove タグを含めて丸ごと除去

<%= turbo_stream.アクション名 対象のid do %>
  コンテンツ
<% end %>

を書くことで、対象のid属性に対して、上記の操作をJavaScriptを書かずに実現できるという、非常に便利な機能がTurbo Streamsです。

補足

turbo_streamで指定するidはturbo-frameタグである必要はありません。
divタグでもpタグでも対応可能です。
常識ですが、HTML内に同じ id 属性を複数箇所で使用してはいけないルールがあります。このルールを守っている限り対象となるタグは一つに決まります。

途中