htmxとは何か

htmxとは、HTMLのタグに独自の属性(attribute)を付けることで、簡単にAJAXできるようにするJavaScriptライブラリ（小さなフレームワーク）です。
HTMLの自然な拡張になっており、JacaScriptのコードをほとんど書く必要がありません。
サーバーからの応答はHTML形式を想定しています。
最近流行ののSPA（Single Page Application)を作るのに適しています。
学習コストが低く、他のライブラリのように、独自の文法や使い方を覚える必要がありません。
jQueryの代替になるかもしれません。

以下、htmxのドキュメントの抜粋＝私が理解して使ったものだけ＝です。

htmxのインストール

UNPKGの当該ページからダウンロードして、scriptタグで貼り付けます。
2020/10/10現在の最新バージョンは、2.0.2でした。
ダウンロードしたファイルには、バージョン番号を付けておくことを推奨します。
HTMLファイルのヘッダに、

<script src="htmx-2.0.2.js"></script>

などとして貼り付けます。

htmxはHTMLのタグに独自の属性を付けることで、AJAXができるようにしています。
例えば、

<div hx-get="/get_message">Click</div>

のように記述すると、

という動作をします。
他のライブラリやフレームワークに比べて、簡単にAJAXを実現することができます。

htmxがサポートするHTTPメソッドは以下のとおりです。

AJAXリクエストが行われるためのトリガーは以下のとおりです。

HTMLタグ	トリガー
input、textarea、select	内容が変わったとき(onChange)
form	submitされたとき(submitボタンが押された)(onSubmit)
その他	クリックされたとき(onClick)

発火を遅らせる、ポーリング、特定のキーの組み合わせ、特別なイベントなど、トリガーを修飾することができます。

標準では、自分自身ですが、hx-target属性で、適用先（書き換え先）を指定することができます。

<button hx-get="/example" hx-target="#search-results">Get Some HTML</button>
<div id="search-results"></div>

適用先の指定には、CSSセレクタが使えます。
上記の例では、

標準ではタグの中身を書き換えますが、hx-swap属性で、置換方法を指定することができます。

置換をモーフィングさせることや、オプションで置換の様子を変えることもできます。

アンカータグ（<a>）やフォームタグ（<form>）は、サーバーからのページ全体のデーターを送ってもらいブラウザを書き換え（ページ遷移）ますが、htmxでは、hx-boost属性を設定することで、アンカータグやフォームタグをAJAX化して、<body>の内容だけを書き換えるようにできます。

<div hx-boost="true">
    <a href="/blog">Blog</a>
</div>

HTMLの<head>で多くのファイルを読み込ませている場合に便利だそうです。

hx-on属性を付けることで、要素にイベントをつけることができます。
主な（使用頻度の高そうな）イベントには次のものがあります。

イベント名	説明
afterRequest	AJAXが完了した
afterSettle	DOMが落ち着いた
afterSwap	要素が書き換えられた
beforeRequest	AJAXを実行する前
beforeSwap	要素を書き換える前
beforeSend	AJAXリクエストを送る前
responseError	HTTPレスポンスがエラーコード(200 または 300 代以外)を返したとき
sendError	ネットワークエラーによりHTTPリクエストができない
swapError	要素の書き換え時にエラーが起こった
targetError	無効なターゲットが指定された
timeout	リクエストがタイムアウトした

他にも多くのイベントがあります。
イベントを使う場合は、

<button hx-get="/info" hx-on::before-request="alert('Making a request!')">
    Get Info!
</button>

のように記述します。
イベント名はキャメルケースで書かれていますが、HTMLに記述するときはケバブケースにする必要があります。(ver.2.0.2の制限か？）

htmxには、簡単にJavaScriptを呼び出す仕組みがあります。
主な（使用頻度の高そうな）ものには次のものがあります。

他にも、多くのAPIがあります。
APIを使う場合は、

var div = htmx.find("#my-div")

htmx.addClass(htmx.find('#demo'), 'myClass');

のように記述します。