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
0
120
実践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
140
htmx is not a typo
kimihito_
6
4.8k
もう一度死んだ話 / A story that I died
kimihito_
3
1.5k
Hackers Champloo 2016
kimihito_
0
540
AngularJSでモバイルアプリをつくる
kimihito_
1
590
もうギー沖はダメかもしれない
kimihito_
2
730
Killer Questions
kimihito_
0
120
沖縄高専×ギー沖ハッカソンの概要
kimihito_
0
300
ギークハウス沖縄のお金の話
kimihito_
0
370
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
750
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
1
82
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.5k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Adopting Sorbet at Scale
ufuk
76
9.4k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
460
Site-Speed That Sticks
csswizardry
7
590
Gamification - CAS2011
davidbonilla
81
5.3k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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/