考える手順

Hotwire, React, jQueryのアプローチ

Hotwireの場合Reactの場合HotwireとReactの比較(参考)jQueryの場合(参考)HTMX, Alpine.jsなどとの比較

Hotwireの考え方を理解しやすくするために、React, jQuery等と比較して紹介します。

下記のようなUIを作るときのHotwireのアプローチを、Reactと比べながら解説します。

What is Hotwire

Hotwireの場合

Hotwireの場合は以下のように考えます。

  • “user_id:2"の行をaタグにします
  • aタグのhref属性の/users/2/user_profileは#user-profileに埋め込むべきHTMLを返してくれるサーバのエンドポイントです
  • aタグのdata-turbo-frameは、サーバから帰ってきたHTMLをどこに埋め込むかを指定しています

what-is-hotwire-hotwire.webp

Reactの場合

Reactの場合は以下のように考えます。

  • "user_id:2"の行にonclickイベントハンドラを繋げて、クリックしたらselectedUserステートを2に更新します
  • UserProfileコンポーネントのpropsにステートselectedUser=2を渡し、UserProfileコンポーネントはselectedUser=2に該当するデータをサーバに要求します
  • サーバはUser.id=2に該当するUserの情報をJSONで返します
  • JSONはuserProfileステートにセットされます
  • JSXとuserProfileステートを使って、virtual DOMを作成し、新しいUserProfileコンポーネントのHTMLを作ります
  • 新しいUserProfileのHTMLと、現在ブラウザに表示されているものを比較して、差分を取り、差分を現在のブラウザ画面に当てはめます

what-is-hotwire-react.png

HotwireとReactの比較

  • リクエスト送信
    • Hotwireはすぐにサーバからデータを取りにいきます
    • Reactの場合は、まずselectedUserのステートを設定して、間接的にUserProfileコンポーネントがサーバにデータを取りに行くようにします
  • レスポンス受信から表示
    • Hotwireはサーバから帰ってきたデータを#user-profileにすぐに埋め込みます
    • Reactの場合は、サーバから帰ってきたデータをuserProfileステートに設定すると、間接的に新しい情報が表示されるようになります

Hotwireは目標に対して直接的に処理をしています。一方でReactはまずステートに着目して、これを変更した結果として間接的に UIが更新されるような仕掛けを用意しています。直接的に画面を操作することは許されず、常にステート経由で間接的にUIを更新する仕組みです。

少なくともシンプルなケースにおいては直接的なものがわかりやすいでしょう。一方で複雑になってくれば、間接的にそして宣言的にUIを記述することの意義が出てきます。

(参考)jQueryの場合

参考までにjQueryのやり方を紹介します。

what-is-hotwire-jquery.webp

  • "user_id:2"の行にイベントハンドラをつなげて、クリックされたらサーバの/users/2/user_profileにリクエストが飛ぶようにします
  • 帰ってきた結果はuser-profileに埋め込まれるようにします
  • 上記の流れはJavaScriptで書きます（HotwireがHTML属性で宣言的に指定するのた対照的です）

jQueryのやり方はHotwireとよく似ていて、直接的です。やはりシンプルでわかりやすいです。

jQueryに対する批判として多かったのは、単純なケースではシンプルである一方で、複雑になるとすぐに混乱してスパゲッティーコード化するというものでした。 一方でHotwireはHTML属性を宣言的に使用しますので、UI/UXが複雑になっても混乱しにくくなっています。

(参考)HTMX, Alpine.jsなどとの比較

Hotwireと似たアプローチであり、どのバックエンドでも使用できる技術としてはHTMXやAlpine.jsがあります。特にHTMXは注目されていて、Astro, Python, Java Spring, Honoと組み合わせた例がしばしば報告されています。

私も十分にHTMXを試していないのではっきりしたことは言えませんが、Hotwireと比較した場合、大きな違いはHTML属性をどれだけ用意しているかだと感じています。

  1. jQueryはHTML属性を使わずにJavaScriptを主に使う
  2. HotwireはStimulusを使って、自分で新しいHTML属性とそれに結びついたJavaScriptを書く
  3. HTMXは出来合いのHTML属性をたくさん用意し、それを組み合わせてUIを作る

Hotwireは37signalsの製品で誕生し、実際の製品の複雑なUIでもわかりやすく作るために生まれた技術です。多くの箇所は出来合いのHTML属性だけで対応しますが、必要に応じてカスタムJavaScriptを書くことも重視しています。現実の複雑なプロダクトのエッジケースに対応するため、比較的すぐにJavaScriptを書きます。要するにHotwireは非常に現実主義的です。

それに対して、HTMXはHTML属性中心の宣言的アプローチをより深く追求した、より野心的で学術的なものだと私は感じています。