本サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながらHotwireとReact/Next.jsを比較します。
各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。
本サイトのコードはGitHubに公開しています。またKamalを使ってさくらのVPSサーバでデプロイ・公開しています。実際に触って、さらにコードを見て、上記が誇張かどうかを確認していただければと思います。
ウェブサイトのUI/UXにはページ遷移の体感が大きく影響します。
ダイナミックなコンテンツのサイトでは、一般にHotwireの方が高速なUI/UXになります。
タブメニューを例に、データをサーバから取得し、画面を部分的に書き換える方法を比較します。
Turbo Framesは非常に簡便な解決策を提供します。
表の中にあるボタンをクリックして、詳細をパネルに表示するUIです。メールアプリなどでよく見かけるタイプのUIです。
タブメニューとよく似ていますが、画面上で離れている要素が互いにが連携する点が異なります。
レスポンスが遅いサイトでは、ユーザに適切にフィードバックを与えないと不安にさせてしまいます。
AJAX/fetchで非同期通信をするサイトでは、これを見落としがちです。 Hotwireでこの問題を解決する方法を解説します。
モーダルダイアログはUI要素として非常によく使われています。作り方もたくさんあります。
HotwireでカスタムJavaScriptを使わない方法からReact Server ComponentのLayoutを使う方法まで各種紹介・比較します。
Turbo Framesはサーバにリクエストを送り、画面を部分的に書き換えるだけでも多くのウェブUIが実装できます。
カスタムのJavaScriptを少し追加すると、さらに可能性が増える例です。
リアルタイムで検索をするUIです。AJAX/fetchによる非同期通信を使ったUIの代表例にも見えますが、実はほとんどMPAで実現できます。ここではわずかに足りない部分をHotwireで補う方法を紹介します。ブラウザステートがHotwireでも重要であることが確認できると思います。
またReact useEffectによるリアルタイム検索のコードとUI/UXとも比較します。
動的に、階層的に絞り込まれるプルダウンメニューを使って、住所を入力していくUIを作ります。Turbo Streamsはもちろん、Turbo Framesでも作成できます。HTMLの制約でformタグのネストができないため、JavaScriptでプルダウンメニューのステートを取り込みます。
インタラクティブUIに必要な部分置換の大半はTurbo DriveやTurbo Framesで十分です。 しかしTurbo Streamsが必要なケースもあります。そのようなケースの１つとして、画面の複数箇所を更新するショッピングカートの例を紹介します。
Next.jsのSSRやServer Componentsでは開発者がJSON APIを設計する必要はありません。状況に応じて、フレームワークが自動的にJSON(もしくはJSONに似た形式)にデータを変換し、ブラウザに送ります。
これを理解していないと機密データを漏洩してしまう可能性がありますので、解説します。