htmxレスポンスターゲット拡張機能

この拡張機能を使用すると、異なるHTTP応答コードを受信したときに交換されるターゲット要素を指定できます。

これは、`hx-target-[CODE]`形式の属性名を使用します。ここで`[CODE]`は数値のHTTP応答コードであり、オプションでワイルドカード文字を末尾に付けることができます。また、4xxと5xxの両方の応答コードを処理する`hx-target-error`も使用できます。

各属性の値は次のいずれかになります。

ターゲットとなる要素のCSSクエリセレクタ。
`this` `hx-target`属性が付いている要素自体がターゲットであることを示します。
`closest <CSSセレクタ>` 指定されたCSSセレクタに一致する最も近い親祖先要素を検索します（例：`closest tr`は要素に最も近いテーブル行をターゲットにします）。
`find <CSSセレクタ>` 指定されたCSSセレクタに一致する最初の子孫要素を検索します。
`next <CSSセレクタ>` DOMを前方からスキャンし、指定されたCSSセレクタに一致する最初の要素を検索します。（例：`next .error`は、`error`クラスを持つ最も近い次の兄弟要素をターゲットにします）
`previous <CSSセレクタ>` DOMを後方からスキャンし、指定されたCSSセレクタに一致する最初の要素を検索します。（例：`previous .error`は、`error`クラスを持つ最も近い前の兄弟要素をターゲットにします）

インストール

<script src="https://unpkg.com/htmx-ext-response-targets@2.0.0/response-targets.js"></script>

設定（オプション）

`HX-Retarget`レスポンスヘッダーを受信すると、この拡張機能によって実行されるすべてのルックアップが無効になりますが、エラー状態コードを持つ応答は交換されます（通常は、ヘッダーを介してターゲットを設定した場合でも交換されません）。そして、内部エラーフラグ（`isError`）が変更されます。`hx-target-…`が存在する場合に`HX-Retarget`ヘッダーを無視するように選択できます。設定フラグ`htmx.config.responseTargetPrefersRetargetHeader`を`false`に設定します（デフォルトは`true`）。この拡張機能は、ヘッダーが設定されていてターゲットが存在するかどうかを単純にチェックするだけであることに注意してください。ヘッダーからターゲットの値を抽出するのではなく、HTMXコアロジックによって設定されたことを信頼しています。
通常、それ以前に呼び出されたHTMX組み込み関数または拡張機能によって既に確立されているターゲットは、一致する`hx-target-…`タグが見つかった場合、上書きされます。設定フラグ`htmx.config.responseTargetPrefersExisting`を`true`に設定することで変更できます（デフォルトは`false`）。これは、奇妙で危険なオプションです。熟練したフルスタックのクマムシが誰も見ていないときに括弧を食べるような、現実世界のアプリケーションがあります。
`hx-target-[CODE]`でコンテンツを交換することに関連付けられたイベントの`detail`メンバー上の`isError`フラグは、エラー応答コードを受信した場合、`false`に設定されます。これはデフォルトの動作とは異なります。設定フラグ`htmx.config.responseTargetUnsetsError`を`false`に設定することで変更できます（デフォルトは`true`）。
`hx-target-[CODE]`でコンテンツを交換することに関連付けられたイベントの`detail`メンバー上の`isError`フラグは、エラー以外の応答コードを受信した場合、`false`に設定されます。これはデフォルトの動作と変わりません。設定フラグ`htmx.config.responseTargetSetsError`を`true`に設定することで変更できます（デフォルトは`false`）。この設定は、この拡張機能では処理されないため、応答コード200には影響しません。

使用方法

これは、通常の（200）応答には`div`をターゲットにし、404（見つかりません）応答には別の`div`をターゲットにし、すべての5xx応答コードにはさらに別の`div`をターゲットにする例です。

<div hx-ext="response-targets">
<div id="response-div"></div>
<button hx-post="/register"
hx-target="#response-div"
hx-target-5*="#serious-errors"
hx-target-404="#not-found">
Register!
</button>
<div id="serious-errors"></div>
<div id="not-found"></div>
</div>

応答コードが200（OK）の場合、`/register` URLからの応答は、`id`が`response-div`の`div`の内容を置き換えます。
応答コードが5で始まる数字（サーバーエラー）の場合、`/register` URLからの応答は、`id`が`serious-errors`の`div`の内容を置き換えます。
応答コードが404（見つかりません）の場合、`/register` URLからの応答は、`id`が`not-found`の`div`の内容を置き換えます。

場合によっては、5xxと4xxのエラーを個別に処理したくない場合があります。その場合は、`hx-target-error`を使用できます。

<div hx-ext="response-targets">
<div id="response-div"></div>
<button hx-post="/register"
hx-target="#response-div"
hx-target-error="#any-errors">
Register!
</button>
<div id="any-errors"></div>
</div>

2xxコードは前の例のように処理されます。ただし、応答コードが5xxまたは4xxの場合、`/register`からの応答は、`id`が`any-errors`の`div`の内容を置き換えます。

ワイルドカード解決

ステータス応答コードが既存の`hx-target-[CODE]`属性名と一致しない場合、文字列として表現された数値部分は、最後の文字がアスタリスク（`*`）に置き換えられるようにトリミングされます。このルックアッププロセスは、属性が見つかるか、数字がなくなるまで続きます。

たとえば、ブラウザが404エラーコードを受信した場合、次の属性名が（指定された順序で）ルックアップされます。

hx-target-404
hx-target-40*
hx-target-4*
hx-target-*.

HTML属性でアスタリスクをサポートしていないツールを使用している場合は、代わりに`x`文字を使用できます（例：`hx-target-4xx`）。

注意事項