ウェブページに動きをつけるには、JavaScriptの枠組みを一式そろえるのがふつうだった。htmxは、その常識に逆らって育った小さなライブラリだ。HTMLのタグに属性を数個書き足すだけで、ボタンを押すとサーバから届いた断片が画面に差し込まれる。そのhtmxが8月28日、8か月の開発を経て4.0.0を公開した。目玉は新しい機能ではなく、これまで自動で効いていた仕組みを止めることだった。手間の増える方へ、なぜわざわざ動いたのだろうか。
HTML属性だけでページを動かすライブラリ
htmxは、HTMLのタグに属性を書き足すだけでサーバとやりとりできるJavaScriptライブラリだ。Reactのような大きな枠組みを入れなくても、押すと中身が入れ替わる画面を作れる。
ふつうのウェブページは、リンクを押すと1枚まるごと読み込み直す。htmxを読み込んだページでは、ボタンに hx-delete="/item/1" のような属性を書いておくと、押した時点でサーバへ要求が飛び、返ってきたHTMLの断片が指定した場所に入る。書き手はJavaScriptを1行も書かずに済む。
4.0.0は8か月の開発を経て、2026年8月28日に公式サイトで告知された。内部でサーバとやりとりする仕組みは、古いXMLHttpRequestから新しいfetch()へ入れ替わった。ただし使う側から見た書き方は2系とほとんど変わらない。大きく変わったのは3か所だけだと開発チームは書いている。
最大の破壊的変更は属性の継承にある
htmx 2では、親要素に書いた属性が子要素にも自動で効いていた。4.0はその継承をやめ、効かせたい属性には :inherited を書き足すよう求める。
たとえば削除ボタンを囲む <div> に hx-confirm="Are you sure?" と書けば、htmx 2では中のボタンを押したときにも確認の問いが出た。4.0で同じ動きを残すには hx-confirm:inherited と書く。継承の仕組みはCSSをまねたもので、前身のintercooler.jsの時代から引き継がれてきた。強力だが分かりにくい面もあった、と開発チーム自身が振り返っている。
怖いのは、効かなくなっても画面が壊れないところだ。確認の問いが出ないまま削除だけが通る、という消え方をする。公式は点検の道具を用意していて、npx htmx.org@4.0.0 upgrade-check -- ./templates と打つと、直す場所を行番号つきで並べる。出力の例には、不正な要求をはじくための合言葉を親に置いたまま :inherited を付けないと、値が子に届かずサーバに要求を拒まれる、という警告が入っている。
変わったのは継承だけではない。イベントの名前は htmx:afterRequest から htmx:after:request へ、段階と動作を区切る形にそろえられた。ページを戻ったときの表示も、ブラウザの中に溜めた写しを出す方式をやめ、もう一度サーバから取り直して差し替える。外部のJavaScriptが混ざったページで写しが壊れる、という相談が絶えなかったためだという。
新版を出しても既定は2.x系に据え置く
htmxチームは4.0をnpmの「latest」にしなかった。版を指定せずに読み込んでいる利用者を、勝手に新版へ動かさないためだ。
npmはライブラリの置き場で、latestの印が付いた版が、細かい指定をしていない利用者のところへそのまま降りていく。htmxはページからファイルを直接読み込んで使う例も多く、版を書かずに最新を指す書き方が広く使われている。だから4.0系にはnextという別の印を付け、2027年初めごろまで2.x系をlatestに残す。移りたい人だけが4.0.0と版を書いて取りに行く。
公式サイトの記述は4.0に切り替わる。2系のサポートは当面続けるとしていて、発表文には、急いで移る必要はないと書き添えてある。
開発チームは、2系と4系で動きが分かれる箇所は意図して選んだと説明し、htmxで作ったウェブサービスが100年動きつづけるための選択だと書いている。自動で効く仕組みは、書いた本人にしか読めない。10年後にHTMLを開いた人に伝わるのは、そこに書いてある一言だけだ。
拡張とAI向けの手引きまで同梱する
4.0の新しさは本体より拡張に出ている。画面の差分だけを当てる書き換え、先読み、サーバから少しずつ届ける通信が、それぞれ部品として用意された。
本体には、古い画面と新しい画面を突き合わせて違うところだけ書き換えるやり方が最初から入った。作者が別に公開していたidiomorphという道具の手法を、今回は本体へ取り込んだ。あわせて <hx-partial> というタグが加わり、1回の返信で複数の場所を別々に書き換えられる。
拡張には、マウスを載せた時点で先に中身を取りに行く hx-preload、ファイルの取得を受け持つ hx-download、画面に小さな動きをつけるAlpine.jsとの食い合わせを直す hx-alpine-compat が並ぶ。サーバから少しずつ流し込む通信は hx-sse、hx-ws、hx-multipart の3つに分かれた。どれを選ぶか迷う人向けに、よく使われるものをまとめた htmax.js も配られる。
LLM向けの手引きも4種類、同梱された。中身は開発の手引き、不具合の切り分け、拡張の書き方、2.xからの移行だ。移行の作業をAIに任せるための手引きも別に用意されている。発表文には、LLMの時代に新しい版を出すのが良いか悪いかはここでは置いておこう、という一言が添えてあった。
自動で効いていた仕組みを明示の一言に置き換える作り替えは、100年動かすと言い切った側の覚悟に見える。その一言を書き足すのが人なのか、古い書き方を覚えたLLMなのかは、2027年の切り替えを過ぎたころに見えてきそうだ。
出典
- htmx 4.0.0 has been released! htmx.org、2026年8月28日