`, `consume`
### フォーム送信中の要素無効化
```html
```
### OOB（Out-Of-Band）スワップ
レスポンスに `hx-swap-oob` 属性を持つ要素を含めると、メインターゲット以外の要素も同時に更新できる。
```html
保存済み: 12:34
...新しいリンク一覧...
...新しいバックリンク一覧...
```
## Go 統合パターン
htmx は「サーバーから HTML フラグメントを返す」だけで動作する。専用の Go SDK は不要。
### 基本パターン: HTML フラグメントを返す
```go
func (h *Handler) Show(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
// データを取得
items, err := h.getItemsUsecase.Execute(ctx, input)
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
return
}
// templ コンポーネントをレンダリングして返す（通常の HTML レスポンス）
component := components.ItemList(viewmodel.NewItems(items))
component.Render(ctx, w)
}
```
### OOB スワップパターン: 複数要素の同時更新
```go
func (h *Handler) Show(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
data, err := h.getDataUsecase.Execute(ctx, input)
if err != nil {
http.Error(w, "Internal Server Error", http.StatusInternalServerError)
return
}
// メインターゲット + OOB 要素を含むコンポーネントをレンダリング
component := components.DraftPageResponse(data)
component.Render(ctx, w)
}
```
```templ
// OOB スワップ用のレスポンステンプレート
templ DraftPageResponse(data DraftPageData) {
// メインターゲット（hx-target で指定された要素に挿入される）
{ data.SavedAt }
// OOB スワップ（id が一致する要素を自動的に更新）
@LinkList(data.Links)
@BacklinkList(data.Backlinks)
}
```
### ページネーション「もっと読み込む」パターン
```templ
templ LoadMoreButton(nextPage int, url string) {
}
```
レスポンスにはアイテム一覧と、更新された「もっと読み込む」ボタン（OOB）を含める。
### フォーム送信（hx-post）パターン
```templ
templ Form(data FormData) {
}
```
```go
func (h *Handler) Create(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
// バリデーション失敗時: フォームを再レンダリング（htmx 4 では全ステータスコードがスワップされる）
if result.FormErrors.HasErrors() {
w.WriteHeader(http.StatusUnprocessableEntity)
component := pages.New(formDataWithErrors)
component.Render(ctx, w)
return
}
// 成功時: HX-Redirect ヘッダーでリダイレクト
w.Header().Set("HX-Redirect", redirectPath)
w.WriteHeader(http.StatusNoContent)
}
```
### htmx リクエストの判別
```go
// htmx からのリクエストかどうかを判別
func isHTMXRequest(r *http.Request) bool {
return r.Header.Get("HX-Request") == "true"
}
```
## CSRF 対策
htmx はフォーム送信と同様に `` でトークンを送信するため、既存の CSRF ミドルウェアがそのまま機能する。Datastar のようにシグナルから読み取る特別な処理は不要。
```templ
```
## htmx 4 の重要な変更点（htmx 2 との違い）
| 項目 | htmx 2 | htmx 4 |
| -------------------- | ------------------------ | ----------------------------------- |
| エラーレスポンス | 4xx/5xx はスワップしない | 204/304 以外すべてスワップする |
| 属性の継承 | 暗黙的（自動継承） | 明示的（`:inherited` 修飾子が必要） |
| `hx-disabled-elt` | 使用可能 | `hx-disable` にリネーム |
| OOB スワップの順序 | OOB が先 | メインが先、OOB が後 |
| GET のフォームデータ | 含む | 含まない |
| `hx-ext` | 属性で指定 | `