Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
実践htmx 入門
Slide 2
Slide 2 text
自己紹介 @kimihito 株式会社ミノタケ (4 月で12 周年) https://x.com/kimihito_ https://github.com/kimihito 好きなもの: (今どきじゃない)フルスタックWeb フレームワーク Django (+ Alpine.js, htmx ) Rails (+ Hotwire) Phoenix (+ Phoenix Liveview)
Slide 3
Slide 3 text
AI の話しません Gamma もつかってません
Slide 4
Slide 4 text
htmx の話をしにきました 興味ないならまだご飯残っています、ご歓談ください
Slide 5
Slide 5 text
基本編
Slide 6
Slide 6 text
htmx とは https://htmx.org HTML 拡張のためのライブラリ(html extensions ) HTML にインタラクティブ性を付加する新しいアプローチ シンプルな属性ベースのAPI htmx の誤解 JavaScript を書かなくていいとはいってない
Slide 7
Slide 7 text
htmx の基本コンセプト hx-post : HTTP メソッドと送信先 hx-trigger : イベントの種類 hx-target : 結果の反映先 hx-swap : DOM 更新方法 クリックしてください
Slide 8
Slide 8 text
実践編 やってみてよかったことを紹介
Slide 9
Slide 9 text
実践例1: Alpine.js との組み合わせ htmx: サーバーとの非同期通信を担当 Alpine.js: UI 状態(送信中状態)を管理 イベント連携: htmx のイベントをAlpine.js でキャッチ
処理中...
Slide 10
Slide 10 text
実践例2: リクエストの間引き delay : 入力が止まってから指定時間後に実行(デバウンス) throttle : 指定時間内は1 回だけ実行(スロットリング)
ステータス更新中...
Slide 11
Slide 11 text
実践例3: サーバーからイベント サーバーからのレスポンス:
最新のお知らせ
HTTP/1.1 200 OK HX-Trigger: {"showMessage": "新しい通知があります"} Content-Type: text/html
更新された通知内容...
Slide 12
Slide 12 text
htmx の立ち位置(感想) 出典: u/Abhilash26 on r/htmx
Slide 13
Slide 13 text
まとめ htmx はHTML を拡張して動的UI を実現 アトリビュートベースで直感的 他のJS ライブラリとの組み合わせで表現力UP HX-* ヘッダーでサーバーからクライアントを制御 参考リソース 公式サイト: htmx.org ドキュメント: htmx.org/docs GitHub: github.com/bigskysoftware/htmx
Slide 14
Slide 14 text
おしまい ご清聴ありがとうございました
Slide 15
Slide 15 text
あまったら余談
Slide 16
Slide 16 text
Node.prototype.moveBefore() がおもしろい!!! https://github.com/whatwg/dom/issues/1255 https://htmx.org/examples/move-before/ Chrome 133 (今月リリース)で有効になってます htmx の作者やReact 、Angular が推進していたAPI
Slide 17
Slide 17 text
The future of htmx というエッセイがおもしろい 次のjQuery をめざす 安定こそ機能である 機能追加はしない などなど。おもしろいです https://htmx.org/essays/future/