ページ遷移: Turbo Drive#
HotwireのTurbo Driveは、Next.jsのLinkタグとほぼ同じ位置付けの機能です。 主に画面遷移のヌルサク感を大幅に向上させます。
ダイナミックなコンテンツを中心としたサイトでは、prefetch等の違いにより、Hotwireの方が高速なUI/UXになります。
本サイトでは、React/Next.jsをすでに理解しているフロントエンドエンジニアを対象に、実際に動くコードを体感しながらHotwireとReact/Next.jsを比較します。
「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」という声をよく聞きます。しかし私はフレームワークではなく、デザイナーとエンジニアのスキルと本気度が最重要だと思っています。HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できることを本サイトで実証したいと思っています。
「HotwireはRails専用じゃないの？」と思っている方も多いと思いますが、実はHotwireはバックエンド非依存です。Rails, Laravel, Django, Nodeでも関係なく動きます。このサイトもHotwireをNext.js上で動かしていて、すべてJavaScript (TypeScript)で書かれています。Railsは一切使っていません。 JavaScriptさえわかれば簡単にコードを追うことができます。
本サイトのコードはGitHubに公開しています。またVercelでデプロイしています。実際に触って、さらにコードを見て、理解を深けめていただきたいと思います。
HotwireのTurbo Driveは、Next.jsのLinkタグとほぼ同じ位置付けの機能です。 主に画面遷移のヌルサク感を大幅に向上させます。
ダイナミックなコンテンツを中心としたサイトでは、prefetch等の違いにより、Hotwireの方が高速なUI/UXになります。
インタラクティブなウェブUIの大半は、突き詰めると画面の部分的な書き換えです。 新しい内容がすでにブラウザに読み込まれているなら、これは難しくありません。
厄介なのは新しい内容をサーバから読み込む時ですが、Turbo Framesなら簡単に実現できます。
リスト項目を選択して、その詳細をパネルに表示するUIです。メールアプリなどでよく見かけるタイプのUIです。タブメニューとよく似ていますが、サーバから読み込んだ内容が、リンクがあったところとは別の場所に埋め込まれる点が異なります。
特にレスポンスが遅い場合、ボタンクリック後の「ローディング中」状態をユーザに伝えるのことはとても重要です。これを怠ると、ユーザを不安にさせてしまいます。
残念ながら、AJAX/fetchで非同期通信をするサイトの多くが、これを見落としています。
TurboおよびNext.jsでこの問題を解決する方法を紹介し、比較します。
Turbo Framesはサーバにリクエストを送り、画面を部分的に書き換えるだけでも多くのウェブUIが実装できます。
カスタムのJavaScriptを少し追加すると、さらに可能性が増える例です。
リアルタイムで検索をするUIです。Turbo Framesを使って作りますが、aタグやformタグを契機に作動するのではなく、onInputイベントで動くので、JavaScriptを使う必要があります。Turbo Framesを使う理由は、検索条件フィールドのステートを保ち、リセットされるのを防ぐためです。
Turbo Framesを使っていますので、URLとの連携もできています。今回はdata-turbo-action="replace"属性とを使って、検索結果がブックマークできるようにしています。
またReact側ではただのfetchを使っていることもあり、競合状態 (race condition)対策はされていません。一方でHotwire側は、Turboが提供するTurbo.visit()を使うだけで競合状態対策がされています。ネットワークタブを見ながらご確認ください。
動的に、階層的に絞り込まれるプルダウンメニューを使って、住所を入力していくUIをTurbo Framesで作ります。 小さい箇所の置換が複数ある場合はTurbo Streamsを使うことが多いのですが、1つまとめられる場合はTurbo Framesの方が良いケースもあります。