Hotwire for Frontend Developers

フロントエンドエンジニアのためのHotwire入門

HotwireとNext.jsをちゃんと見て比較しよう#

本サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながら HotwireとReact/Next.jsを比較します

各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。

  • HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できます。「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」というのは、かなり特殊なものでない限りは誤解です
  • Hotwireはバックエンド非依存です。Rails, Laravel, Django, Go, Nodeでも関係なく動きます。実際、本サイトのHotwireコードはNext.js API Routesで動かしています

本サイトのコードはGitHubに公開しています。またKamalを使ってさくらのVPSサーバデプロイ・公開しています。実際に触って、さらにコードを見て、上記が誇張かどうかを確認していただければと思います。

ページ遷移: Turbo Drive#

ウェブサイトのUI/UXにはページ遷移の体感が大きく影響します。

ダイナミックなコンテンツのサイトでは、一般にHotwireの方が高速なUI/UXになります

タブメニュー: Turbo Frames#

タブメニューを例に、データをサーバから取得し、画面を部分的に書き換える方法を比較します。

Turbo Framesは非常に簡便な解決策を提供します。

詳細パネル: Turbo Frames#

表の中にあるボタンをクリックして、詳細をパネルに表示するUIです。メールアプリなどでよく見かけるタイプのUIです。

タブメニューとよく似ていますが、画面上で離れている要素が互いにが連携する点が異なります。

ローディングアニメーション問題: Turbo Frames#

レスポンスが遅いサイトでは、ユーザに適切にフィードバックを与えないと不安にさせてしまいます。

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とも比較します。

階層プルダウンメニュー: Turbo Frames#

動的に、階層的に絞り込まれるプルダウンメニューを使って、住所を入力していくUIを作ります。Turbo Streamsはもちろん、Turbo Framesでも作成できます。HTMLの制約でformタグのネストができないため、JavaScriptでプルダウンメニューのステートを取り込みます。

解説は準備中...

複数箇所の更新(カート):Turbo Streams#

インタラクティブUIに必要な部分置換の大半はTurbo DriveやTurbo Framesで十分です。 しかしTurbo Streamsが必要なケースもあります。そのようなケースの1つとして、画面の複数箇所を更新するショッピングカートの例を紹介します。

セキュリティ#

Next.jsのSSRやServer Componentsでは開発者がJSON APIを設計する必要はありません。状況に応じて、フレームワークが自動的にJSON(もしくはJSONに似た形式)にデータを変換し、ブラウザに送ります。

これを理解していないと機密データを漏洩してしまう可能性がありますので、解説します。