htmxを触ってみた

最近注目されている(特に海外で)htmxを触ってみました。

公式の引用ですが、htmxでは属性を使用して、HTML内にてAJAX, CSSトランジション, WebSocket, サーバー送信イベントを直接記述できるのでハイパーテキストのシンプルさと強力さを備えた最新のユーザーインターフェイスを構築できます。

例

確認モーダル

jsだとconfirm()に当たるものを属性で書いています。

<h2>確認</h2>
<button hx-delete="/account" hx-confirm="本当に削除しますか？">
  削除する
</button>

GET

expressで簡単なサーバーを作りgetリクエストを送った例です。
hx-targegtで指定しているid="result"に対して結果が表示されます。またhx-indicatorにより待ち時間にLoading...と表示されるようになります。

<h2>GET</h2>
<button 
  hx-get="/hello"
  hx-target="#result"
  hx-indicator="#indicator"
>
Click
</button>

<span class="htmx-indicator" id="indicator">Loading...</span>
<h2 id="result">target</h2>

POST

Clickを押すとユーザー一覧を取ってきます。
inputに値を入力して、submitすることでユーザーを追加することもできます。hx-swap="beforeend"により後ろに追加されていきます。

<h2>ユーザー一覧</h2>
<form
  hx-post="/users/create"
  hx-trigger="submit"
  hx-target="#users"
  hx-swap="beforeend"
>
<input type="text" name="name" id="name" required/>
<button type="submit">Add</button>
</form>
<button
  hx-get="/users"
  hx-target="#users"
  hx-indicator="#indicator2"
  hx-swap="beforeend"
>
  Click
</button>
<span class="htmx-indicator" id="indicator2">Loading...</span>
<ul id="users"></ul>

まとめ

簡単な例でしたが、jsを全く書かずに色々できてちょっと感動しました。

参考