HTMXとは何か

HTMXは、HTMLの属性を追加するだけで、AJAX通信やCSS Transitions、WebSocketなどのモダンな機能を実現できる軽量JavaScriptライブラリです。わずか14KB(gzip圧縮時)のサイズで、ReactやVue.jsのようなフレームワークを使わずに、対話的なWebアプリケーションを構築できます。

JavaScript依存のWeb開発に疲れた」という開発者の間で急速に人気が高まっており、GitHub Starsは4万を超えています。

基本的な仕組み

HTMXの考え方はシンプルです。従来、HTMLで「リンクをクリック→ページ全体を更新」しかできなかったのを、「あらゆる要素から→あらゆるHTTPメソッドで→ページの一部だけを更新」できるように拡張します。

例を見てみましょう。

<button hx-post="/api/like" hx-target="#like-count" hx-swap="innerHTML">いいね</button>

このボタンをクリックすると、/api/likeにPOSTリクエストが送られ、レスポンスのHTMLが#like-count要素の中身に差し替わります。JavaScriptを1行も書いていないのに、SPA的な挙動が実現できるわけです。

主要な属性

HTMXの中核となる属性はこちらです。

hx-get / hx-post / hx-put / hx-delete:HTTPメソッドの指定
hx-target:レスポンスを挿入する要素の指定
hx-swap:挿入方法(innerHTML、outerHTML、beforeend等)
hx-trigger:イベントの指定(click、change、every 2s等)
hx-indicator:ローディング表示の指定

なぜHTMXが人気なのか

フロントエンドの複雑さに対するアンチテーゼ

React、Next.js、TypeScript、Webpack、Babel…。現代のフロントエンド開発は、プロジェクトを始める前のセットアップだけで半日かかることも珍しくありません。HTMXは、この複雑さに対するアンチテーゼとして支持されています。

サーバーサイドでHTMLを生成し、HTMXで部分更新する。これだけで多くのWebアプリケーションは十分に作れます。モダンCSSと組み合わせれば、JavaScriptフレームワークなしでも見た目も使い勝手も良いサイトが構築可能です。

サーバーサイド言語の自由度

HTMXはサーバーからHTMLを受け取るだけなので、バックエンドの言語を選びません。Python(Django/Flask)、Go、Ruby(Rails)、PHP、Rust、Javaなど、好きな言語でHTMLを返せばOK。JSONを返すAPIを設計してフロントで加工する必要がなくなるので、開発の全体像がシンプルになります。

実践例:検索機能の実装

HTMXでリアルタイム検索を実装してみましょう。

<input type="search" name="q" hx-get="/search" hx-trigger="keyup changed delay:300ms" hx-target="#results" placeholder="検索...">
<div id="results"></div>

キー入力のたびに(300msのデバウンス付きで)/search?q=入力値にGETリクエストを送り、結果のHTMLを#resultsに表示します。たった2行のHTMLで、SPA的な検索体験が実現できるのは感動的ですらありますよね。

HTMXが向いているケース・向いていないケース

向いているケース

・コンテンツ中心のWebサイト(ブログ、ECサイト、管理画面)
・CRUD操作がメインのアプリケーション
・サーバーサイドレンダリングとの組み合わせ
・小規模チームでの開発

向いていないケース

・リアルタイムコラボレーション(Google Docsのようなもの)
・複雑なクライアントサイドの状態管理が必要なアプリ
・オフライン対応が求められるPWA
・ドラッグ&ドロップやアニメーション多用のリッチUI

Oatのような軽量UIライブラリと併用すれば、カバーできる範囲はさらに広がります。

始め方

導入は非常に簡単。CDNから1行追加するだけです。

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

HTMX公式サイトにはチュートリアルやリファレンスが充実しています。また、Hypermedia Systemsという無料の書籍もHTMXの思想を深く理解するのに役立ちます。

まとめ

HTMXは、「Webの原点に立ち返る」というアプローチで、フロントエンド開発の複雑さを劇的に減らしてくれるライブラリです。すべてのプロジェクトに適しているわけではありませんが、多くのWebアプリケーションではHTMX + サーバーサイドレンダリングで十分。フレームワーク疲れを感じている方は、ぜひ試してみてほしいと思います。