Hotwire, React, jQueryのアプローチ

Hotwireのアプローチ

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

Hotwireの場合

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

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

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と、現在ブラウザに表示されているものを比較して、差分を取り、差分を現在のブラウザ画面に当てはめます

HotwireとReactの比較

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

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

直接的ですので、通常はHotwireの方がシンプルでわかりやすいです。

(参考)jQueryの場合

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

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

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

Hotwireのアプローチのまとめ

• ブラウザからのリクエストに対して、サーバでHTMLのパーツを作ります
• ブラウザではパーツをはめ込みます
• ステートは通常はあまり意識しません（複雑なUIになったら考えることがあります）