ハクソク

世界を動かす技術を、日本語で。

Htmx 4.0.0

2026年8月28日原文(four.htmx.org)

概要

  • htmx 4.0.0 が8ヶ月の開発を経てリリース
  • 主な変更点は fetch()移行、属性継承の明示化、イベント名の統一
  • 履歴管理 や新機能（morph swap, <hx-partial>）の追加
  • 拡張機能の充実とアップグレード支援ツールの提供
  • htmx 2.xは引き続きサポート、4.xは段階的展開

htmx 4.0.0 リリース概要

  • htmx 4.0.0 の正式リリース発表
  • 約8ヶ月の開発期間とチームの協力による成果
  • fetch() API と非同期プログラミングへの移行
  • ChristianからのHTMLストリーミング提案による内部設計の刷新
  • MichaelとAlexの参加による開発体制強化
  • fixiとhtmxテストスイートの移植作業
  • 2.xと4.xの動作差分は最小限、意図的な設計変更のみ
  • 100年先を見据えたWebサービス基盤の目指す姿
  • NPMでは2.xを最新、4.xはnextとして2027年まで並行提供
  • 公式Webサイトは 4.0 を参照

主な変更点

  • ユーザー視点では htmx 2とほぼ同等の操作感
  • 3つの大きな変更点
    • 属性継承 がデフォルトで明示指定に
    • イベント名の統一・整理 （リスナーの変更が必要な場合あり）
    • 履歴サポートが localStorage非使用 に変更（多くの不具合解消）

属性継承

  • htmx 2では多くの属性が 暗黙的に継承
  • htmx 4では :inherited サフィックスを付けて明示的に継承指定
    • 例: <div hx-confirm:inherited="Are you sure?">
  • hx-disinherit等の属性は不要となり、削除が推奨
  • 移行支援のため コマンドラインツール を提供

イベント

  • htmx 2のイベント名 は有機的に増加し体系化されていなかった
  • htmx 4では htmx:phase:action[:sub-action] 形式で統一
    • 例: htmx:before:request, htmx:after:swap
  • 主な変更点
    • エラーイベントは htmx:error に集約
    • HTTPエラー時は htmx:response:error 発火
    • htmx:xhr:*、 htmx:validation:* イベントは削除
    • フルイベント一覧は公式ドキュメント参照
  • 移行ツールで 旧イベント名の自動検出 可能

履歴管理

  • htmx 2では localStorageキャッシュ によるページスナップショット方式
  • 3rdパーティJSによるDOM変化が復元時に不整合を招く問題
  • htmx 4では localStorage非使用、戻る操作時は再リクエストしてbody等に差し替え
  • 3rdパーティJSとの連携が向上、キャッシュ活用で高速化も可能
  • hx-history-cache拡張 でsessionStorageキャッシュも選択可能

新機能

  • Morph Swaps 機能の標準搭載
    • DOM差分を検知し最小限の変更で要素を更新
  • <hx-partial>タグ の追加
    • out-of-band swapに似るが、より明確な部分更新を実現
    • 例: <hx-partial hx-target="#messages" hx-swap="beforeend">...</hx-partial>

拡張機能とエコシステム

  • fetch()移行 により拡張機能の設計を刷新
  • 主な新・更新拡張
    • hx-preload ：マウスオーバー等で事前ロード
    • hx-download ：ファイルダウンロードにfetch()活用
    • hx-alpine-compat ：Alpine.jsとの互換性向上
    • hx-history-cache ：sessionStorage利用の履歴キャッシュ
    • hx-sse ：Server-Sent Events対応
    • hx-ws ：WebSocket対応
    • hx-multipart ：multipart/mixedストリーミング対応
  • hx-live ：Alpine.jsやjQueryに着想を得たスクリプト拡張
    • DOMベースのHATEOASリアクティビティ対応
  • htmax.jsバンドル ：人気拡張を一括パッケージ

アップグレード方法

  • 公式アップグレードガイド とコマンドラインツール提供
    • 例: $ npx htmx.org@4.0.0 upgrade-check -- ./templates
    • 対応拡張子: .html, .php, .js, .ts, .jinja, .jinja2, .j2, .erb, .hbs等
    • 各種非推奨・削除属性やイベント名の検出・修正案提示
  • エージェントスキル によるアップグレード支援
  • インストール方法
    • パッケージマネージャで4.0.0指定
    • CDN: <script src="https://unpkg.com/htmx.org@4.0.0/dist/htmx.min.js"></script>
  • LLM向けスキルファイル も提供
    • htmx-guidance, htmx-debugging, htmx-extension-authoring, htmx-upgrade-from-htmx2

結論と謝辞

  • htmx 2.xは今後も無期限サポート
  • 強制的なアップグレード不要
  • 開発・テスト・エコシステム拡充に貢献したチーム・協力者への感謝
  • 恒例の「アップグレードミュージック」も紹介

参考:

  • 公式サイト: https://htmx.org
  • アップグレード詳細: What's New in htmx 4

Hackerたちの意見

このリリースの画像がOmarchy Quattroと同じなのは偶然なのかな？ https://youtu.be/F7fe9pa8OeE

└

あー、恥ずかしいな。誰かがツイッターで作ったやつで、Omarchyからのだって気づかなかった。消しちゃった、ごめんね。

└

それがジョークだと思うよ。

HTMXのCEOとして、チームが達成した成果をとても誇りに思っています。

└

好きか嫌いかは別として、多くの人がLLMを使っていて、私たちは次のスキルファイルを提供しています。「何のために？」私たちを放置しないで！

└

HTMXのCEOとして、この発言に賛成します。次の大きな動きは、資産を収益化することだと思いますね。

すごいライブラリだね。本当に使うのが楽しい。エージェントは、これを使って作るサイトにすごく合ってるし、作るのもめっちゃ簡単。アップグレードスキルありがとう！

おめでとう、そしてありがとう！htmxは私に喜びをもたらしてくれる。今作る実験はほとんどがGo、htmx、SQLiteから始まって、シンプルで速いけどレスポンシブな感じにしてる。これについてもう少し考えをここに書いたよ： https://housecat.com/blog/the-hugs-stack-hypermedia-unix-go-...

└

おお、すごい！自分では絶対選ばない組み合わせだけど、あなたのテンプレートのおかげで試してみたくなった！

└

同意だね。実際、DjangoとPostgresがhtmxには最適なソリューションだと思うけど、Goスタックも開発速度の面ではほぼ同じくらい良いし、もちろんずっと速いよね。だから、これはいい解決策だと思う。htmxを使えば、強力なプロダクションアプリを本当に作れるし、みんなが過小評価しているのは、AI支援開発との相性の良さなんだよね（Claudeはそれを理解してうまくやってくれるし、特定のテンプレートに必要なJSのグルーコードも、結構きれいに書かれているから、混乱することもない）。

└

GOSHスタック（Go Sqlite Htmx）って呼んでるけど、HUGSもいいよね。

└

僕も同じスタックが好きだよ。ターミナル中心のワークフローと相性がいいからね。

Hacker Newsで議論の続きを見る