htmxがハイパーメディアの未来を切りひらく : 新刊ピックアップ

htmxは、フロントエンド向けのJavaScriptライブラリです。Reactなどと同様、主にウェブアプリケーションを対象とし、既存のHTMLに力不足を感じて開発された点も共通します。しかし、アプローチは大きく異なります。Reactは、UI構築を力不足のHTMLには依存せずにJavaScriptで制御します。一方、htmxは、力不足のHTMLを拡張して動的機能を実現し（内部的にはJavaScriptを使います⁠）⁠、HTMLをより強力なものへと進化させます。

HTMLを拡張する

HTMLの力不足とは、たとえば次の点です。

HTTPリクエストを発行できるのは、a要素とform要素だけ
発行できるHTTPメソッドは、GETとPOSTだけ
レスポンスによる書き換えは、ページ全体を単位とするだけ

高度で繊細なインタラクションが要求されるウェブアプリケーションには、かなり力不足です。ReactはJavaScriptやJSONを駆使してこの問題の解決に向かいます。一方、htmxは次のようなアプローチをとります。

あらゆる要素がHTTPリクエストを発行できるようにする
すべてのHTTPメソッドを発行できるようにする
レスポンスによってページの一部を書き換えられるようにする

これらをすべてHTMLの延長線上で実現します。具体的には、HTMLに hx-* 形式の独自属性を追加します。たとえば次のものです。

HTTPリクエストのトリガ：hx-trigger
HTTPメソッドの発行：hx-get、hx-post、hx-put、hx-patch、hx-delete
ページの一部の書き換え：hx-target、hx-swap

使用例は次のとおりです。

<div id="main">
  <button hx-get="/contacts" hx-target="#main" hx-swap="outerHTML"
    hx-trigger="click, keyup[ctrlKey && key == 'l'] from:body">
    連絡先を取得
  </button>
</div>

見慣れない属性こそあるものの、従来のHTMLと同様の記述です。しかし、行っていることはHTMLを大きく超えています。ボタンクリックやキーボードショートカットをトリガにしてGETメソッドを発行し、そのレスポンスによってページの全体ではなく一部（div要素全体）を更新します。

同様のシンプルな記述により、htmxでは多くの動的機能を実現できます。入力データのバリデーションやページング、無限スクロール、インクリメンタル検索など。クライアント側でJavaScriptを書くことなく、です。

ハイパーメディアとして拡張する

もしhtmxに少しでも関心を覚えたようでしたら、ぜひ『ハイパーメディアシステム─⁠─htmxとRESTによるシンプルで軽やかなウェブ開発』をご覧ください。本書の第1部はロイ・フィールディングが訴えた本来のREST、HATEOAS（アプリケーション状態のエンジンとしてのハイパーメディア）など、ウェブに関わる方であればぜひ知っておきたい話題ばかりです。そして、htmxはHTMLのただの拡張ではなく、「⁠ハイパーメディアの枠組みを保ったままの拡張」であることの意味と可能性にぜひご注目ください。

「2025年にもなってハイパーメディア？」と笑う方もいるかもしれませんが、ハイパーメディアの構想は1945年のヴァネヴァー・ブッシュに始まります。ダグラス・エンゲルバート、テッド・ネルソンを経て、1990年、ティム・バーナーズ＝リーのWWWによってようやく現実のものとなりました。構想から45年を経て実現し、さらに30年以上の歳月が流れました。たしかに過去のものと映るときもあるかもしれません。けれど、私たちが日ごろ使っている印刷技術の基礎をグーテンベルグが発明したのは600年近く前のこと。ですから、ハイパーメディアはまだ生まれたばかりで、さらなる進化の途上にあると考えることもできるはずです。