HTMXが『フロントフレームワーク疲れ』への解答になる
HTMXはHTMLの拡張属性（hx-get・hx-post・hx-swap等）を追加するだけで、ページ全体リロードなしの部分更新・モーダル・無限スクロール等のSPA的体験を実現します。バックエンド主導の設計で、フロントエンドフレームワーク（React/Vue）の複雑性・ビルドツール・状態管理を回避できる点が、フルスタックTSサーバ・Pythonサーバ・Rails開発者に支持されています。2024年v2リリース・ChatGPTでHTMXコード生成も洗練され、本番採用例が拡大中です。
採用すべき5つのシグナル
- ReactのHooks/状態管理/Suspenseに疲れた
- Bun/Hono/Rails/Django等のサーバサイドが主役のスタック
- SEO・初期表示速度を最優先
- JSバンドルサイズを最小化したい
- フロントエンドエンジニア不在の小チームでフルスタック開発
React/Vue/HTMX比較
React/Vue: 強力・大規模アプリ向き・学習コスト中・運用ノウハウ豊富。
HTMX: 軽量（バンドル14KB）・サーバ駆動・学習コスト低・SPA代替で十分なケース多数。
Phoenix LiveView/Hotwire: HTMXに似たサーバ駆動・各フレームワーク固有。
使い分け: 複雑な状態管理SPAはReact、サーバ中心はHTMX。
HTMX 2の主要機能
- hx-get/post/put/delete: HTTPリクエストをHTMLから直接送信
- hx-swap: レスポンスのHTMLをどこに差し込むか制御
- hx-trigger: クリック・ロード・キーストローク等のトリガー
- hx-target: 差し込み先要素を指定
- WebSocket統合: hx-ws属性でリアルタイム双方向通信
- SSE統合: Server-Sent Eventsでサーバプッシュ
実装の基本パターン
(1) フォーム送信: <form hx-post='/api/save' hx-target='#result'>
(2) 無限スクロール: <div hx-get='/items?page=2' hx-trigger='revealed'>
(3) モーダル: <button hx-get='/modal' hx-target='body' hx-swap='beforeend'>
(4) リアルタイム更新: <div hx-ws='connect:/ws' hx-swap='innerHTML'>
(5) ブラウザ履歴: hx-push-url='true'でURLを更新
バックエンドフレームワークとの相性
- Hono+HTMX: 軽量TS統合・人気急上昇
- FastAPI+HTMX: Pythonサーバ中心の選択肢
- Rails+HTMX: Hotwireの代替・コードがシンプル
- Django+HTMX: Django Cottonと組み合わせ・Pythonエコシステム活用
- Go+HTMX: 高速サーバとの組み合わせ
HTMXが向かないケース
- 複雑な状態管理が必要（ダッシュボード等）
- オフライン対応・PWA・Service Worker要件
- 大規模フロントエンドエンジニアチーム
- モバイルアプリ（React Native等）と共通コード
- 高度なアニメーション・3Dグラフィック
30日学習プラン
- 1週目: HTMX 2でTo-Doアプリ・CRUD実装
- 2週目: ファイルアップロード・無限スクロール・モーダル
- 3週目: WebSocket・SSE・リアルタイム更新
- 4週目: 本番デプロイ・パフォーマンス最適化
関連リンク
サーバサイド設計は サーバサイド実践、Honoとの組み合わせは Hono深掘り、React比較は Reactパフォーマンス を参照してください。フロントエンドの選択肢は フロントエンドフレームワーク選び方 もどうぞ。