🥸

話題のhtmxの思想に触れる

に公開
htmx
tech

最近話題のhtmxをキャッチアップしたときに設計思想が面白かったので、その備忘です。

htmxとは？

JavaScriptのフロントエンドライブラリです。

https://htmx.org/docs/

開発経緯

ReactやVueといったSPAフレームワークでの開発が主流になりましたが、シンプルなSPAを開発する際にもコード量が多くなってしまう課題感だったそうです。もともとのWebサーバーからHTMLを取得して表示する仕組みでモダンなUXを実現しようという動機で開発されました。ハイパーメディアとしてのHTMLを尊重しようという思想のようです。

最小限のコード例

ボタンを押したらサーバーに問い合わせてデータ取得して、画面に描画する例です。

htmxライブラリの読み込み
<head>
    ...
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
    ...
</head>

JavaScriptライブラリの読み込みなので下準備はこれでOKです。簡単ですね！

GETの例
<body>
    ...
    <button hx-get="/content" hx-target="#result">
        クリックしてね
    </button>
    <div id="result">ここに結果が表示されます</div>
    ...
</body>

/content に問い合わせて、取得したデータを #result に埋め込む場合の書き方です。hx-get属性にGETリクエストの宛先を記述し、hx-target属性に取得したデータを配置したいHTML要素の指定をします。

全体のコード
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>htmx 超シンプルExample</title>
    <script src="https://unpkg.com/htmx.org@1.9.10"></script>
</head>
<body>
    <h1>htmx 超シンプルExample</h1>

    <div class="box">
        <h2>Example: ボタンでコンテンツを読み込む</h2>
        
        <!-- これだけ！ -->
        <button hx-get="/content" hx-target="#result">
            クリックしてね
        </button>
        
        <div id="result">ここに結果が表示されます</div>
    </div>

    <!-- モック用の簡単なスクリプト -->
    <script>
        // 実際のサーバーの代わりに、ブラウザ上でレスポンスを返す
        document.body.addEventListener('htmx:configRequest', function(evt) {
            if (evt.detail.path === '/content') {
                evt.preventDefault();
                setTimeout(() => {
                    document.getElementById('result').innerHTML = 
                        '<p style="color: green;">✓ 成功！</p>' +
                        '<p>これはサーバーから取得したHTMLです。</p>' +
                        '<p>現在時刻: ' + new Date().toLocaleTimeString() + '</p>';
                }, 500);
            }
        });
    </script>
</body>
</html>

サーバーサイドのレスポンス（思想）

Note that when you are using htmx, on the server side you typically respond with HTML, not JSON.

と書かれており、

この辺はハイパーメディアとしてのHTML尊重の思想を感じさせますね。

Quirks（バグではないが、ユーザが混乱するかもしれない設計上の特徴）というページに書いてあるのですが、

htmx is a hypermedia-oriented front end library. This means that htmx enhances HTML via attributes in the HTML , rather than providing an elaborate JavaScript API.

htmxはハイパーメディア指向のフロントエンドライブラリであり、HTMLの属性によってHTMLを強化するライブラリですよと。
https://htmx.org/quirks/

最後の俳句もいいですね✨

javascript fatigue:
longing for a hypertext
already in hand

和訳「JavaScriptの疲労感に苛まれながら、実は既に手の中にあるハイパーテキストを求めている」

コメント

思想がはっきりしているライブラリっていいですよね。
Streamlitなどもそうですけど、いい感じのカプセル化でシンプルなWebを高速に開発できるようにしようという流れですね。最小限のモックを作って顧客に当ててフィードバックループを回す新規事業開発やスタートアップには非常にありがたい技術だと思いました。また、HTML単一にすることでコード生成もしやすいよなぁと。

Discussion