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/