Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
実践htmx入門 / practical-htmx
Search
kimihito
February 28, 2025
1
130
実践htmx入門 / practical-htmx
Shima Tech Hub#9
https://shima-tech-hub.connpass.com/event/344910/
で発表した「実践htmx入門」の記事です
kimihito
February 28, 2025
Tweet
Share
More Decks by kimihito
See All by kimihito
Vue2 EOL!? Alpine.js waits for you
kimihito_
0
150
htmx is not a typo
kimihito_
6
4.9k
もう一度死んだ話 / A story that I died
kimihito_
3
1.5k
Hackers Champloo 2016
kimihito_
0
540
AngularJSでモバイルアプリをつくる
kimihito_
1
600
もうギー沖はダメかもしれない
kimihito_
2
740
Killer Questions
kimihito_
0
130
沖縄高専×ギー沖ハッカソンの概要
kimihito_
0
310
ギークハウス沖縄のお金の話
kimihito_
0
380
Featured
See All Featured
For a Future-Friendly Web
brad_frost
179
9.8k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Why Our Code Smells
bkeepers
PRO
337
57k
Unsuck your backbone
ammeep
671
58k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Embracing the Ebb and Flow
colly
86
4.7k
Raft: Consensus for Rubyists
vanstee
140
7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Transcript
実践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 回だけ実行(スロットリング) <!--
入力が止まって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>
実践例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/