実践htmx入門 / practical-htmx

Shima Tech Hub#9 https://shima-tech-hub.connpass.com/event/344910/ で発表した「実践htmx入門」の記事です

Transcript

1. 実践htmx 入門
2. 自己紹介 @kimihito 株式会社ミノタケ (4 月で12 周年) https://x.com/kimihito_ https://github.com/kimihito 好きなもの: （今どきじゃない）フルスタックWeb フレームワーク Django (+ Alpine.js, htmx ) Rails (+ Hotwire) Phoenix (+ Phoenix Liveview)
3. AI の話しません Gamma もつかってません
4. htmx の話をしにきました 興味ないならまだご飯残っています、ご歓談ください
5. 基本編
6. htmx とは https://htmx.org HTML 拡張のためのライブラリ（html extensions ） HTML にインタラクティブ性を付加する新しいアプローチ シンプルな属性ベースのAPI htmx の誤解 JavaScript を書かなくていいとはいってない
7. htmx の基本コンセプト hx-post : HTTP メソッドと送信先 hx-trigger : イベントの種類 hx-target : 結果の反映先 hx-swap : DOM 更新方法 <button hx-post="/clicked" hx-trigger="click" hx-target="#result" hx-swap="outerHTML"> クリックしてください </button> <div id="result"></div>
8. 実践編 やってみてよかったことを紹介
9. 実践例1: Alpine.js との組み合わせ htmx: サーバーとの非同期通信を担当 Alpine.js: UI 状態（送信中状態）を管理 イベント連携: htmx のイベントをAlpine.js でキャッチ <form x-data="{ submitting: false }" hx-post="/api/submit" hx-indicator="#spinner" @htmx:before-request="submitting = true" @htmx:after-request="submitting = false"> <input type="text" name="username" required> <button type="submit" :disabled="submitting" x-text="submitting ? '送信中...' : '送信する'"> </button> <span id="spinner" class="htmx-indicator"> 処理中... </span> </form>
10. 実践例2: リクエストの間引き delay : 入力が止まってから指定時間後に実行（デバウンス） throttle : 指定時間内は1 回だけ実行（スロットリング） <!-- 入力が止まって300ms経過後にリクエスト --> <input type="text" name="search" hx-get="/search" hx-trigger="keyup delay:300ms" hx-target="#search-results"> <!-- 最大でも2秒に1回だけリクエスト --> <div hx-get="/api/status" hx-trigger="every 2s throttle:2000ms"> ステータス更新中... </div>
11. 実践例3: サーバーからイベント サーバーからのレスポンス: <div x-data="{ messages: [] }" @showMessage.window=" this.messages.push({ text: $event.detail.value, time: new Date() }) "> <div class="notifications"> <template x-for="msg in messages" :key="msg.time"> <div class="toast" x-text="msg.text"></div> </template> </div> <div hx-get="/api/notifications" hx-trigger="every 10s" hx-target="#notification-area"> 最新のお知らせ </div> <div id="notification-area"></div> </div> HTTP/1.1 200 OK HX-Trigger: {"showMessage": "新しい通知があります"} Content-Type: text/html <div>更新された通知内容...</div>
12. htmx の立ち位置（感想） 出典: u/Abhilash26 on r/htmx
13. まとめ htmx はHTML を拡張して動的UI を実現 アトリビュートベースで直感的 他のJS ライブラリとの組み合わせで表現力UP HX-* ヘッダーでサーバーからクライアントを制御 参考リソース 公式サイト: htmx.org ドキュメント: htmx.org/docs GitHub: github.com/bigskysoftware/htmx
14. おしまい ご清聴ありがとうございました
15. あまったら余談
16. Node.prototype.moveBefore() がおもしろい！！！ https://github.com/whatwg/dom/issues/1255 https://htmx.org/examples/move-before/ Chrome 133 （今月リリース）で有効になってます htmx の作者やReact 、Angular が推進していたAPI
17. The future of htmx というエッセイがおもしろい 次のjQuery をめざす 安定こそ機能である 機能追加はしない などなど。おもしろいです https://htmx.org/essays/future/