htmx逆引きレシピ
◯◯するには？で探せる実践スニペット集

公開日：2026年01月01日

最終更新日：2026年01月12日

htmxを「◯◯するには？」から探せる、実践向けの逆引きレシピです。 Webページだけでなく、管理画面などの業務Webアプリでもそのまま使える“現場の定番パターン”を、コピペできるスニペットとしてまとめてます！

各項目には、よく使う度/便利度を★（最大3つ）で付け、登場するhx-*属性はタグとして表示してます。まずは★3の項目から押さえると、最短で実装が進みます！

0) イントロダクション

★★★ htmxとは？（全体像をつかむ） 2026-01-01

hx-post hx-target hx-swap hx-trigger
★★★ 導入するには？（CDN / npm / ダウンロード） 2026-01-01
★★☆ どういうときに効く？（SPA疲れ・SSR再評価） 2026-01-03

1) 画面の一部だけ更新するには？（差し替え・部分描画）

★★★ ボタンで一部だけ差し替えるには？ 2026-01-01

利用シーン「詳細パネルだけ再読み込み」/「承認ステータスだけ更新」/「集計カードを更新」

hx-get hx-target hx-swap hx-trigger
★★★ フォーム送信の結果だけ更新するには？ 2026-01-01

利用シーン「登録/更新フォーム」/「失敗時は同じ場所にエラー」/「成功時は一覧だけ更新」

hx-post hx-target hx-swap hx-validate hx-disabled-elt
★★★ htmxでログインを作るには？ 2026-01-01

利用シーン「ログインフォーム」/「失敗時は同じ場所にエラー」/「成功時は遷移（HX-Redirect）」

hx-post hx-target hx-swap hx-indicator hx-disabled-elt
★★☆ 差し替え方を切り替えるには？（append/replace）（準備中）

利用シーン「テーブル行はouterHTML」/「一覧はbeforeendで追加」/「モーダルはinnerHTMLで差し替え」

hx-swap hx-target hx-select hx-preserve
★★☆ 別の場所も同時に更新するには？（通知/件数など）（準備中）

利用シーン「保存→トースト通知」/「ヘッダの未読件数を更新」/「サイドバーの集計も更新」

hx-swap-oob hx-select-oob hx-target hx-swap
★★☆ レスポンスから必要な部分だけ採用するには？（準備中）

利用シーン「共通レイアウトごと返して、#mainだけ差す」/「同じAPIでも画面ごとに抜き出す」

hx-select hx-select-oob hx-target hx-swap

2) 入力に反応して画面を変えるには？（検索・フィルタ・バリデーション）

★★★ 入力しながら検索するには？（ライブ検索） 2026-01-02

利用シーン「顧客/商品検索」/「申請一覧の検索」/「社員番号で絞り込み」

hx-get hx-trigger hx-target hx-params hx-sync
★★★ チェック/セレクトで絞り込むには？（フィルタ） 2026-01-03

利用シーン「担当者/ステータスで絞る」/「期間で絞る」/「権限別に表示を切り替える」

hx-get hx-trigger hx-include hx-params hx-push-url
★★★ 依存セレクトを作るには？ 2026-01-03

利用シーン「部署→メンバー」/「カテゴリ→サブカテゴリ」/「都道府県→市区町村」

hx-get hx-trigger hx-target hx-swap
★★★ その場で入力エラーを出すには？（バリデーション） 2026-01-04

利用シーン「社員番号の重複チェック」/「メール形式」/「在庫不足を即警告」

hx-post hx-trigger hx-target hx-validate hx-sync
★★☆ オートコンプリートを作るには？（準備中）

利用シーン「取引先名の候補」/「タグ入力」/「部署名の候補」

hx-get hx-trigger hx-target hx-swap

3) 一覧を快適にするには？（ページング・無限スクロール・ソート）

★★★ ページングするには？ 2026-01-04

利用シーン「管理画面の大量一覧」/「監査ログ一覧」/「検索結果の分割表示」

hx-get hx-target hx-swap hx-push-url
★★☆ 無限スクロールするには？（準備中）

利用シーン「通知/コメント一覧」/「ログを下に積む」/「モバイルで“次へ”を減らす」

hx-get hx-trigger hx-swap hx-target
★★☆ スクロール到達で遅延読み込みするには？（準備中）

利用シーン「重い集計カード」/「タブの中身は開いたら読む」/「画像/添付の一覧だけ後で読む」

hx-get hx-trigger hx-target hx-swap
★★☆ テーブルをソートするには？（準備中）

利用シーン「日付/金額/ステータスで並び替え」/「ヘッダクリックで再描画」/「URLにも反映」

hx-get hx-vals hx-target hx-push-url
★★☆ 「もっと読む」を実装するには？（準備中）

利用シーン「一覧を段階表示」/「初期表示を軽く」/「モバイルで自然に追加」

hx-get hx-target hx-swap

4) CRUDを作るには？（追加・編集・削除・エラー）

★★★ 行を削除するには？（確認付き） 2026-01-06

利用シーン「一覧の1行削除」/「削除後に行を消す」/「権限がないときは弾く」

hx-delete hx-confirm hx-target hx-swap
★★★ 行をその場で編集するには？（インライン編集） 2026-01-12

利用シーン「行→編集フォームに差し替え」/「保存→表示に戻す」/「キャンセルで元に戻す」

hx-get hx-put hx-target hx-swap hx-include
★★☆ 作成したレコードを一覧に追加するには？（準備中）

利用シーン「新規作成→一覧の先頭に追加」/「モーダル閉じる＋一覧更新」/「集計も同時更新」

hx-post hx-swap-oob hx-target hx-swap
★★★ 失敗時にエラーだけ差し替えるには？（422など）（準備中）

利用シーン「入力ミスはフォーム直下に表示」/「権限エラーはバナーで表示」/「成功時は通常表示」

hx-target hx-swap hx-on hx-request
★★★ 保存の二重送信を防ぐには？ 2026-01-14

利用シーン「保存ボタン連打を防止」/「通信中はフォームを無効化」/「競合を避けたい」

hx-disabled-elt hx-indicator hx-sync hx-trigger

5) 画面遷移/URLと仲良くするには？（boost/push/直リンク）

★★★ リンク/フォームをboostして“準SPA”にするには？（準備中）

利用シーン「既存SSRに後付け」/「遷移を速く」/「段階的にhtmxへ寄せる」

hx-boost hx-select hx-target hx-swap
★★★ フィルタ/ページングでURLも更新するには？（準備中）

利用シーン「検索条件を共有したい」/「戻る/進むを壊したくない」/「URLで状態を再現したい」

hx-push-url hx-replace-url hx-get hx-trigger
★★☆ リダイレクト/ログイン誘導を扱うには？（準備中）

利用シーン「未ログインならログインへ」/「保存後に詳細ページへ」/「権限不足なら403画面へ」

hx-boost hx-target HX-Redirect HX-Location
★★★ 直リンクでも破綻しない設計にするには？（SSR + boost）（準備中）

利用シーン「直URLで開いてもOK」/「JSなしでも最低限動く」/「必要な部分だけ差し替える」

hx-boost hx-select hx-target hx-disinherit
★★☆ 履歴キャッシュを調整するには？（戻る/進む最適化）（準備中）

利用シーン「戻る/進むが重い」/「フォーム値を残したい」/「機密データを履歴に残したくない」

hx-history hx-history-elt hx-preserve hx-swap

6) UXと運用で事故らないようにするには？（待ち・連打・CSRF・競合）

★★★ 読み込み中スピナーを出すには？（準備中）

利用シーン「検索/保存中を見せる」/「体感速度UP」/「通信が遅い環境でも不安にさせない」

hx-indicator hx-target hx-swap
★★★ リクエスト中に入力/ボタンを無効化するには？（準備中）

利用シーン「連打事故防止」/「保存中はfieldsetを丸ごと無効化」/「多重リクエストを抑える」

hx-disabled-elt hx-sync hx-trigger
★★★ 破壊的操作の前に確認を出すには？（準備中）

利用シーン「削除/取消/差し戻し」/「一括更新」/「本番データを触る操作」

hx-confirm hx-delete hx-post
★★★ CSRFトークン等をヘッダ/パラメータに付けるには？（準備中）

利用シーン「CSRF対策」/「画面固定値を一緒に送る」/「フォーム外の値も含めたい」

hx-headers hx-vals hx-include hx-params hx-encoding
★★★ 連打・競合・順番事故を防ぐには？（debounce/sync）（準備中）

利用シーン「検索の打鍵が多すぎる」/「古いレスポンスで上書きされたくない」/「同時更新の衝突を避ける」

hx-trigger hx-sync hx-request

7) リアルタイム更新するには？（polling / SSE / WebSocket）

★★☆ 定期ポーリングで更新するには？（準備中）

利用シーン「進捗/ステータスを定期更新」/「監視ダッシュボード」/「手軽にリアルタイム風」

hx-trigger hx-get hx-target hx-swap
★★☆ SSEで通知を流すには？（準備中）

利用シーン「承認依頼が来た」/「ジョブ完了通知」/「未読件数の更新」

hx-ext sse-connect sse-swap hx-trigger
★★☆ WebSocketで双方向にするには？（準備中）

利用シーン「チャット/共同編集」/「リアルタイム監視」/「サーバからの即時反映」

hx-ext ws-connect ws-send hx-swap-oob
★★☆ どれを選ぶ？（polling/SSE/WS）（準備中）

利用シーン「最短で動かしたい」/「サーバ負荷を抑えたい」/「双方向が必要か判断したい」

hx-trigger hx-ext sse-connect ws-connect

参考サイト

免責事項

本ページは、htmx公式ドキュメントおよび関連するリファレンスを参考に作成した非公式のまとめです。内容は正確性に配慮していますが、公式の記述や実装が優先されます。最新情報は必ず公式ドキュメントをご確認ください。

また、本コンテンツは段階的に拡充・更新していく方針です。記載の不足・誤り・表現の差異などが含まれる可能性があります。その点をご理解のうえご利用ください。

このページの著者

もちもちみかん（システムエンジニア）

社内SEとしてグループ企業向けの業務アプリを要件定義〜運用まで一気通貫で担当しています。

経験：Webアプリ／業務システム

得意：PHP・JavaScript・MySQL・CSS

個人実績：フォーム生成基盤／クイズ学習プラットフォーム等

詳しいプロフィールはこちら！　　もちもちみかんのプロフィール

htmx逆引きレシピ◯◯するには？で探せる実践スニペット集