htmxを使ってみる

背景

jQuery処理をJSのフロント・フレームワーク（React, Vue...）などで書き換える風潮の中で、Railsの世界では、HotWireという、異端が誕生されました（Laravelには、LiveWire, Djangoには、unicorn)。既存のサーバー技術を使いながら、HTMLの一部をサーバーからかえってきたHTMLで置換して、SPAに近いUXを得られます。

古いシステムでは、近いことをやろうとしたら、AJAXを発行して、サーバーからJSONがかえっててきて、それでHTMLを生成して、それからHTMLの一部を置換する。すごい手間がかかります。

同じことを手間がかからず、素早くできるのはHTMXというものです。

サンプルを見てみよう。

PHPの例です。

• HTMLの部分

<!--ヘッダ部にこれを入れてね-->
<script src="https://unpkg.com/htmx.org@1.6.0"></script>

<!--AJAXのリクエストを発火させるボタン-->
<button 
    hx-get="/count.php"
    hx-trigger="click"
    hx-target="#count"
    hx-swap="outerHTML">
  数量を取得
</button>

<!--置換される要素-->
<span id="count">0<span/>

• PHPの部分(count.php)

//置換用HTMLの生成
$count = 123;
$html = <<<
  <span id="count">{$count}</span>
>>>HTML;
echo $html;

数量を取得ボタンをクリックしたら、サーバーから数量のHTMLを取得して、spanを置換してくれます。どうですか？簡単でしょう。

テンプレートエンジンを利用すると、HTMLコンポーネントぽいものが作られて、まるでサーバー側でHTMLのコンポーネントを管理している。

もちろん、これが氷山の一角です、使い型は沢山がありますので、こちらのサンプルをみてください。

最後

まること新しいアプリを作る場合選択しは色々ありますが、既存のサーバーアプリがある場合、簡単に導入できるのが魅力的ですね。

今回は、ここまでにします。