【htmx】さくっと使い方
導入方法 #
htmxにscriptタグで読み込ませる
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>htmxサンプル</title>
<!-- htmx 1.x（非圧縮版に replace=true が追加）-->
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
</head>
<body>
<!-- ここにサンプルを書く -->
</body>
</html>
基本的に htmx はページの上で即時実行させること。
使い方 #
| 基本概念 | 説明 |
|---|---|
| 宣言的 AJAX | hx-get, hx-post, hx-put, hx-delete 属性を使ってエンドポイントを指定するだけで Ajax 通信が発火。 |
| ターゲット指向 | hx-target="#id" でレスポンスを差し込む箇所（innerHTML）を決定。 |
| トリガ | hx-trigger でイベント（click / load / every 5s 等）を宣言、複数指定や修飾（once など）も可能。 |
| スワップ | hx-swap="outerHTML" などで、レスポンスを どのように 挿入するか制御。 |
| 履歴管理 | hx-push-url="true" でブラウザ履歴を自動追加、hx-boost="true" はリンク／フォーム全体を PJAX 化。 |
簡単な解釈 #
SSRを実現するのに使用
- ページ全体をサーバーサイドでレンダリングする
- 一部をAPIで通信して書き換える
例：その1 #
buttonを押すとHTMLを取得して #list に挿入する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>htmxサンプル</title>
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
</head>
<body>
<div class="container">
<button
hx-get="/items"
hx-target="#list"
hx-swap="innerHTML">
もっとみる
</button>
<ul id="list">
<!-- ここにitemsのHTMLが入る -->
</ul>
</div>
</body>
</html>
よく使うオプション。
<form
hx-post="/api"
hx-target="closest tr"
hx-swap-oob="true"> <!-- 部分的に out of band スワップ -->
.
.
.
</form>
| 属性 | 役割 | 例 |
|---|---|---|
hx-params | 送信パラメータを制御 | hx-params="username,password" |
hx-select | レスポンス内のセレクタを抽出 | hx-select=".item" |
hx-confirm | 通信前に confirm() ダイアログ | hx-confirm="本当に削除しますか？" |
hx-headers | 任意のヘッダ追加 | hx-headers='{"X-CSRF":"token"}' |