リファレンス

#目次

#コア属性リファレンス

htmxを使用する際に最も一般的な属性です。

属性	説明
`hx-get`	指定されたURLに`GET`リクエストを発行します
`hx-post`	指定されたURLに`POST`リクエストを発行します
`hx-on*`	要素のインラインスクリプトでイベントを処理します
`hx-push-url`	履歴を作成するために、ブラウザのロケーションバーにURLをプッシュします
`hx-select`	レスポンスからスワップインするコンテンツを選択します
`hx-select-oob`	ターゲット以外の場所（アウトオブバンド）から、レスポンスからスワップインするコンテンツを選択します
`hx-swap`	コンテンツのスワップイン方法を制御します（`outerHTML`、`beforeend`、`afterend`など）
`hx-swap-oob`	レスポンスからスワップインする要素をマークします（アウトオブバンド）
`hx-target`	スワップされるターゲット要素を指定します
`hx-trigger`	リクエストをトリガーするイベントを指定します
`hx-vals`	リクエストと共に送信する値を追加します（JSON形式）

#追加属性リファレンス

htmxで使用可能な他のすべての属性です。

属性	説明
`hx-boost`	リンクとフォームにプログレッシブエンハンスメントを追加します
`hx-confirm`	リクエストを発行する前に`confirm()`ダイアログを表示します
`hx-delete`	指定されたURLに`DELETE`リクエストを発行します
`hx-disable`	指定されたノードとその子ノードのhtmx処理を無効にします
`hx-disabled-elt`	リクエストの処理中に、指定された要素に`disabled`属性を追加します
`hx-disinherit`	子ノードの属性の自動継承を制御および無効にします
`hx-encoding`	リクエストのエンコーディングタイプを変更します
`hx-ext`	この要素に使用する拡張機能
`hx-headers`	リクエストと共に送信されるヘッダーに追加します
`hx-history`	機密データが履歴キャッシュに保存されないようにします
`hx-history-elt`	履歴ナビゲーション中にスナップショットを取得して復元する要素
`hx-include`	リクエストに追加データを含めます
`hx-indicator`	リクエスト中に`htmx-request`クラスを配置する要素
`hx-inherit`	デフォルトで無効になっている場合、子ノードの属性の自動継承を制御および有効にします
`hx-params`	リクエストと共に送信されるパラメータをフィルタリングします
`hx-patch`	指定されたURLに`PATCH`リクエストを発行します
`hx-preserve`	リクエスト間で変更されないようにする要素を指定します
`hx-prompt`	リクエストを送信する前に`prompt()`を表示します
`hx-put`	指定されたURLに`PUT`リクエストを発行します
`hx-replace-url`	ブラウザのロケーションバーのURLを置き換えます
`hx-request`	リクエストのさまざまな側面を設定します
`hx-sync`	異なる要素によって行われたリクエストの同期方法を制御します
`hx-validate`	リクエストの前に要素を強制的に検証させます
`hx-vars`	リクエストと共に送信するパラメータに値を動的に追加します（非推奨、`hx-vals`を使用してください）

#CSSクラスリファレンス

クラス	説明
`htmx-added`	新しいコンテンツがスワップされる前に適用され、確定後に削除されます。
`htmx-indicator`	`htmx-request`クラスが存在する場合に表示（opacity:1）を切り替える動的に生成されたクラス
`htmx-request`	リクエストの処理中に、要素または`hx-indicator`で指定された要素に適用されます
`htmx-settling`	コンテンツがスワップされた後にターゲットに適用され、確定後に削除されます。期間は`hx-swap`で変更できます。
`htmx-swapping`	コンテンツがスワップされる前にターゲットに適用され、スワップされた後に削除されます。期間は`hx-swap`で変更できます。

#HTTPヘッダーリファレンス

#リクエストヘッダーリファレンス

ヘッダー	説明
`HX-Boosted`	リクエストがhx-boostを使用する要素を介していることを示します
`HX-Current-URL`	ブラウザの現在のURL
`HX-History-Restore-Request`	ローカル履歴キャッシュにミスがあった後の履歴復元のリクエストの場合は「true」
`HX-Prompt`	hx-promptに対するユーザーの応答
`HX-Request`	常に「true」
`HX-Target`	ターゲット要素の`id`（存在する場合）
`HX-Trigger-Name`	トリガーされた要素の`name`（存在する場合）
`HX-Trigger`	トリガーされた要素の`id`（存在する場合）

#レスポンスヘッダーリファレンス

ヘッダー	説明
`HX-Location`	ページ全体をリロードしないクライアントサイドリダイレクトを実行できます
`HX-Push-Url`	新しいURLを履歴スタックにプッシュします
`HX-Redirect`	新しい場所へのクライアントサイドリダイレクトを実行するために使用できます
`HX-Refresh`	「true」に設定されている場合、クライアントサイドはページの完全な更新を実行します
`HX-Replace-Url`	ロケーションバーの現在のURLを置き換えます
`HX-Reswap`	レスポンスのスワップ方法を指定できます。hx-swapで可能な値を確認してください
`HX-Retarget`	コンテンツ更新のターゲットをページ上の別の要素に更新するCSSセレクター
`HX-Reselect`	レスポンスのどの部分がスワップインに使用されるかを選択できるCSSセレクター。トリガー要素の既存の`hx-select`をオーバーライドします
`HX-Trigger`	クライアントサイドイベントをトリガーできます
`HX-Trigger-After-Settle`	確定ステップ後にクライアントサイドイベントをトリガーできます
`HX-Trigger-After-Swap`	スワップステップ後にクライアントサイドイベントをトリガーできます

#イベントリファレンス

イベント	説明
`htmx:abort`	リクエストを中止するために、このイベントを要素に送信します
`htmx:afterOnLoad`	AJAXリクエストが成功レスポンスの処理を完了した後にトリガーされます
`htmx:afterProcessNode`	htmxがノードを初期化した後にトリガーされます
`htmx:afterRequest`	AJAXリクエストが完了した後にトリガーされます
`htmx:afterSettle`	DOMが確定した後にトリガーされます
`htmx:afterSwap`	新しいコンテンツがスワップインされた後にトリガーされます
`htmx:beforeCleanupElement`	htmxが要素を無効化するか、DOMから削除する前にトリガーされます
`htmx:beforeOnLoad`	レスポンス処理が発生する前にトリガーされます
`htmx:beforeProcessNode`	htmxがノードを初期化する前にトリガーされます
`htmx:beforeRequest`	AJAXリクエストが行われる前にトリガーされます
`htmx:beforeSwap`	スワップが行われる前にトリガーされ、スワップを設定できます
`htmx:beforeSend`	AJAXリクエストが送信される直前にトリガーされます
`htmx:beforeTransition`	ビュートランジションでラップされたスワップが発生する前にトリガーされます
`htmx:configRequest`	リクエストの前にトリガーされ、パラメータ、ヘッダーをカスタマイズできます
`htmx:confirm`	要素でトリガーが発生した後にトリガーされ、AJAXリクエストの発行をキャンセル（または遅延）できます
`htmx:historyCacheError`	キャッシュ書き込み中にエラーが発生したときにトリガーされます
`htmx:historyCacheMiss`	履歴サブシステムでキャッシュミスが発生したときにトリガーされます
`htmx:historyCacheMissError`	リモートリトリーバルが失敗したときにトリガーされます
`htmx:historyCacheMissLoad`	リモートリトリーバルが成功したときにトリガーされます
`htmx:historyRestore`	htmxが履歴復元アクションを処理するときにトリガーされます
`htmx:beforeHistorySave`	コンテンツが履歴キャッシュに保存される前にトリガーされます
`htmx:load`	新しいコンテンツがDOMに追加されたときにトリガーされます
`htmx:noSSESourceError`	要素がトリガーでSSEイベントを参照しているが、親SSEソースが定義されていない場合にトリガーされます
`htmx:onLoadError`	htmxのonLoad処理中に例外が発生したときにトリガーされます
`htmx:oobAfterSwap`	アウトオブバンド要素がスワップインされた後にトリガーされます
`htmx:oobBeforeSwap`	アウトオブバンド要素のスワップが行われる前にトリガーされ、スワップを設定できます
`htmx:oobErrorNoTarget`	アウトオブバンド要素が現在のDOMに一致するIDを持っていない場合にトリガーされます
`htmx:prompt`	プロンプトが表示された後にトリガーされます
`htmx:pushedIntoHistory`	URLが履歴にプッシュされた後にトリガーされます
`htmx:responseError`	HTTPレスポンスエラー（`200`または`300`以外のレスポンスコード）が発生したときにトリガーされます
`htmx:sendError`	ネットワークエラーによってHTTPリクエストが発生しなかった場合にトリガーされます
`htmx:sseError`	SSEソースでエラーが発生したときにトリガーされます
`htmx:sseOpen`	SSEソースが開かれたときにトリガーされます
`htmx:swapError`	スワップフェーズ中にエラーが発生したときにトリガーされます
`htmx:targetError`	無効なターゲットが指定された場合にトリガーされます
`htmx:timeout`	リクエストタイムアウトが発生したときにトリガーされます
`htmx:validation:validate`	要素が検証される前にトリガーされます
`htmx:validation:failed`	要素の検証に失敗したときにトリガーされます
`htmx:validation:halted`	検証エラーによりリクエストが停止されたときにトリガーされます
`htmx:xhr:abort`	AJAXリクエストが中止されたときにトリガーされます
`htmx:xhr:loadend`	AJAXリクエストが終了したときにトリガーされます
`htmx:xhr:loadstart`	AJAXリクエストが開始されたときにトリガーされます
`htmx:xhr:progress`	進捗イベントをサポートするAJAXリクエスト中に定期的にトリガーされます

#JavaScript APIリファレンス

メソッド	説明
`htmx.addClass()`	指定された要素にクラスを追加します
`htmx.ajax()`	htmxスタイルのAJAXリクエストを発行します
`htmx.closest()`	セレクターに一致する、指定された要素に最も近い親を見つけます
`htmx.config`	現在のhtmx設定オブジェクトを保持するプロパティ
`htmx.createEventSource`	htmx用にSSE EventSourceオブジェクトを作成する関数を保持するプロパティ
`htmx.createWebSocket`	htmx用にWebSocketオブジェクトを作成する関数を保持するプロパティ
`htmx.defineExtension()`	htmx 拡張機能を定義します
`htmx.find()`	セレクターに一致する単一の要素を検索します。
`htmx.findAll()` `htmx.findAll(elt, selector)`	指定されたセレクターに一致するすべての要素を検索します。
`htmx.logAll()`	すべての htmx イベントをログに記録するロガーをインストールします。
`htmx.logger`	現在のロガーに設定されているプロパティ（デフォルトは `null` です）。
`htmx.off()`	指定された要素からイベントリスナーを削除します。
`htmx.on()`	指定された要素にイベントリスナーを作成し、それを返します。
`htmx.onLoad()`	`htmx:load` イベントのコールバックハンドラーを追加します。
`htmx.parseInterval()`	間隔宣言をミリ秒値に解析します。
`htmx.process()`	指定された要素とその子要素を処理し、htmx の動作をフックアップします。
`htmx.remove()`	指定された要素を削除します。
`htmx.removeClass()`	指定された要素からクラスを削除します。
`htmx.removeExtension()`	htmx 拡張機能を削除します。
`htmx.swap()`	HTML コンテンツのスワップ（およびセトリング）を実行します。
`htmx.takeClass()`	指定された要素のために、他の要素からクラスを取得します。
`htmx.toggleClass()`	指定された要素のクラスを切り替えます。
`htmx.trigger()`	要素でイベントをトリガーします。
`htmx.values()`	指定された要素に関連付けられた入力値を返します。

#設定リファレンス

Htmx には、プログラムまたは宣言的にアクセスできる設定オプションがいくつかあります。それらを以下にリストします。

設定変数	情報
`htmx.config.historyEnabled`	デフォルトは `true` で、実際にはテストにのみ役立ちます。
`htmx.config.historyCacheSize`	デフォルトは 10 です。
`htmx.config.refreshOnHistoryMiss`	デフォルトは `false` です。`true` に設定すると、htmx は履歴ミス時に AJAX リクエストを使用するのではなく、完全なページリフレッシュを実行します。
`htmx.config.defaultSwapStyle`	デフォルトは `innerHTML` です。
`htmx.config.defaultSwapDelay`	デフォルトは 0 です。
`htmx.config.defaultSettleDelay`	デフォルトは 20 です。
`htmx.config.includeIndicatorStyles`	デフォルトは `true` です（インディケータースタイルがロードされるかどうかを決定します）。
`htmx.config.indicatorClass`	デフォルトは `htmx-indicator` です。
`htmx.config.requestClass`	デフォルトは `htmx-request` です。
`htmx.config.addedClass`	デフォルトは `htmx-added` です。
`htmx.config.settlingClass`	デフォルトは `htmx-settling` です。
`htmx.config.swappingClass`	デフォルトは `htmx-swapping` です。
`htmx.config.allowEval`	デフォルトは `true` です。特定の機能（トリガーフィルターなど）に対して htmx の eval の使用を無効にするために使用できます。
`htmx.config.allowScriptTags`	デフォルトは `true` です。htmx が新しいコンテンツで見つかった script タグを処理するかどうかを決定します。
`htmx.config.inlineScriptNonce`	デフォルトは `''` です。つまり、インラインスクリプトに nonce は追加されません。
`htmx.config.inlineStyleNonce`	デフォルトは `''` です。つまり、インラインスタイルに nonce は追加されません。
`htmx.config.attributesToSettle`	デフォルトは `["class", "style", "width", "height"]` です。セトリングフェーズ中にセトリングする属性です。
`htmx.config.wsReconnectDelay`	デフォルトは `full-jitter` です。
`htmx.config.wsBinaryType`	デフォルトは `blob` です。WebSocket 接続で受信されるバイナリデータのタイプです。
`htmx.config.disableSelector`	デフォルトは `[hx-disable], [data-hx-disable]` です。htmx は、この属性が設定されている要素または親要素を処理しません。
`htmx.config.withCredentials`	デフォルトは `false` です。Cookie、認証ヘッダー、TLS クライアント証明書などの資格情報を使用して、クロスサイト Access-Control リクエストを許可します。
`htmx.config.timeout`	デフォルトは 0 です。リクエストが自動的に終了するまでのミリ秒数です。
`htmx.config.scrollBehavior`	デフォルトは「instant」です。show 修飾子を `hx-swap` と共に使用する場合のスクロール動作です。許可される値は、`instant`（スクロールは一度に瞬時に行われるべき）、`smooth`（スクロールは滑らかにアニメーション化されるべき）、`auto`（スクロール動作は scroll-behavior の計算値によって決定される）です。
`htmx.config.defaultFocusScroll`	フォーカスされた要素をビューにスクロールする必要があるかどうか。デフォルトは false で、focus-scroll スワップ修飾子を使用してオーバーライドできます。
`htmx.config.getCacheBusterParam`	デフォルトは false です。true に設定すると、htmx はターゲット要素を `org.htmx.cache-buster=targetElementId` の形式で `GET` リクエストに追加します。
`htmx.config.globalViewTransitions`	`true` に設定すると、htmx は新しいコンテンツをスワップするときに View Transition API を使用します。
`htmx.config.methodsThatUseUrlParams`	デフォルトは `["get", "delete"]` です。htmx は、リクエストボディではなく URL にパラメータをエンコードすることで、これらのメソッドを使用してリクエストをフォーマットします。
`htmx.config.selfRequestsOnly`	デフォルトは `true` です。現在のドキュメントと同じドメインへの AJAX リクエストのみを許可するかどうかです。
`htmx.config.ignoreTitle`	デフォルトは `false` です。`true` に設定すると、新しいコンテンツに `title` タグが見つかった場合、htmx はドキュメントのタイトルを更新しません。
`htmx.config.scrollIntoViewOnBoost`	デフォルト値は `true` です。ブーストされた要素のターゲットをビューポートにスクロールするかどうかです。ブーストされた要素で `hx-target` が省略されている場合、ターゲットはデフォルトで `body` になり、ページが先頭にスクロールします。
`htmx.config.triggerSpecsCache`	デフォルトは `null` です。評価されたトリガースペシフィケーションを格納するキャッシュであり、メモリ使用量を増やす代わりに解析パフォーマンスを向上させます。単純なオブジェクトを定義してクリアされないキャッシュを使用するか、プロキシオブジェクトを使用して独自のシステムを実装できます。
`htmx.config.responseHandling`	レスポンスステータスコードのデフォルトのレスポンス処理動作は、ここでスワップまたはエラーに設定できます。
`htmx.config.allowNestedOobSwaps`	デフォルトは `true` です。メインレスポンス要素内にネストされた要素で OOB スワップを処理するかどうか。ネストされた OOB スワップを参照してください。

JavaScript で直接設定することも、meta タグを使用することもできます。

<meta name="htmx-config" content='{"defaultSwapStyle":"outerHTML"}'>