本書は、2023年7月に米国で出版された『Hypermedia Systems』の日本語訳です。htmxおよびHyperviewの作者自身らによって書かれた本書は、ハイパーメディア駆動型アプリケーション（HDA）の理論と実践を通じて、HTMLや「ハイパーメディアシステム」本来の力を再評価する啓発的な入門書です。

近年のウェブ開発では、ReactやVue.jsといったSPAフレームワークが主流になっています。こうしたツールは非常に強力であり、高度なインタフェースの構築が可能になりました。一方で、ツールチェーンは複雑かつ大規模化しており、初学者にとっては敷居が高く、保守やバージョンアップには多大なコストがかかることも珍しくありません。

そんな中で本書が提案するのは、HTMLをハイパーメディアとしての特徴を保ったまま拡張し、RESTアーキテクチャの強みを最大限に生かしたアプリケーションの構築です。著者らはこれをハイパーメディア駆動型アプリケーション（Hypermedia Driven Application、HDA）と呼び、これまでの開発スタイルと差別化しています。

本書は3部構成になっています。第1部では、ハイパーメディアとRESTの関係を理論的に解説し、HATEOASの概念を交えつつ、ハイパーメディアを取り巻く「システム」全体を俯瞰し、その柔軟さと強力さを再確認していきます。第2部では、ハイパーメディア指向のライブラリであるhtmxを使って、HTML中心の開発スタイルの実際的な展開を示します。ページの一部だけを差し替えるページ遷移、フォームのインライン検証、進捗状況表示機能付きの動的アーカイブUIなど、多彩なユースケースへの対応を丁寧に解説しています。読者は順を追ってコードを書いていき、手を動かしながら理解を深めることができる作りになっています。第3部では、Hyperviewというモバイル向けのフレームワークを取り上げ、同じくハイパーメディア指向の考え方が、ネイティブアプリケーション開発にも適用できることを示します。

本書を読めば、モダンなアプリケーションに求められるさまざまなインタラクションは、驚くほどシンプルかつ明快に実現できることが理解できるでしょう。ハイパーメディアという考え方は、決して過去の遺産ではなく、現代においても十分に強力な開発手法なのです。

本書の対象読者

本書は、さまざまな立場の読者にとって、多くの示唆を得られる内容になっています。

まず、ReactやVue.jsといったSPA技術に慣れ親しんでいるフロントエンドエンジニアは、本書が最も意識して書かれた読者層です。本書を読むことで、ハイパーメディアアプローチのシンプルさと強力さを実感できます。MPAとも呼ばれる従来型のウェブアプリケーションの作成方法をまったく知らなくても大丈夫です。平易な文法のフレームワークを使って順を追って解説されており、長いコードはほとんどなく、容易に理解できるでしょう。

次に、開発チームの人手不足に悩まされていたり、複雑なフロントエンド構築に消耗しているバックエンドエンジニアにとっても本書は有益です。本書で解説されているUIパターンに目を通してみてください。htmxを使えば、サーバ側の処理を中心としながら、複雑なJavaScriptのコードを書くことなく、実に多くのパターンがシンプルに実現できることを学べます。

モバイルアプリエンジニアにとっては、ネイティブアプリにハイパーメディアの概念を取り入れるHyperviewの存在が非常に興味深く映るでしょう。Hyperviewを採用した事例はまだ少なく、あなたのアプリケーションで採用するハードルは高いかもしれません。それでもハイパーメディアの概念に触れ、考えるきっかけにするには十分です。

最後に、ウェブ技術の思想的背景に興味がある読者や、ウェブへの愛着を深めたい人にとっても、読みごたえのある一冊になっています。ハイパーメディアの歴史をたどり、RESTの原点を掘り下げることで、ハイパーメディアシステム全体の強みを深く理解できます。本書を通じて、ウェブへの理解と愛着が一層深まることと思います。

htmxについて

本書に通底するテーマはハイパーメディアシステムであり、特定のフレームワークやライブラリに閉じたものではありません。とはいえ著者のひとりであるカーソン・グロスはhtmxの原作者であり、本書の半分あまりはhtmxに関する章で構成されています。そのため、htmxについて触れないわけにはいきません。

htmxとは何か？ を一言で表現すると、「⁠HTMLをハイパーテキストとして拡張および汎用化するJavaScriptライブラリ」です。より表面的には、「⁠HTMLの属性を記述するだけでAjax通信が行えるJavaScriptライブラリ」ともいえるでしょう。

ご存知の通り、HTMLにはHTTPリクエストを発行する特別な要素があります。`<a>`要素と`<form>`要素です。これらの要素にクリックまたは送信の操作を行うとHTTPリクエストが発行され、レスポンスが画面全体を書き換えます。ごく常識的なHTMLの挙動です。htmxはこれを拡張します。`<a>`要素と`<form>`要素に限定せず、あらゆる要素でHTTPリクエストを発行できるようにします。クリックや送信以外（たとえば値の変化やスクロールなど）をトリガとしてHTTPリクエストを発行できるようにします。そして受け取ったレスポンスを任意のDOMの箇所に差し替えられるようにします。以上がhtmxの役割のほぼ全部です。htmxでは、こうした指示をHTMLタグに`hx-*`の形式の属性として記述します。JavaScriptを書く必要はありません。このようなシンプルさにもかかわらず、驚くほど多くのインタラクションパターンを実現できるのです。

ここ数年、htmxは英語圏で急速に注目を集めています。YouTubeには毎日のようにhtmxの動画が投稿され、Redditなどのオンラインコミュニティでは活発な議論が行われています。注目度を表すひとつの指標として、GitHubの獲得スター数をランク付けした「2023 JavaScript Rising Stars（https://risingstars.js.org/2023/ja⁠）⁠」ではフロントエンドフレームワーク部門でReactに次ぐ2位、翌年にはReactを抜いて1位に躍進しました（https://risingstars.js.org/2024/ja⁠）⁠。これほど注目を集めている理由は必ずしも明らかではありませんが、モダンフロントエンドフレームワークの複雑性や変化の速さに対する不満が、ハイパーメディア指向の開発手法への関心を高めている要因のひとつと言えそうです。

日本でもhtmxに関する情報は徐々に増え、採用事例も見かけるようになってきました。ただ、広く受け入れられているとはまだ言い難い状況です。現在は実用面の紹介が中心ですが、今後採用が広がり、技術コミュニティの成熟とともに、ハイパーメディア指向についても活発な議論が交わされることを期待したいところです。

htmxの未来

htmxがこの先どのように進化していくのか気になる方は少なくないでしょう。htmxの未来について、作者たちは明確なビジョンを持っています。2025年1月に「The future of htmx」（⁠https://htmx.org/essays/future/）というタイトルの記事が公開されました。訳者は、ユニークでたいへん興味深い内容だと感じました。

記事の中で、htmxは自身のことを「新しいjQueryである」と表現しています。2006年に正式リリースされたjQueryはほとんど20年を経過した今も広く使われているJavaScriptライブラリです。jQueryが長続きしている技術的特徴をなぞることで、htmx自身も長寿命なライブラリになることを目指しているといいます。具体的には、APIの安定性を重視することで、今後バージョンアップによって挙動が変わったり、機能が切り捨てられたりすることはありません。また、新機能の追加は控えめになります。こうした特徴を維持することで、htmxを使う開発者は学んだことが無駄になることはありませんし、バージョンアップするプレッシャーに悩まされることもありません。これは、変化の激しい現代のJavaScriptベースのアプリケーション開発の現状とは対照的です。

htmx自身を進化させていくかわりに、htmxの周辺技術、ひいてはハイパーメディアシステム全体を改善していくことを指向しています。その一環として、htmxの思想（htmxそのものではない）をHTML標準に取り込んでいくための作業を開始しています。これはhtmxのコアメンバーのひとりであるアレックス・ペトロス氏が主導する「Triptych Proposals」（⁠https://alexanderpetros.com/triptych/）としてその経過を確認することができます。HTMLは巨大な仕様であり、30年間その形を変えていないリンクおよびフォームに変更を加えることは容易ではありません。少なくとも数年がかりのプロジェクトになることが予想されます。うまくいけば、htmxなどのライブラリの助けを借りることなく、ウェブ標準の力だけで大部分のインタラクションの要求に応えられる未来が訪れるのかもしれません。

全体として言えることは、htmxを学ぶために費やす時間は決して無駄にはならない、ということです。htmxの仕様はこの先も変わらないし、ハイパーメディアアプローチ自体はhtmxに限定されることではなく、HTML仕様に加えられることを真剣に検討されるほどには「まっとう」なのですから。

訳者より

蛇足になりますが、本書の読み方について訳者なりのアドバイスを書いておきます。理論からじっくりと入りたい方は、第1部から順番に読んでいくことをお勧めします。「⁠とにかく手を動かして試す」ことがお好みの読者が最短距離で読むには、まず第1部の第3章を確認し、第2部を通読してみてください。モバイルアプリケーション開発について知りたければ、第2部の代わりに第3部をお読みください。その後で第1部に戻ることで、本書全体の設計思想がより深く理解できることでしょう。

htmxのようなアプローチに興味を持たれた方は、他のライブラリもチェックしてみてください。「⁠Alternatives to htmx」（⁠https://htmx.org/essays/alternatives/）という記事では同様のハイペーメディア指向のアプローチをもつライブラリが紹介されています。技術コミュニティによってライブラリ人気にばらつきがあるので、念頭におくとよいでしょう。たとえばDjangoコミュニティではhtmxの人気が高いですが、RailsコミュニティではTurboがよく使われています。

現在のウェブフロントエンドの開発は、日々複雑さを増しています。技術の進化は目覚ましく、現場で求められる知識やスキルも加速度的に広がっており、多くの開発者が「JavaScript疲れ」を実感しているのではないでしょうか。

新しい技術の登場は歓迎すべきことですが、同時に、ウェブ開発現場にはもっと選択肢が必要だと感じます。本書で紹介されているhtmxやHyperviewは、現代のフロントエンド開発における新たな選択肢です。重要なのは、どちらか一方を「正解」として選ぶことではなく、それぞれの特性や利点を理解し、プロジェクトやチームの状況に応じて柔軟に選択できるようになることです。

本書が、読者の皆さんにとってそうした判断力を培う一助となれば、訳者としてこれ以上の喜びはありません。