第2章:基本属性(Core Attributes)概要
HTMXを動かすための「心臓部」である基本属性について学びます。これらをHTMLタグに付与するだけで、Webブラウザの標準的な挙動が劇的に拡張されます。
属性一覧
- hx-get: 情報の取得
- 最も基本。サーバーからHTMLパーツを取り寄せます。
- hx-post: 新規作成・送信
- データを送り、その結果で画面を更新します。
- hx-put: 全体更新
- 既存のデータを丸ごと入れ替えるRESTの作法。
- hx-delete: 削除
- 要素を消し去り、その結果を反映させます。
- hx-patch: 部分修正
- データの一部だけをスマートに直す方法。
- hx-trigger: 発火条件
- 「いつ」通信するか。クリック、ホバー、タイマーなど。
- hx-target: ターゲット指定
- 「どこを」書き換えるか。狙い撃ちの極意。
- hx-swap: 入れ替えルール
- 「どうやって」置き換えるか。中身か、丸ごとか、追加か。
- hx-swap-oob: 範囲外更新
- ついでに別の場所も更新する忍者の技。
- hx-select: 部分抽出
- 届いたHTMLから必要な部分だけを切り抜く。
- hx-select-oob: 範囲外の部分抽出
- さらに高度な複数箇所の同時更新。
- hx-vals: 付加データ
- 通信と一緒に送る「おまけ情報」の設定。
- hx-headers: ヘッダー追加
- セキュリティや特殊な指示のための通信表紙。
- hx-encoding: データ形式
- ファイルアップロードなどのための設定。
- hx-boost: 自動高速化
- 既存のリンクとフォームを一行でSPA化。
- hx-confirm: 実行確認
- 「本当によろしいですか?」のダイアログ。
- hx-prompt: 入力要求
- 通信前にユーザーに短い言葉を打たせる。
- hx-disable: 機能無効化
- HTMXの魔法が効かない聖域を作る。
- hx-disabled-elt: 連打防止
- 通信中にボタンを無効にする優しさ。
- hx-indicator: ローディング表示
- 処理中であることをユーザーに伝える。
- hx-history: 履歴管理
- ブラウザの「戻る」ボタンとの付き合い方。
- hx-push-url: URL変更
- 画面更新と一緒にURLも正しく書き換える。
- hx-replace-url: URL書き換え
- 履歴を残さず、今のURLだけを直す。
- hx-request: 通信パラメーター
- タイムアウトや資格情報の細かな設定。
- hx-params: 送信データ制限
- 不要なデータを送らないためのふるい分け。