実践htmx入門 / practical-htmx

実践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 更新方法 <button hx-post="/clicked" hx-trigger="click" hx-target="#result" hx-swap="outerHTML"> クリックしてください </button> <div id="result"></div>

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

実践例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>

実践例2: リクエストの間引き delay : 入力が止まってから指定時間後に実行（デバウンス） throttle : 指定時間内は1 回だけ実行（スロットリング）  <input type="text" name="search" hx-get="/search" hx-trigger="keyup delay:300ms" hx-target="#search-results">  <div hx-get="/api/status" hx-trigger="every 2s throttle:2000ms"> ステータス更新中... </div>

実践例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>

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/

実践htmx入門 / practical-htmx

実践htmx入門 / practical-htmx

kimihito

More Decks by kimihito

Featured

Transcript