Hotwire, React, jQueryのアプローチの比較

HotwireもReactもjQueryも結局はブラウザ上で動作するJavaScriptです。やれることにはほとんど差はなく、アプローチの角度が異なるだけです。お互いの特徴を客観的に洗い出していくことが大切です。

なお下記内容は各種技術でサイドパネルを実装した例で具体的にご確認いただけます。

Hotwire vs. React

• Reactはステートからの単方向データフローを強制します。
  • 既存のHTML/DOMを利用するのは基本的には御法度で、必ずステートを出発的にHTML/DOMを再構築します。
    • 簡単な操作の場合でも不必要に回りくどいことをします。
  • Hotwireは直接HTML/DOMを操作します。
    • 複雑なUIの場合は、必要に応じてステートからの単方向データフローを使用できます。
• ReactはHTML(DOM)/イベントハンドリング(JavaScript)が密結合しています。
  • JSXにイベント処理やステートを埋め込みやすいため、接続は簡単になります。
  • クライアントサイドでレンダリングしないとインタラクティブになりません（いわゆるHydration）。
  • HotwireはHTMLとStimulus controllerが分離されているため、サーバでレンダーしたHTMLに動的にイベントハンドラをつなげます。
    • ドメインモデルが複雑だったりデータ漏洩要件が厳しい場合はRailsサーバでHTMLをレンダーした方が有利なので、この場合はHotwireが適しています。
• 画面の部分画面更新をするためにサーバと非同期通信をする場合は、JavaScriptでfetch処理を記述する必要があります。
  • Tanstack Queryなどのライブラリを使うこともあります。
  • Hotwire/TurboはJavaScriptを書かずにサーバとの非同期通信・部分画面更新を実現できます。
    • HotwireはRuby on RailsのOmakaseの考え方を引き継いでいて、繰り返し使う箇所は簡略化していると言えます。

Hotwire vs jQuery

• jQueryは一般的にDOMContentLoadedでイベントハンドラを接続します。
  • インタラクティブに画面が更新されるUIの場合はDOMContentLoadedだけを頼りにできず、イベントハンドラの接続処理が複雑になります。
  • Hotwire/StimulusはMutationObserverAPIを使ってイベントハンドラを接続します。そのため高度にインタラクティブなUIでもイベントハンドラの接続に悩む必要がありません。インタラクティブなUIにより適していると言えます。
• jQueryはHTMLに接続する箇所(いわゆるbehavior hooks)の規約がなく、idを使ったりclassを使ったりdata-*属性を使ったりとルールがありません。
  • どのHTML要素がどのjQueryコードに接続するかがわかりにくくなる場合があります。
  • なおjQueryをわかりやすくするための工夫は現場のコードでも良く見かけます。私が理解している限りでいくつかまとめています。
  • Hotwire/StimulusはHTMLに接続する方法が規約で指定されているため、コードが読みやすくなっています。
• jQueryで非同期通信・部分画面更新をする場合はJavaScriptで処理を記述する必要があります。
  • ただしjQueryの記述は非常に簡略化されていて、element.load([URL])だけでデータフェッチからDOMへの挿入までまとめてやってくれます。
  • Hotwire/TurboはJavaScriptをほとんど書かずにサーバとの非同期通信・部分画面更新を実現できます。