RailsのHotwireとTurboとは？簡単に解説します。

2025年1月16日

Hotwireは、Ruby on Railsのエコシステムにおいて、フロントエンドとサーバーサイドの連携を効率化するためのツールセットです。Hotwireは、主にTurboとStimulusの2つのライブラリから成り立っており、Turboはページ遷移や動的な更新を最適化し、Stimulusはインタラクションを管理するために使われます。

特に注目されるのがTurboです。Turboは、ページ遷移を最適化し、従来のAJAXのようにページ全体を更新することなく、必要な部分だけを更新する仕組みです。これにより、ユーザー体験が向上し、ページ遷移やリロードを高速化することができます。

Turboが導入された背景

従来、Railsはサーバーサイドレンダリング（SSR）を利用し、ページ遷移の度にページ全体をリロードしていました。しかし、この方法ではユーザー体験が遅く、レスポンスの待機時間が増えてしまうことが問題でした。そこで、Turboはページ遷移を軽量化し、部分的にHTMLを更新することで、ユーザーの待機時間を減らし、インタラクションをスムーズにしました。

また、TurboはHTML over the wireというアプローチに基づいており、JavaScriptフレームワークに依存することなく、サーバーからHTMLを直接送信し、ページ更新を行います。この方式は、ページ遷移を高速化し、JavaScriptの負担を軽減します。

Turboの基本的な特徴と仕組み

Turboは、ページ遷移や動的更新を最適化するために、ページ全体をリロードせずにHTMLの一部のみを置き換える仕組みを提供します。これにより、従来のページ遷移に比べて、アプリケーションのパフォーマンスが向上し、ユーザーはよりスムーズな体験を得ることができます。

Turboは以下の3つのコンポーネントで構成されています：

  1. Turbo Drive：リンクやフォームの送信時に、ページ全体のリロードを避け、HTMLの一部のみを置き換えます。これにより、ページ遷移を非常に高速化します。
  2. Turbo Frames：ページ内の一部を個別に更新する仕組みです。これにより、全ページのリロードを避け、特定の部分だけを更新します。
  3. Turbo Streams：サーバーサイドで発生した変更を、リアルタイムでクライアントに送信する仕組みです。WebSocketやServer-Sent Eventsを活用して、ページ内の特定部分を動的に更新します。

Turboの仕様例

1-Turbo Driveの使用例
リンクをクリックした際に、ページ全体をリロードせずにコンテンツのみを更新します。以下のようにリンクを作成することで、ページ遷移が高速化されます。

<a href="/posts" data-turbo="true">投稿一覧</a>

2-Turbo Framesの使用例
ページ内の一部をTurbo Framesでラップし、その部分だけを更新することができます。例えば、投稿一覧の中の個別の投稿リンクをクリックした際、個別投稿部分のみが更新されます。

<turbo-frame id="post_1">
  <a href="/posts/1">投稿1</a>
</turbo-frame>

3-Turbo Streamsの使用例
サーバーサイドでデータが変更された際に、Turbo Streamsを使ってクライアントにその変更をリアルタイムで通知することができます。例えば、コメントが新たに投稿された際に、そのコメント部分のみを更新することができます。

<turbo-stream action="append" target="comments">
  <template>
    <div class="comment">新しいコメント</div>
  </template>
</turbo-stream>

Turboを無効にするべきシナリオ

Turboは非常に強力なツールですが、すべてのシナリオで最適な選択ではありません。以下のケースでは、Turboを無効にすることが適切です

  1. フルページリロードが必要な場合：特定の操作で全ページをリロードする必要がある場合（例えば、セッション情報のリセットやリダイレクト後の完全な再読み込みなど）、Turboを無効にすることがあります。
  2. 複雑なJavaScript機能が必要な場合：SPA（シングルページアプリケーション）のような複雑なクライアントサイドのロジックや状態管理が必要な場合、Turboは適していないことがあります。この場合、ReactやVue.jsなどのフレームワークを使用した方が適切です。
  3. インタラクションの不具合が発生する場合：Turboが予期せぬ動作を引き起こす場合、例えば、フォームの送信やリンクのクリックが期待通りに動作しない場合には、Turboを無効にして問題を解決することができます。

Turboを無効にする方法

Turboを無効にするには、HTMLの<body>タグにdata-turbo="false"属性を追加することで無効化できます

<body data-turbo="false">
  <!-- Turboが無効化された状態でページが読み込まれます -->
</body>

また、特定のリンクやフォームに対して個別にTurboを無効にする場合、次のようにdata-turbo="false"を設定できます

<a href="/somepage" data-turbo="false">リンク</a>

まとめ

Turboは、Ruby on Railsを利用したアプリケーションにおいて、ページ遷移を高速化し、ユーザー体験を向上させるための強力なツールです。特に、ページ全体をリロードすることなく、必要な部分だけを更新する仕組みを提供することで、パフォーマンスが向上し、動的なページ更新が効率的に行えます。しかし、すべてのケースで最適な選択ではないため、特定のシナリオではTurboを無効にする必要があることもあります。開発者は、Turboの有効化や無効化を慎重に選択し、最適な方法でアプリケーションを構築することが重要です。

その他社内ブログ
・Rails開発におけるN+1問題への対策と解決方法
・正常系テストと異常系テストの違い、必要性について解説【初心者】
参考記事
・RailsでのTurbo概要まとめ
・Rails で JavaScript を利用する