JSなしでUIが動く？HTMLだけで画面更新できるライブラリ

通常、ボタンをクリックして画面の一部だけ更新する（ページ全体をリロードせずにデータを反映する）には、JavaScriptを書く必要があります。ReactやVueといったフレームワークを使うか、少なくともfetchやaxiosでAPIを叩くコードが必要です。

htmxはその前提をひっくり返します。HTMLのタグに属性を追加するだけで、「このボタンを押したらサーバーにリクエストを送り、返ってきたHTMLをこの要素に差し込む」という動作が実現できます。たとえば hx-post="/submit" hx-target="#result" の2行をformタグに書けば、それだけでページ遷移なしのフォーム送信が動きます。

JSフレームワーク全盛のいま、あえてHTMLに立ち戻るアプローチとして注目を集めており、GitHubスター数は約4.9万。枯れたシンプルさを求める開発者コミュニティで支持が根強いライブラリです。

AIにコードを生成させる「バイブコーディング」との相性が、htmxの再評価を加速させています。

Reactで管理画面を作らせようとすると、コンポーネント設計・状態管理・ビルド設定まで巻き込んだ複雑なコードがAIから返ってきます。修正のたびにAIへの指示が長くなり、出力も肥大化していく。AIに「余計なコードを書かせない」ツールが登場でも触れたように、AI生成コードの「膨らみ」は今のバイブコーディングの実用上の課題です。

htmxに切り替えると、AIへの指示が「このフォームをhtmxで書いて、送信結果を#resultに表示して」のような短い日本語で済みやすくなります。生成されるコードもHTML中心でシンプルになるため、何が起きているかを人間が把握しやすい。フロントエンドの知識がなくても、出力物の構造を理解しながらAIと往復できる点が強みです。

LP・問い合わせフォーム・簡易管理画面など、「インタラクティブだけど複雑なSPAは要らない」用途にとくに向いています。

触る前に押さえておきたいのは、htmxはあくまで「HTMLとサーバーのやりとりを簡略化するツール」だという点です。

できること：ボタン・フォーム・リンクなどのイベントをトリガーにサーバーへリクエストを送り、返ってきたHTMLを指定した要素に挿入・更新・削除する。ポーリング（定期自動更新）やWebSocketとの連携も属性ベースで書けます。

できないこと（苦手なこと）：クライアント側だけで完結するリッチなインタラクション（ドラッグ&ドロップ、リアルタイムのグラフ描画など）は、htmxだけでは難しいケースがあります。また、htmxはサーバーがHTMLを返すことを前提としているため、JSONを返すREST APIとの組み合わせには素直にはまりません。バックエンドにFlask・FastAPI・Railsなど「HTMLを直接返せるサーバー」を用意するか、AIにその構成ごと作ってもらう必要があります。

「フロントはシンプルに、ロジックはサーバー側に寄せる」という設計思想に共感できるかどうかが、向き不向きの分かれ目です。