HTMX チートシート + プレイグラウンド フレームワーク
JavaScriptを最小限にしてサーバとHTMLでやりとりする HTMX の全主要属性 (hx-get / hx-post / hx-swap / hx-target / hx-trigger 等) のサンプル集と、JSONPlaceholder で実際に動くライブデモを1ページで確認できます。
🤔 HTMX とは?
HTMX は、HTMLの属性だけでサーバ通信・部分更新を実現するライブラリです。React/Vue のように JavaScript を大量に書かなくても、リッチなインタラクティブ UI が作れます。サーバサイドレンダリング (Laravel / Rails / Django / Go / PHP) と組み合わせると、開発速度とパフォーマンスを両立できる現代的な選択肢です。GitHub Stars 40k+、企業採用も増加中の注目フレームワークです。
📡 HTTP メソッド (hx-get / post / put / delete / patch)
CODE
<button hx-get="/api/users/1"
hx-target="#result1"
hx-swap="innerHTML">
ユーザー情報を取得
</button>
<div id="result1"></div>
▶ ライブデモ (JSONPlaceholder API)
読込中...
ボタンをクリックしてください
🔄 hx-swap (置換方法)
| 値 | 動作 |
|---|---|
innerHTML | 要素の中身を置換 (デフォルト) |
outerHTML | 要素自体を置換 |
beforebegin | 要素の前に挿入 |
afterbegin | 要素の中の先頭に挿入 |
beforeend | 要素の中の末尾に挿入 |
afterend | 要素の後に挿入 |
delete | 要素を削除 |
none | レスポンスは無視 (副作用のみ) |
⚡ hx-trigger (発火イベント)
CODE
<!-- 入力中 (500ms debounce)・load・hover・revealed -->
<input hx-get="/api/search"
hx-trigger="input changed delay:500ms"
hx-target="#suggest">
<!-- ページロード時に1回 -->
<div hx-get="/api/banner" hx-trigger="load"></div>
<!-- スクロールで見えた瞬間 -->
<div hx-get="/api/more" hx-trigger="revealed"></div>
<!-- 5秒間隔でポーリング -->
<div hx-get="/api/status" hx-trigger="every 5s"></div>
▶ ライブデモ (入力中に検索)
入力すると一覧を取得します
⏳ hx-indicator (ロード中表示)
CODE
<button hx-get="/api/slow"
hx-indicator="#spinner">
実行
</button>
<span id="spinner" class="htmx-indicator">
⏳ 処理中...
</span>
▶ ライブデモ (重い処理風)
⏳ 読込中...
クリックしてください
⚠ hx-confirm + hx-target (削除確認)
CODE
<!-- 確認ダイアログを出してから DELETE 送信 -->
<button hx-delete="/api/items/123"
hx-confirm="本当に削除しますか?"
hx-target="#item-123"
hx-swap="delete">
削除
</button>
▶ ライブデモ (確認後フェードアウト)
アイテム#1 (削除可)
📚 主要属性一覧 (チートシート)
| 属性 | 役割 |
|---|---|
hx-get="URL" | GET リクエストを送信 |
hx-post="URL" | POST リクエストを送信 |
hx-put="URL" | PUT リクエストを送信 |
hx-delete="URL" | DELETE リクエストを送信 |
hx-patch="URL" | PATCH リクエストを送信 |
hx-target="セレクタ" | レスポンスの差し替え対象を指定 (#id / .class / closest tr 等) |
hx-swap="方法" | 置換方法 (innerHTML / outerHTML / delete 等) |
hx-trigger="イベント" | 発火条件 (click / input / load / every 3s 等) |
hx-indicator="セレクタ" | 通信中に表示する要素 |
hx-confirm="文言" | 確認ダイアログを出す |
hx-push-url="true" | ブラウザURLを更新 (履歴対応) |
hx-boost="true" | 通常リンク/フォームをAJAX化 |
hx-vals='{"key":"val"}' | 追加パラメータをJSONで送信 |
hx-headers='{"X-Token":"abc"}' | 追加HTTPヘッダーを送信 |
hx-disable | HTMX処理を無効化 |
hx-include="セレクタ" | 他要素の値も一緒に送信 |
🚀 導入方法 (CDN・ES Module)
HTMLの <head> 内に追加するだけ
<script src="https://unpkg.com/htmx.org@2.0.3"></script>
使い方
- 各セクションでサンプルコード+実際に動くデモを確認
- 「コピー」ボタンでコードを即取得
- ライブデモは JSONPlaceholder の公開APIを呼んでいます
- 属性一覧 (チートシート) でHTMXの全機能を俯瞰
HTMX の魅力
- JavaScriptをほぼ書かない: HTMLの属性だけで動的UI
- サーバサイド派と相性◎: Laravel/Rails/Django/Go/PHPの再評価
- SPA より軽量: バンドルサイズ14KB・依存ゼロ
- SEO対応が楽: HTMLそのままなのでクローラーフレンドリー
- 学習コストが低い: HTMLが書ければ即使える
HTMX と React/Vue の使い分け
- HTMX が向いている: CRUD・管理画面・社内ツール・サーバサイドが強い案件
- React/Vue が向いている: SPA・複雑な状態管理・オフライン対応・モバイルアプリ
- 併用も可能: 一部の動的部分のみ React・残りは HTMX という構成も多い