Reactを脱却せよ！UIのインタラクティブ性を維持したままHtmxへ移行する手法（2023年版）

この記事では、モダンなフロントエンド開発においてReactという選択肢を見直し、Htmxを採用することでコードベースをシンプルかつ軽量に保つための実践的な戦略を解説します。複雑な状態管理やビルドプロセスから解放され、HTMLファーストなアプローチでWebアプリケーションを構築する方法を探求します。

こうしてくれて嬉しい。Htmxはサーバーレンダリングと非常に相性がいいし、そもそもほとんどのケースではサーバーレンダリングをするべきだと思う。もし凝ったインタラクティブな機能が必要なら、いつでもテンプレート内にVueJSやReactJSのミニアプリを組み込めばいいんだしね。

掲示板ソフトにはHTMXが最適だと思う。掲示板サイトは基本的にテキストや、せいぜい音声・動画・画像といった非インタラクティブなコンテンツがメインだし、これらはすべてHTMLとCSSで表現できるからね。

HTMXを使えば、サーバーサイドイベント（SSE）経由で部分的なレンダリングやライブアップデートができる。これなら、ユーザーの操作に応じて動的にロードされるような「クライアントサイド」に近い体験をほぼ再現できるよ。

掲示板で唯一、本格的な動的SPAに近い機能が必要なのはWYSIWYGエディタくらいだけど、それもWebコンポーネントで構築すればいい。Mediumの記事のコメント欄みたいに、柔軟なハイライトや引用システムを作るのは純粋なHTMXだけだと少し難しいかもしれない。だから一部はクライアントサイドJSで作る必要があるけど、メインの体験はHTMXで十分すぎるほど作れるよ。

自分のWebアプリは基本的に全部HTMXを使ってる。iOSやAndroidでネイティブアプリっぽく動くPWAも含めてね。すごくいいよ！DaisyUIとTailwindCSSを組み合わせればまず間違いない。普通のHTMLにパーシャル（部分テンプレート）を組み合わせて、HTMXでSPAっぽいインタラクティブさを追加する書き方は、やっていてかなり気持ちがいい。

これ3年も前の話だよね…なぜ今さらニュースになっているんだろう？

2年前にReact/VueからHTMXに乗り換えたけど、今も絶好調だよ。

今はHono + WebComponents + HTMX + サーバーレスっていう構成でアプリのバックエンドを組んでる。

Djangoとフロントエンドフレームワークを組み合わせるのは個人的にかなり苦戦してる（趣味で触ってる程度だけどね）。バックエンドをREST APIとして切り離せばうまくいくと思う。django-rest-frameworkとかdjango-ninjaは調べてみたけど、そうするとDjangoが標準で備えてる便利な機能の多くを捨てることになるよね。いっそのこと、管理画面や内部ツールにはDjangoテンプレートを使い、一般ユーザー向けのサイトにはReactを使うのが賢い妥協点なのかな？

最近、あるサイトでHTMXを使ってみたんだ。4.0ベータ版を使って、ベンダー一覧を表示するフィルタリング機能付きの商品一覧ページを作ったんだけど、左側にフォームフィルタ、右側に結果の「カード」が並ぶ構成だった。

問題だったのは、すべてを一つの「レスポンス」として処理すると動作がすごく重くなったこと。フォーム全体と大きなセレクトリスト、さらに検索結果のHTMLを全部まとめて返すと、6件以上の結果があるだけで目に見えてラグが発生したんだ。

結局Alpine Ajaxに切り替えて、フォームをレスポンスから分離し、状態管理にはローカルのx-dataを使うようにした。これで返すHTMLの量を結果リストだけに絞れたので、かなり軽快になった。フォーム側の実装は少し複雑になったけど、操作感は劇的に向上したよ。どちらのバージョンもURLからフォームの状態を同期するようにして、初期表示はサーバーからのフルHTMLという点は同じだったしね。

使ってみて思ったのは、単にクラスや属性を切り替えるためだけにリクエストを送るようなインタラクティブなことをしたい場合、Alpine + Alpine Ajaxの方がHTMX 4よりもサイズが小さくて、より直感的で扱いやすい機能が多いってこと。もちろん両方組み合わせて使うこともできるけど、そうすると別々の世界を混ぜることになるし、バンドルサイズも増えてしまう。

HTMXは今でも好きだしまた使うと思うけど、今回みたいなHTMLレスポンスが大きくなりがちな商品一覧ページのような用途には、必ずしも最適解じゃないなと感じたよ。

htmxを使ってたけど、開発用にStorybookが使いたくてSvelteに移行せざるを得なかった。htmxにもああいうツールがあったらいいのに。

サーバーサイドレンダリングでDOMの一部を書き換えるような用途なら、https://pyview.rocks/ がおすすめ。Elixir PhoenixのLiveviewから着想を得ていて使い心地がいいし、パッチの適用も軽量だよ。