生成AI技術を活用したプロダクトの開発支援

最近、htmx という新しい JavaScript ライブラリが世界で注目されていることをご存知でしょうか。

GitHub におけるスター数から注目度の高さが伺えます。

htmx とは？

htmx は Web アプリケーションのフロントエンドを作るための JavaScript ライブラリです。フロントエンドの開発には、React や Vue といったフレームワークが一般的に使われています。htmx はこれらと全く異なるコンセプトのライブラリです。

htmx は JavaScript を使わずに HTML だけでフロントエンドを開発できます。JavaScript を書かないにも関わらず、React や Vue で開発した SPA のようなアプリケーションを作ることができます。この点がこれまでの SPA とは一線を画しているポイントになります。

htmx が登場した背景

2010年代の前半ごろは、アプリケーションサーバーが HTML を返却し、ブラウザで画面を表示するアーキテクチャが一般的でした。いまでは、Multi Page Application (MPA) と呼ばれるアーキテクチャです。

近年は React や Vue といったフレームワークを利用して SPAとしてアプリケーションを開発するのが一般的です。こうしたフレームワークは独自にDOMツリーの状態を管理し、アプリケーションの状態変化に応じて、クライアントサイドだけで表示を更新できます。仮想DOMといわれる技術です。これにより、フロントエンド側は、サーバーからの応答を待たずに動作できるため、デスクトップアプリのような高い操作性を実現できます。このようなアプリケーションは Single Page Application (SPA) と呼ばれています。

SPA を開発するためのフレームワークが一般的になり、フロントエンドの開発には、高い専門性が要求されるようになりました。そして、フロントエンドとバックエンドが別々のチームで開発されることが多くなりました。Web アプリケーションを作るときは、とりあえずフレームワークを使うことがほとんどです。本当にすべてのアプリケーションで、そんな複雑なフレームワークを使う必要がある価値があるのか？Rails を開発した DHH 氏が有名ですが、こうした流れを良しとしないエンジニアも少なくありませんでした。そこで最近、脚光を浴びているのが htmx というライブラリです。

なぜ htmx が注目を集めているのか

htmx が注目されている理由は、React や Vue といったフレームワークとは全くことなり、HTML だけでフロントエンドを開発でき、なおかつ、SPA のような動作を実現できるためです。HTML だけでフロントエンドを開発でければ、いろんなことがとてもシンプルになります。フロントエンドは単に昔のように、テンプレートエンジンで HTML を吐き出すだけでよくなります。

もともとの HTML の問題点は、HTML だけでは、動的なフロントエンドが作れないということでした。HTML は毎回ページをフルで読み込まなければ、画面を更新できません。データを更新するたびにサーバーにリクエストを送り、応答が返ってくるまでは、画面が真っ白になります。通信速度が遅かったり、ページのサイズが大きいと、とても動作が遅く感じられます。

従来からあった、この HTML の問題に対して、htmx が選んだ解決手段は、HTML を拡張するということです。HTML を拡張し、独自の属性を埋め込むことを可能にしました。これにより、JavaScript を書かずに、SPA のように動的な UI をつくれます。これまで「必要悪」とみなされてきた JavaScript を排除し、宣言的な HTML でアプリケーションを作れるようにしようというわけです。この思想に多くのソフトウェアエンジニアが共感しています。

htmx は「ハイパーメディア駆動アプリケーション」(HDA: Hypermedia Driven Application) というコンセプトを提唱しています。以下は HDA がなにかを説明している部分の引用です。htmx の特徴をよく表していると思います。

引用元：https://htmx.org/essays/hypermedia-driven-applications/

The Hypermedia Driven Application (HDA) architecture is a new/old approach to building web applications. It combines the simplicity & flexibility of traditional Multi-Page Applications (MPAs) with the better user experience of Single-Page Applications (SPAs).

翻訳：

ハイパーメディア駆動アプリケーション（HDA）のアーキテクチャは、Web アプリケーションを開発する「古くて新しい方法」です。従来の Multi-Page Application (MPA) のシンプルさと柔軟性を持ちながら、Single Page Application (SPA) のような高い UX を備えています。

htmx の動作

htmx はどのように動作するのか簡単に説明します。とても単純なしくみです。htmx では、HTML のあらゆる DOM 要素に対し、イベントのトリガ (hx-trigger) と、置き換え対象の DOM 要素 (hx-target) の CSS セレクタを指定することできます。そして、トリガに指定されたイベントが発生したときに、htmx は、ターゲットの DOM 要素をサーバーから受け取った HTML で置き換えます。

htmx の簡単な例を見てみましょう。

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

この button タグは次のように動作します。ユーザがブラウザでボタンを押すと、parent-div という ID を持った DOM 要素全体が、/clicked リクエストへのレスポンス (HTML) で置換されます。この置換は、画面全体をロードするのではなく、まるで React で開発した Single Page Application (SPA) のように画面の一部の更新する形で行われます。

htmx は完璧ではない

私が検証した時点では、htmxは、どんなプロジェクトでも使える銀の弾丸というわけではなさそうです。実際に試してみて感じた、メリットとデメリットを以下にまとめました。

htmx のメリット

テンプレートエンジンで HTML を書くだけなので、フロントエンドの開発がシンプルになる。
フロントエンドをビルドしたりする必要がないので、アプリケーションの構成やデプロイが簡単になる。
フロントから API を呼び出す手間がない。認証が単純なクッキーで間に合うので考えることがなくて楽。

htmx のデメリット

ブラウザ側でのグローバルな状態管理手段がない。画面デザインによっては JavaScript を避けられない。
Hx-Trigger ヘッダなど使ってイベント発火などをやりだすと、動作の局所性がなくなり複雑になる。
ビジネスロジックとテンプレートのロジックが密結合しやすい。ブラウザ向けのソーシャルゲームを開発してたときを思い出す。

htmx の使いどころ

社内向けの管理画面とか、モバイルアプリケーションを作る必要がないサービスの開発では使えるかもしれません。また、スタートアップなどの初期のプロトタイプや MVP の開発など、最小限の人数で素早く開発したい場合にも良いかもしれません。

htmx の学習資料

公式ドキュメントがコンパクトにまとまっています。

https://htmx.org/docs/

htmx 開発者による HyperMedia Systems という書籍の 4 章以降に使い方やパターンの説明があり、概要を把握するのに適しています。

https://hypermedia.systems/extending-html-as-hypermedia/

以下に多くの知見がたまっており、実際にサーバーサイドのフレームワークと組み合わせた例としてコードを参考にするのがおすすめです。

https://github.com/rajasegar/awesome-htmx

デモ動画

5:00〜10:00 あたりのデモと解説が分かりやすいです。HX-* HTTP ヘッダを使ったイベント発火方法についても解説されています。

DjangoCon 2022 | From React to htmx on a real-world SaaS product: we did it, and it’s awesome!

まとめ

一昔まえのようにテンプレートエンジンを使ってゴリゴリ Web アプリを書くのは楽しいですよね。なにか思いついたら、Go の html/template パッケージと htmx を組み合わせてなにか作ってみたいと思います。

htmx: 新しい Web 開発のトレンド