⚒️

JSを書かずにAJAX！htmxを試してみる

2022/10/25に公開

HTML

htmxとは

htmlの属性を利用して、直接AJAXやCSS Trassitions、WebSocket、Server Send Event利用できるようにしたもの。
今までJavaScriptで書いていた部分がHTMLのみ（しかも少量）で完結するので、シンプルでとても良い。
htmxのホームページに載っているモチベーションも面白いので是非ご一読ください。

ちなみに、最近のDjangoCon US 2022でも話題に上がっていました。

とっても簡単な例

ホームページにも載っている例ですが、わかりやすかったのでここでも紹介します。

<script src="https://unpkg.com/htmx.org@1.8.2"></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
  Click Me
</button>

buttonタグにhx-postとhx-swapという属性がついています。
hx-postは、ユーザーがボタンをクリックしたときに/clickedにAJAXリクエストを送ることを意味し、hx-swap="outerHTML"はタグをHTMLレスポンスに丸々置き換えることを示しています。

実際に触ってみる

たくさん利用方法はありますが、ここではPOSTリクエストを送って、帰ってきたHTMLレスポンスで置き換える例をいくつか紹介します。

また、サーバー側にはdenoを使用し、Deno Deployに乗っけています。
書き捨てなので綺麗ではないですが...
サンプルページ：https://k41531-htmx-deno.deno.dev/
リポジトリ：https://github.com/k41531/htmx-deno

サーバ側

import { serve } from "https://deno.land/std@0.140.0/http/server.ts";

const HTML = await Deno.readFile("./index.html");

// /click にリクエストを送ると特定のHTMLテキストを返すようにする
const CLICK_ROUTE = new URLPattern({ pathname: "/click" });
// 今回レスポンスで返すHTMLテキスト
const SAMPLE_TEXT = "<p>RESPONSE TEXT</p>";

function handler(req: Request): Response {
  const headers = {
    "content-type": "text/html",
  }
  
  // urlが /click かどうかを調べる
  if (CLICK_ROUTE.exec(req.url)) {
    return new Response(SAMPLE_TEXT, {
      headers,
    });
  }

  return new Response(HTML, {
    headers,
  });
}

serve(handler);

HTML側

次のスクリプトを読み込めば簡単にHTMXを利用できます。

<script src="https://unpkg.com/htmx.org@1.8.2"></script>

innerHTML
タグの中身をレスポンスのHTMLで書き換える。

<button hx-post="/click"  hx-swap="innerHTML">
　　Click Me
</button>

タグにhx-postの属性を与えると、デフォルトでhx-swap="innerHTML"属性も与えられます。
上のコードと同じ。

<button hx-post="/click">
　　Click Me
</button>

outerHTML
タグそのものをレスポンスのHTMLで書き換える。

<button hx-post="/click" hx-swap="outerHTML">
　　Click Me
</button>

afterbegin
タグ中の最初の子の前にレスポンスのHTMLを追加する

<button hx-post="/click" hx-swap="afterbegin">
　　Click Me
</button>

beforebegin
タグの前にレスポンスのHTMLを追加する

<button hx-post="/click" hx-swap="beforebegin">
　　Click Me
</button>

beforeend
タグ中の最初の子の後にレスポンスのHTMLを追加する

<button hx-post="/click" hx-swap="beforeend">
　　Click Me
</button>

afterend
タグの後にレスポンスのHTMLを追加する

<button hx-post="/click" hx-swap="afterend">
　　Click Me
</button>

none
何もしない

<button hx-post="/click" hx-swap="none">
　　Click Me
</button>

感想

この他にもできることがたくさんあるので、ぜひリファレンスを読んでみてください。
ReactやVueなどのJavaScriptのライブラリやフレームワークに疲れた人や小さなプロジェクトには良さそう。何かしらに使ってみたい。
これからさらに普及していくのか...?