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

Hotwireの考え方を理解しやすくするために、他の技術との違いを簡単に紹介します。

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

Hotwire vs. React

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

Hotwire vs jQuery

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