実践htmx 入門

自己紹介 @kimihito 株式会社ミノタケ (4 月で12 周年) https://x.com/kimihito_ https://github.com/kimihito 好きなもの: （今どきじゃない）フルスタックWeb フレームワーク Django (+ Alpine.js, htmx ) Rails (+ Hotwire) Phoenix (+ Phoenix Liveview)

AI の話しません Gamma もつかってません

htmx の話をしにきました 興味ないならまだご飯残っています、ご歓談ください

基本編

htmx とは https://htmx.org HTML 拡張のためのライブラリ（html extensions ） HTML にインタラクティブ性を付加する新しいアプローチ シンプルな属性ベースのAPI htmx の誤解 JavaScript を書かなくていいとはいってない

htmx の基本コンセプト hx-post : HTTP メソッドと送信先 hx-trigger : イベントの種類 hx-target : 結果の反映先 hx-swap : DOM 更新方法 クリックしてください

実践編 やってみてよかったことを紹介

実践例1: Alpine.js との組み合わせ htmx: サーバーとの非同期通信を担当 Alpine.js: UI 状態（送信中状態）を管理 イベント連携: htmx のイベントをAlpine.js でキャッチ 処理中...

実践例2: リクエストの間引き delay : 入力が止まってから指定時間後に実行（デバウンス） throttle : 指定時間内は1 回だけ実行（スロットリング）

実践例3: サーバーからイベント サーバーからのレスポンス: HTTP/1.1 200 OK HX-Trigger: {"showMessage": "新しい通知があります"} Content-Type: text/html

htmx の立ち位置（感想） 出典: u/Abhilash26 on r/htmx

まとめ htmx はHTML を拡張して動的UI を実現 アトリビュートベースで直感的 他のJS ライブラリとの組み合わせで表現力UP HX-* ヘッダーでサーバーからクライアントを制御 参考リソース 公式サイト: htmx.org ドキュメント: htmx.org/docs GitHub: github.com/bigskysoftware/htmx

おしまい ご清聴ありがとうございました

あまったら余談

Node.prototype.moveBefore() がおもしろい！！！ https://github.com/whatwg/dom/issues/1255 https://htmx.org/examples/move-before/ Chrome 133 （今月リリース）で有効になってます htmx の作者やReact 、Angular が推進していたAPI

The future of htmx というエッセイがおもしろい 次のjQuery をめざす 安定こそ機能である 機能追加はしない などなど。おもしろいです https://htmx.org/essays/future/