Hotwire for Frontend Developers

ページ遷移: Turbo Drive#

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

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

タブメニュー: Turbo Frames#

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

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

詳細パネル: Turbo Frames#

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

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

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

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

AJAX/fetchで非同期通信をするサイトでは、これを見落としがちです。 Hotwireでこの問題を解決する方法を解説します。

モーダルダイアログ: Turbo Frames#

モーダルダイアログはUI要素として非常によく使われています。作り方もたくさんあります。

HotwireでカスタムJavaScriptを使わない方法からReact Server ComponentのLayoutを使う方法まで各種紹介・比較します。

ポップアップ: Turbo Frames#

Turbo Framesはサーバにリクエストを送り、画面を部分的に書き換えるだけでも多くのウェブUIが実装できます。
カスタムのJavaScriptを少し追加すると、さらに可能性が増える例です。

ライブ検索: Turbo Frames#

リアルタイムで検索をする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が必要なケースもあります。そのようなケースの１つとして、画面の複数箇所を更新するショッピングカートの例を紹介します。

セキュリティ#

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

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

用語集#

フロントエンドの技術評価で登場する用語を解説し、定義します。

サイトの使い方#

このサイトの機能と使い方を紹介します。