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

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

トップ > HTMX > HTMX入門

HTMX入門

HTMX

HTMX入門

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

minegishirei.hatenablog.com

参考 : https://htmx.org/docs/

HTMXとは何か

HTMXはJavascriptの機能を使用するのではなく、HTMLを拡張する形式のライブラリです。 HTMXを理解するには、最初にアンカータグを思い浮かべるのをお勧めします。

<a href="/blog">ブログだよ</a>

このアンカータグは、ブラウザに次のような指示をします。

「ユーザーがこのリンクをクリックしたら、HTTP Get Requestをblog宛に行い、応答コンテンツを新規ブラウザウィンドウに表示する」。

htmxは上記のようなアンカータグに、さらに種類や機能を拡張しています。

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#target"
    hx-swap="outerHTML"
>
    ボタンだよ
</button>

これはブラウザーに次の内容を伝えます。

「ユーザーがこのボタンをクリックしたら、httpの投稿リクエストを「/clicked」に発行し、応答からコンテンツを使用します

要素をDOMのtargetidに該当するDOMに置き換えてください。」

HTMXは、HTMLのハイパーテキストとしての言語機能を拡張し、さらに強力な言語として生まれ変わらせました。

  • アンカーやフォームだけでなく、あらゆる要素がHTTPリクエストを発行できるようになりました

  • 今では、クリックやフォームの送信だけでなく、リクエストをトリガーできるイベント

  • これで、取得して投稿するだけでなく、HTTPメソッドを使用できます。これは本来Javascriptでなければできなかったことですが、HTMXを使用することによってタグのみで可能になりました。

  • ウィンドウ全体だけでなく、どの要素もリクエストによる更新のターゲットになることができます

HTMXを使用する場合、サーバー側ではJSONではなくHTMLで通常応答します。

これはサーバー側のHTMLの保守は必要という意味になりますが、古のWebプログラミングモデル（phpコードをhtml内部に埋め込んだように）に立ち返っているとも言えます。

HTMXのインストール方法

HTMXは、依存関係のないブラウザ指向のJavaScriptライブラリです。

node.jsやreact,vueなどのライブラリは必要なく、

ドキュメントヘッドに特定のタグを付けるだけでHTMXを利用できます。

複雑なビルドステップやシステムは必要ありません。

HTMXのCDN

HTMXを使用する最速最短の方法は、CDNを介してロードすることです。

以下のコードをヘッドタグに追加するだけで完了します。

<script src="https://unpkg.com/htmx.org@1.9.12" crossorigin="anonymous"></script>

CDNアプローチは非常に簡単ですが、本番環境でCDNを使用しないことを検討することをお勧めします。（unpkg.comのドメインがなくなるだけでサイトが壊れてしまうからです！）

htmxライブラリのコピーをダウンロードする方法

HTMXをインストールする最も簡単な方法は、単にプロジェクトにコピーすることです。

unpkg.comからhtmx.min.jsをダウンロードして、プロジェクトの適切なディレクトリに追加します

<script src="/path/to/htmx.min.js"></script>

htmxのダウンロード先は以下のサイトになります。

以下のサイトのhtmx.min.jsをダウンロードし、

https://unpkg.com/browse/htmx.org@1.9.12/dist/

npmを使ったHTMXのインストール

NPMスタイルのビルドシステムの場合、NPM経由でHTMXをインストールできます。

npm install htmx.org
  • index.jsにインポートを追加します
import 'htmx.org';

カスタムjavascriptファイルを使用する場合は、以下の手順が必要です。

  • カスタムJSファイルを作成します

  • このファイルをindex.jsにインポートします（ステップ2からのインポート以下）

import 'your_module_path/my_custom.js';
  • 次に、以下コードをファイルに追加します。
window.htmx = require('htmx.org');

yarnを使ったHTMXのインストール

yarnスタイルのビルドシステムの場合、次のコマンドでHTMXをインストールできます。

しかし、必要な工程があまりにも多いのでお勧めはできません。

手順は以下の通りです。

yarn add htmx.org
  • index.jsにインポートを追加します
import 'htmx.org';

カスタムjavascriptファイルを使用する場合は、以下の手順が必要です。

  • カスタムJSファイルを作成します

  • このファイルをindex.jsにインポートします（ステップ2からのインポート以下）

import 'your_module_path/my_custom.js';
  • 次に、以下コードをファイルに追加します。
window.htmx = require('htmx.org');

Ajax通信

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

発行できるメソッドの種類と属性は以下の通りです。

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

これらの属性のそれぞれは、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"を持つ要素に適用されます。 これにより、ページ全体をリロードすることなく、指定された部分だけが更新されます。

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