Turbo Driveはページ遷移時にフルページリロードを避けることで高速なナビゲーションを実現しますが、ページの再読み込み（リフレッシュ）時にも、さらにスムーズな体験を提供することができます。
特にフォーム送信後に同じページにリダイレクトされるようなシナリオでは、ページ全体を置き換えるのではなく、変更された部分だけを更新（モーフィング）することで、ユーザー体験が大幅に向上します。
この記事では、Turbo Driveのモーフィング機能を使ったスムーズなページ更新の方法を解説します。
モーフィング（Morphing）とは？
モーフィングとは、ページの再読み込み時にDOM全体を置き換えるのではなく、変更された要素だけを差分更新する仕組みです。
Turbo Driveは内部的にIdiomorphというライブラリを利用して、このモーフィングを実現しています。
モーフィングを有効にする方法
モーフィングを有効にするには、ページの<head>タグ内に以下のメタタグを追加します。
<head>
...
<meta name="turbo-refresh-method" content="morph">
</head>morph：変更された要素のみを差分更新（モーフィング）replace（デフォルト）：ページの<body>全体を置き換える
モーフィングを有効にすると、ページの状態が維持され、よりスムーズな体験が得られます。
スクロール位置の保持（Scroll preservation）
ページ更新時にスクロール位置を保持するには、以下のメタタグを追加します。
<head>
...
<meta name="turbo-refresh-scroll" content="preserve">
</head>preserve：スクロール位置を保持reset（デフォルト）：スクロール位置をページの先頭にリセット
モーフィング対象から特定の要素を除外する方法
モーフィング時に特定の要素を更新対象から除外したい場合、data-turbo-permanent属性を指定します。
例えば、ページ更新時に開いたままにしたいポップオーバーなどに有効です。
<div data-turbo-permanent>
<!-- モーフィング対象外の要素 -->
</div>Turbo Frameを使った部分的なモーフィング
Turbo Frameを使って、ページ内の特定の領域だけをモーフィングで更新することも可能です。
その場合、Turbo Frameにrefresh="morph"属性を指定します。
<turbo-frame id="my-frame" refresh="morph" src="/my_frame">
<!-- フレームの内容 -->
</turbo-frame>この仕組みを使えば、ページ初回ロード時には存在しなかった追加コンテンツ（例：ページネーション）を後から読み込み、ページ更新時にもスムーズに差分更新できます。
Turbo Streamを使ったページ更新のブロードキャスト
Turbo Streamには新たにrefreshというアクションが追加されました。
これを使うと、サーバー側からページ更新を指示できます。
<turbo-stream action="refresh"></turbo-stream>Railsでは、turbo-rails gemを使って簡単にページ更新をブロードキャストできます。
Railsでの実装例
モデルにbroadcasts_refreshesを追加します。
# app/models/calendar.rb
class Calendar < ApplicationRecord
broadcasts_refreshes
endビュー側でturbo_stream_fromを指定します。
<!-- app/views/calendars/show.html.erb -->
<%= turbo_stream_from @calendar %>これにより、モデルが更新されると自動的にページがモーフィングでスムーズに更新されます。
まとめ
Turbo Driveのモーフィング機能を活用することで、ページの再読み込み時にも差分更新を行い、スクロール位置や画面状態を維持したままスムーズなユーザー体験を提供できます。
- ページ更新時に差分更新（モーフィング）を有効化
- スクロール位置を保持
- 特定要素をモーフィング対象外に設定
- Turbo Frameを使った部分的なモーフィング
- Turbo Streamを使ったページ更新のブロードキャスト
Rails × Turbo Driveで、さらに快適なWebアプリケーションを作りましょう！
