プログラミング学習サイト

プログラミングの学習を開始される方を対象としたプログラミング入門サイトです。

トップ > HTMX > HTMXで使えるHTTPメソッド一覧

HTMXで使えるHTTPメソッド一覧

HTMX

HTMX入門

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

Ajax通信

htmxで発行できるHTTPメソッド表

属性 Description
hx-get GETリクエスト 発行
hx-post POST リクエスト 発行
hx-put PUT リクエスト 発行
hx-patch PATCH リクエスト 発行
hx-delete DELETE リクエスト 発行

HTMLから直接AJAXリクエストを発行することができます。

これらの属性のそれぞれは、AJAX要求を発行するためにURLを使用します。要素は、指定されたもののリクエストを発行します

要素がトリガーされたときに指定されたURLに入力します。

<div hx-put="/put_endpoint">
    PUTリクエストを発行するボタン
</div>

ユーザーがこのdivをクリックしたら、URL /put_endpointメッセージにPUTリクエストを発行し、このボタン要素に応答をロードします

hx-get

hx-getは指定したエンドポイントにGETリクエストを送信します。

受け取ったHTMLを子要素に入れ込みます。

GETリクエストはサーバーからのリソースのデータの取得に使用されます。

<div hx-get="/example">何かしらのHTMLがここに書き込まれる</div>

hx-put

hx-putは指定したエンドポイントにPUTリクエストを送信します。

HTTP PUTリクエストは通常、サーバー上のリソースの更新に使用されます。

<button hx-put="/account" hx-target="body">
  Put Money In Your Account
</button>

  • hx-put="/account": この属性は、HTMXに対して、ボタンがクリックされたときにHTTP PUTリクエストを/accountエンドポイントに送信するように指示します。

  • hx-target="body" : この属性は、リクエストのレスポンス（応答）で更新するHTML要素を指定します。bodyが指定されているため、レスポンスの内容でHTML文書全体（<body>要素）が更新されます。

hx-post

hx-postは指定したエンドポイントに対して POSTリクエストを送信します。 POSTメソッドは通常、要素の作成を意味します。

<div id="response"></div>
<button hx-post="/put_page" hx-target="#response">
  投稿ボタン
</button>

  • <div id="response"></div>: id属性がresponseなので、この要素は他の部分から参照される際に使われます。この要素は後述のボタン操作により、サーバーからの応答データを挿入するためのターゲットです。

  • hx-post="/put_page" : この属性により、ボタンがクリックされたときに、指定されたURL（この場合は/put_page）にHTTP POSTリクエストが送信されます

  • hx-target="#response" : POSTリクエストの結果（サーバーからの応答データ）が挿入される要素を指定します。この場合、id="response"を持つ要素（先述の

    ）がターゲットです。

hx-patch

hx-patchは指定したエンドポイントにPATCHリクエストを送信します。 ATCHリクエストはHTTPメソッドの一つで、リソースの部分的な更新を行うために使用されます

<button hx-patch="/page" hx-target="#table">
  table page
</button>
  • hx-patch="/page" : ボタンがクリックされたときに、PATCHリクエストが送信されることを意味します。この場合、/pageというURLに対してPATCHリクエストが送信されます。
  • hx-target="#table" PATCHリクエストのレスポンスが返ってきたときに、どのHTML要素を更新するかを指定します。

上記はhx-patchの一部の機能にすぎませんが、全体のコードは以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/htmx.org"></script>
</head>
<body>
  <button hx-patch="/page" hx-target="#table">
    table page
  </button>
  
  <div id="table">
    <!-- この部分が更新される -->
  </div>
</body>
</html>

hx-delete

hx-deleteは指定したエンドポイントにDeleteメソッドを送信します。 DeleteメソッドはCRUDでの削除を表し、POSTリクエストなどで作成した要素をDELETEメソッドで削除できます。

<button hx-delete="/page" hx-target="#page">
  Delete Your Page
</button>

このコードの動作をまとめると、ユーザーがボタンをクリックすると、/pageというURLに対してDELETEリクエストが送信され、そのレスポンスがid="page"を持つ要素に適用されます。 これにより、ページ全体をリロードすることなく、指定された部分だけが更新されます。

triggeringリクエスト

デフォルトでは、AJAX通信は各々のhtml要素によって自然に定義されたイベントによってトリガーされます。

  • input、textarea、およびselectが変更イベントでトリガーされます
  • formは送信イベント(submit)でトリガーされます
  • 他のすべてのhtml要素、クリックイベントによってトリガーされます

別のトリガー動作を指定する必要がある場合は、hx-triggerを使用できます。

例えば、マウスが入力したときに /new_actionエンドポイント から投稿するdivは次のとおりです。

<div hx-post="/new_action" hx-trigger="mouseenter">
    マウスが入りました
</div>

上記の例では hx-triggerにmouseenterを指定するすることで、エリアにマウスが入った時にイベントが発生します。

イベントの種類は以下の通りです。

  • click : 要素がクリックされた時にイベントが発火されます
  • click[boolean_value] : 要素がクリックされたときに、boolean_valueをチェックしてTrueの場合に発火します。 この条件は次のように、グローバル関数を使用することもできますclick[check_boolean_state()]
  • keyup : 入力値にキー入力されたときをイベントトリガーとします。
  • submit : フォームの送信をトリガーとします。
  • change : 入力値が変更された時をトリガーとします。
  • load : 要素が読み込まれた時をトリガーとします。

https://www.appleple.com/blog/frontend/htmx202402.html

trigger修飾子

トリガーには、動作を変更するいくつかの追加の修飾子があります。 たとえば、リクエストが必要な場合のみ一度起こると、トリガーには1回の修飾子を使用できます。

<div hx-post="/mouse_entered" hx-trigger="mouseenter once">
    [Here Mouse, Mouse!]
</div>

トリガーに使用できる他の修飾子は次のとおりです。

  • changed - 要素の値が変更された場合にのみリクエストを発行します
  • delay：<19> - 与えられた時間（例：1秒）を待ってくださいリクエストを発行します。イベントが再びトリガーされた場合、カウントダウンはリセットされます。
  • from：<css selector> - 別の要素で発生するイベントをリッスンします。
  • once - イベントは最初の一度だけ発生します。

これらの属性を使用して、アクティブ検索など、多くの一般的なUXパターンを実装できます。

複数のトリガーをhx-trigger属性で指定し、コンマで区切ることができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hx-trigger Example</title>
    <script src="https://unpkg.com/htmx.org@1.6.1"></script>
</head>
<body>
    <button hx-trigger="click, mouseover" hx-get="/some-endpoint">Click or Hover Me</button>
</body>
</html>

この例では、button 要素は click イベントおよび mouseover イベントのどちらかが発生したときにトリガーされます。

リクエストのオプション

ポーリングで定期的にリクエストをする

ボタンクリックなどのイベントを待つのではなく、特定のURLに要素に定期的にリクエストする場合は、everyを使用してポーリングすることができます。

<div hx-get="/news" hx-trigger="every 2s"></div>

このhtmlは次の内容を表します。

2秒ごとに、getメソッドで/newsを発行し、応答をdivにロードします

サーバーの応答からポーリングを停止したい場合は、サーバーからのHTTP応答コード286で停止できます。

遅延リクエスト

HTMXでの投票を達成するために使用できるもう1つの手法は、「負荷投票」です。 遅延とともに負荷トリガー、そしてそれ自体を応答に置き換えます。

<div hx-get="/messages"
    hx-trigger="load delay:1s"
    hx-swap="outerHTML"
>
</div>

/messagesのエンドポイントからの応答は1秒待って反映されます。

requestインジケーターでスピナーを表示する

AJAXリクエストが発行された後、サーバー側に何かが起こっていることをユーザーに知らせることはしばしば良いことです。 html-indicatorクラスを使用して、HTMXでこれを達成できます。

HTMX-Indicatorクラスはhtmlでクラスとして定義されているため、このクラスのあらゆる要素の不透明度がデフォルトで0になり、domは存在しますが、見えないようになります。

HTMXがリクエストを発行すると、HTMXは自動的にhtmx-requestクラスを自動的に要素に配置します。 HTMX-Requestクラスは、HTMX-Indicatorクラスでチャイルドエレメントの不透明度を1に移行し、インジケータを表示します。

<button hx-get="/click">
    Click Me!
    <img class="htmx-indicator" src="/spinner.gif"> <!-- ボタンがクリックされると、htmx-requestクラスがclassに追加されて透明度が1になる-->
</button>

ここにボタンがあります。クリックすると、htmx-requestクラスが追加され、スピナーが表示されます。

HTMX-Indicatorクラスは不透明度を使用して進行状況インジケーターを非表示にして表示しますが、別のメカニズムを好む場合は 次のように、独自のCSSトランジションを作成できます。

.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator{
    display:inline;
}

htmx-requestクラスを子要素ではない別の要素に追加したい場合は、hx-indicatorを使用できます。

<div>
    <button hx-get="/click" hx-indicator="#indicator">
        Click Me!
    </button>
    <img id="indicator" class="htmx-indicator" src="/spinner.gif"/>
</div>

ここでは、IDによって明示的にインジケーターを呼び出します。ただし、親要素のdivにも同じクラスを配置できたであろうことに注意してください

targets

CSSセレクターをhx-target属性に指定することで、リクエストを行った要素以外の応答を別の要素にロードできます。

<input type="text" name="q"
    hx-get="/trigger_delay"
    hx-trigger="keyup delay:500ms changed"
    hx-target="#search-results"
    placeholder="Search..."
>
<div id="search-results"></div>

hx-swap

HTMXは、apiからのレスポンスHTMLを別のDOMに入れ込むいくつかの異なる方法を提供します。 デフォルトでは、コンテンツはターゲット要素のinnerhtmlに置き換えられます。

hx-swap属性を使用して置き換え対象を変更できます

Name Description
innerHTML デフォルトでは、コンテンツをターゲット要素内に置きます
outerHTML ターゲット要素全体を返されたコンテンツで置き換えます
afterbegin ターゲット内の最初の子の前にコンテンツを追加します
beforebegin ターゲットの親要素内のターゲットの前にコンテンツを追加します
beforeend ターゲット内の最後の子の後にコンテンツを追加します
afterend ターゲットの親要素のターゲットの後にコンテンツを追加します
delete 応答に関係なくターゲット要素を削除します

swapオプション

hx-swap属性は、HTMXのスワッピング動作を調整するための多くのオプションをサポートしています。 例えば、デフォルトではHTMXは新しいコンテンツのどこにでもあるタイトルタグのタイトルを入れ替えます。

<button hx-post="/like" hx-swap="outerHTML ignoreTitle:true">Like</button>

/likeからの応答HTMLの中にtitleタグが存在する場合、HTMLのタイトルが入れ替わってしまいます。 ignoreTitle Modifierをtrueに設定することにより、HTMLにあるタイトルタグが入れ替わってしまうことを防げます。

そのほかのHX-SWAPで利用可能な修飾子は次のとおりです。

Option Description
transition true または falseを設定することで、このスワップに view transition API を使用するかどうかを設定できます。
swap 古いコンテンツがクリアされてから新しいコンテンツが挿入されるまでに使用するスワップ遅延秒数 (例: 100ms)
settle 新しいコンテンツが挿入されてから確定するまでの間に使用する確定遅延 (例: 100ms)
ignoreTitle 「true」に設定すると、新しいコンテンツ内で見つかったタイトルは無視され、ドキュメントのタイトルは更新されません。

すべてのスワップ修飾子は、スワップスタイルの後で指定し、コロンで複数修飾できます。

page:https://minegishirei.hatenablog.com/entry/2024/05/16/195121