htmx 4.0.0 リリース: fetch() を内部採用、属性継承の明示化、モーフィングスワップ

htmx 4.0.0 が8ヶ月の開発を経てリリースされ、見出しとなるのはライブラリ内部が XMLHttpRequest から fetch() に移行したことです。この移行は fixi を構築する際の実験として始まり、Christian のストリーミングHTMLに関するアイデアに後押しされ、拡張システムの再設計と新機能の数々への道を開きました。

ユーザーの視点から見ると、htmx 4 は意図的に htmx 2 に近い設計です。チームは動作の違いは小さく、差異がある場合は明示的な選択になると述べています。3つの大きな変更点は、属性継承が暗黙的ではなくオプトインになったこと、イベント名が標準化されたこと、history サポートがデフォルトで localStorage を使わなくなったことです。

属性継承: 明示的に

htmx 2 では、親要素の hx-confirm のような属性が子要素に継承されました。これは intercooler.js から受け継がれ、CSS に触発された動作です。CSS と同様に強力ですが、しばしば混乱を招きました。htmx 4 では、属性を継承させるには :inherited を付ける必要があります:

<!-- htmx 2 -->
<div hx-confirm="Are you sure?">
    <button hx-delete="/item/1">Delete</button>
</div>

<!-- htmx 4 -->
<div hx-confirm:inherited="Are you sure?">
    <button hx-delete="/item/1">Delete</button>
</div>

これが最大の移行負担となるため、チームは :inherited マーカーが必要な箇所を検出するコマンドラインツールを提供しています。hx-disinherit のような属性は不要になり、削除すべきです。

イベント: 命名の標準化

htmx 2 のイベントは有機的に成長し、追跡が困難でした。htmx 4 では、すべてのイベントが htmx:phase:action[:sub-action] のパターンに従います。例えば、htmx:beforeRequest は htmx:before:request に、htmx:afterSwap は htmx:after:swap になります。ほとんどのエラーイベントは htmx:error に統合され、HTTPエラーは htmx:response:error を発火します。htmx:xhr:* イベントは、htmx が fetch() を使うようになったため廃止され、htmx:validation:* イベントはネイティブのブラウザフォーム検証に置き換えられました。

History: localStorage はもう使わない

htmx 2 はページスナップショットを localStorage にキャッシュしていましたが、サードパーティのJavaScriptがDOMを変更し、その変更が復元後も基盤となるロジックなしに残るという頭痛の種を引き起こしました。htmx 4 は戻るナビゲーション時にページを再取得し、body（または [hx-history-elt] 要素）にスワップします。ローカルキャッシュが必要な場合は、sessionStorage を使用し Alpine.js と相性の良い新しい hx-history-cache 拡張があります。

新機能: モーフィングと hx-partial

2つの大きな機能が際立っています。まず、モーフィングスワップが組み込みになり、改良版の idiomorph アルゴリズムを使用します。次に、新しい <hx-partial> タグで、単一レスポンスでページの複数部分をターゲットにでき、帯域外スワップの単一要素置換を超えます:

<hx-partial hx-target="#messages" hx-swap="beforeend">
    <div>New message</div>
</hx-partial>
<hx-partial hx-target="#count">
    <span>5</span>
</hx-partial>

拡張と hx-live 実験

fetch() への移行は拡張エコシステムを活性化させました。新しい拡張には hx-preload、hx-download、hx-alpine-compat、hx-history-cache が含まれます。SSE、WebSockets、multipart 用のストリーミング拡張も更新されています。チームはまた、Alpine.js と jQuery に触発された小さなスクリプトソリューション hx-live を紹介しており、DOMベースで HATEOAS に優しいリアクティビティと説明しています。新しい htmax.js バンドルは、htmx と最も人気のある拡張を1つのファイルにまとめています。

注目すべき点として、htmx 4 は npm で latest タグが付けられていません。2.x 系は latest のままで、バージョン指定のないCDN URLのユーザーを壊さないようにし、4.0 は2027年初頭まで next です。ただし、ウェブサイトは 4.0 を参照します。