Web開発
Htmx 4.0.0 がリリースされました
Htmx 4.0.0 has been released (four.htmx.org)
要約
Web開発ライブラリであるhtmxのメジャーバージョン4.0.0がリリースされました。今回のアップデートでは、内部実装がXMLHttpRequestからfetch() APIに移行し、非同期プログラミングへの対応が強化されました。主な変更点として、属性継承の明示化、イベント名の標準化、履歴サポートにおけるlocalStorageのデフォルト無効化、そしてMorph Swapsや<hx-partial>タグといった新機能の追加があります。
全文翻訳
htmx 4.0.0 リリース
htmxチームはhtmx 4.0.0のリリースを発表できることを大変嬉しく思います！これは8ヶ月（とゲーム開発）の集大成であり、その結果に非常に満足しています。htmx 4のアイデアは、私がfixiを作成することを決意し、その過程でfetch() APIとJavaScriptの非同期プログラミングに精通するようになったときに芽生え始めました。（htmxは常に後方互換性の問題からXMLHttpRequestを使用していました。）ある夜、ChristianからHTMLストリーミングに関する興味深いアイデアについて連絡があり、内部実装をfetch()に移行すれば、彼にとってもライブラリ全体にとっても物事がシンプルになるだろうと考えさせられました。少し作業した後、MichaelとAlexを仲間に引き入れることに成功し、私たちはレースに飛び込みました。開発は非常に順調に進みました。fixiとhtmxのテストスイートのポートを開始しました。時間をかけて、htmxが多くのことを行っていた理由を再発見し、新しい実装を古いものにどんどん近づけていきました。この時点で、2.xと4.xの間の動作上の違いは比較的小さく、もし違いがある場合でも、htmxベースのアプリケーションを100年続くWebサービスとして良い位置に置くことができると確信した明確な選択を行いました。NPMでは4.0をlatestとしてマークしていません。これは、htmxのバージョン指定なしのCDN URLに依存しているユーザーに強制的なアップグレードを望まないためです。代わりに、2.xはlatestのままで、4.0ラインは2027年初頭までnextのままになります。ただし、ウェブサイトは4.0を参照します。
主な変更点
前述の通り、ユーザーの視点から見ると、htmx 4はhtmx 2とほぼ同一です。3つの主要な変更点があります。
属性継承は、デフォルトで暗黙的ではなく、明示的になりました（これが最大のアップグレード項目です）。
htmxのイベント名が標準化・整理されました。一部の上級ユーザーは、リスニングするイベントを変更する必要があるかもしれません。
履歴サポートは、デフォルトでlocalStorageを使用しなくなりました（これは多くのサポート上の問題の原因でした）。ほとんどの人は全く気づかないでしょう。
内部的には、XMLHttpRequestからfetch()に移行しましたが、これはほとんどのhtmxユーザーにとって透過的であるはずです。
属性継承
htmx 2では、多くの属性がデフォルトで「継承」されていました。これにより、親要素に属性を配置し、その動作を子要素に適用することができました。この動作は、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>
これは、htmx 2からhtmx 4への移行における最大の負担となるでしょう。これを容易にするために、マークアップが必要な場所を見つけるためのコマンドラインツールを提供しています。hx-disinheritなどの属性は不要になり、削除されるべきであることに注意してください。
イベント
htmx 2によってトリガーされたイベントは、ライブラリのライフサイクルを通じて有機的に成長し、特に整理されていなかったため、どのイベントがいつ発生したかを正確に知ることが困難でした。htmx 4では、すべてのイベントがhtmx:phase:action[:sub-action]に従います。
htmx 2 | htmx 4
---|---
htmx:beforeRequest | htmx:before:request
htmx:afterRequest | htmx:after:request
htmx:beforeSwap | htmx:before:swap
htmx:afterSwap | htmx:after:swap
htmx:configRequest | htmx:config:request
さらに、以下の変更が行われました。
ほとんどのエラーイベントはhtmx:errorに集約されます。HTTPエラー応答はhtmx:response:errorを発生させます。htmx:xhr:*イベントは削除されました。htmx 4はfetch()を使用します。htmx:validation:*イベントはネイティブブラウザのフォーム検証を優先するために削除されました。完全な表は「htmx 4の新機能」にあります。コマンドラインアップグレードチェッカーは、hx-on属性やJavaScriptで見つかった古いイベント名をフラグ付けします。
履歴
htmxには常に履歴サポートが含まれており、簡単な属性でバックボタンに対応したアクションを実装できます。htmx 2では、localStorageのキャッシュを使用してページの復元スナップショットを作成していました。残念ながら、多くの問題の原因は、このスナップショットにサードパーティのJavaScriptライブラリによるDOMの変更が含まれる可能性があったことです。ページが復元されると、それらの変更は残りましたが、基盤となるJavaScriptロジックはそうではありませんでした。
htmx 4はlocalStorageにページをキャッシュしません。バックナビゲーション時に、htmxはページを再取得し、それを<body>に、または存在する場合は[hx-history-elt]要素にスワップします。これにより、サードパーティのJavaScriptライブラリがほとんどの場合「そのまま機能する」ようになり、適切なリクエストキャッシュがあれば非常に高速です。代わりにローカルキャッシュが必要な場合は、sessionStorageから履歴を復元する非常に完全なhx-history-cache拡張機能を提供しており、Alpine.jsなどのスクリプトソリューションとシームレスに統合できるように設計されています。
新機能
htmx 4には2つの大きな新機能があり、どちらも非常にエキサイティングです。
Morph Swaps
htmxでアウトオブザボックスでモーフスワップをサポートするようになりました。私はidiomorphを作成し、htmx 2.xに含めようとしましたが、断念しました。htmx 4では、Michaelがそのアルゴリズムを改善し、htmxにシームレスに統合するために素晴らしい仕事をしてくれました。
<hx-partial>
もう一つの主要な新機能は<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>
拡張機能
htmx 4の興奮の多くは拡張機能にあります。内部的にfetch()に切り替えたことで、拡張機能がどのように機能するか、また機能すべきかを再考できるようになり、多くの新しい拡張機能の作成（および再作成）を sparkしました。例えば：
hx-preload - リクエストを高速化するためにコンテンツをプリロードします（例：マウスオーバー時）。
hx-download - フェッチベースのネイティブファイルダウンロード。
hx-alpine-compat - htmxとAlpine.js間の互換性の問題をスムーズにします。
hx-history-cache - sessionStorageに履歴をキャッシュし、Alpine.js互換性を提供します。
さらに、3つの新しいまたは更新されたストリーミングHTML拡張機能があります。
hx-sse - text/event-stream overでストリームします。
hx-ws - WebSocket overでストリームおよび送信します。
hx-multipart - multipart/mixed overでストリームします。
最後に、htmxと緊密に統合された独自の小さなフロントエンドスクリプティングソリューションを試す時期が来たと判断しました。hx-liveはAlpine.js、jQuery、hyperscriptに触発されており、フロントエンドスクリプティングを快適で楽しいものにします。DOMベースのHATEOASフレンドリーなリアクティビティもサポートしています。配布物には、それらのうち最も人気のあるものを単一ファイルにパッケージ化した新しいhtmax.jsバンドルがあり、どれを選択するかを考える必要がありません。
アップグレード
完全なアップグレードガイドについては、「htmx 4の新機能」を参照してください。前述の通り、アップグレードを支援するためのツールを提供しています。
$ npx htmx.org@4.0.0 upgrade-check -- ./templates
File extensions: .html, .php, .js, .ts, .jinja, .jinja2, .j2, .erb, .hbs
Use --ext to add more (e.g. --ext .vue --ext .svelte)
Scanning 1 file(s)...
Found 8 issue(s) in 1 of 1 file(s).
templates/index.html:1: [inheritance] hx-headers needs :inherited suffix (descendant on line 3 has hx-delete) (this looks like a CSRF token; without :inherited the header does not reach child elements and the server rejects the request)
templates/index.html:2: [inheritance] hx-target needs :inherited suffix (descendant on line 3 has hx-delete)
templates/index.html:2: [inheritance] hx-confirm needs :inherited suffix (descendant on line 3 has hx-delete)
templates/index.html:3: [renamed-attr] hx-disable -> rename to hx-ignore (hx-disable now means 'disable during request')
templates/index.html:4: [removed-attr] hx-vars is removed -> use hx-vals with js: prefix
templates/index.html:4: [removed-attr] hx-prompt is removed -> load the hx-prompt extension to keep the same syntax
templates/index.html:9: [old-event] old event