コンテンツにスキップ

第2章:基本属性(Core Attributes)概要

HTMXを動かすための「心臓部」である基本属性について学びます。これらをHTMLタグに付与するだけで、Webブラウザの標準的な挙動が劇的に拡張されます。

属性一覧

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

encyclopedia 戻る