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

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

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

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

利用シーン 「左：一覧（table）」/「右：詳細（部分更新）」/「詳細→編集→保存→詳細に戻す」/「簡易SPA風の業務UI」

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

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

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

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

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

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

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

利用シーン 「取引先名の候補」/「タグ入力」/「部署名の候補」/「コード：名称でコードを保持」

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

利用シーン 「チャット/共同編集」/「サーバからの即時反映」/「サーバからの即時反映」

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