ハイパーメディア駆動型アプリケーション

#Genesis（創世記）

テーゼ：MPA - マルチページアプリケーション

アンチテーゼ：SPA - シングルページアプリケーション

ジンテーゼ：HDA - ハイパーメディア駆動型アプリケーション

--@htmx_org

#ハイパーメディア駆動型アプリケーションアーキテクチャ

ハイパーメディア駆動型アプリケーション（HDA）アーキテクチャは、ウェブアプリケーション構築における新旧融合のアプローチです。従来のマルチページアプリケーション（MPA）のシンプルさと柔軟性と、シングルページアプリケーション（SPA）の優れたユーザーエクスペリエンスを兼ね備えています。

HDAアーキテクチャは、ウェブの既存のHTMLインフラストラクチャを拡張することにより、ハイパーメディア開発者がより強力なハイパーメディア駆動型インタラクションを作成できるようにします。

アーキテクチャ上のRESTの概念に従い制約、2つの制約がHDAアーキテクチャを特徴づけます。

• HDAは、より優れたフロントエンドのインタラクティブ性を実現するために、命令型のスクリプトではなく、宣言的な、HTMLに埋め込まれた構文を使用します。

• HDAは、非ハイパーメディア形式（例：JSON）ではなく、ハイパーメディア（つまりHTML）に関してサーバーとやり取りします。

これらの2つの制約を採用することにより、HDAアーキテクチャは、SPAアーキテクチャとは異なり、ウェブの元のRESTfulアーキテクチャにとどまります。

特に、HDAはHypermedia As The Engine of Application State (HATEOAS)を引き続き使用しますが、ほとんどのSPAはクライアント側のモデルとデータ（ハイパーメディアではなく）APIを優先してHATEOASを放棄します。

#HDAフラグメントの例

htmxのアクティブサーチの例を考えてみましょう。

<h3> 
  Search Contacts 
  <span class="htmx-indicator"> 
    <img src="/img/bars.svg"/> Searching... 
   </span> 
</h3>
<input class="form-control" type="search" 
       name="search" placeholder="Begin Typing To Search Users..." 
       hx-post="/search" 
       hx-trigger="keyup changed delay:500ms, search" 
       hx-target="#search-results" 
       hx-indicator=".htmx-indicator">

<table class="table">
    <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
    </thead>
    <tbody id="search-results">
    </tbody>
</table>

これは、通常SPAに関連付けられるUXパターンです。ユーザーが入力すると、わずかな遅延の後、検索結果が下の結果テーブルに表示されます。しかし、この場合、HTML内で完全に、HTMLに沿った方法で実現されています。

この例は、HDAの本質的な特性を効果的に示しています。

• 機能のフロントエンドは、宣言的なhtmx属性で、HTMLに直接指定されています。

• サーバーとのインタラクションはHTTPとHTMLで行われます。HTTP `POST`リクエストがサーバーに送信され、サーバーからHTMLが返され、htmxがこれをDOMに挿入します。

#HDAにおけるスクリプト

Code-On-Demandは、ウェブの元のRESTfulアーキテクチャのオプションの制約です。

同様に、HDAアーキテクチャには、最終的なオプションの制約があります。

• Code-On-Demand（つまりスクリプト）は、可能な限り、主要なハイパーメディアに直接記述する必要があります。

これは、ロイ・フィールディングが彼の論文で言及しているCode-On-Demandに関する懸念事項に対処しています。

しかし、（Code-On-Demand）は可視性を低下させるため、REST内ではオプションの制約に過ぎません。

Code-On-Demand（スクリプト）をHTMLに直接埋め込むことで、可視性が向上し、Locality of Behaviorソフトウェア設計原則を満たします。

この3番目の制約を満たすスクリプトへの3つのアプローチは、hyperscript、AlpineJS、およびVanillaJS（HTML要素に直接埋め込まれている場合）です。

これらのアプローチのそれぞれの例を以下に示します。

<!-- hyperscript -->
<button _="on click toggle .red-border">
  Toggle Class
</button>

<!-- Alpine JS -->
<button @click="open = !open" :class="{'red-border' : open, '' : !open}">
  Toggle Class
</button>

<!-- VanillaJS -->
<button onclick="this.classList.toggle('red-border')">
  Toggle Class
</button>

HDAでは、ハイパーメディア（HTML）がアプリケーション構築の主要な媒体であるため、

• サーバーとのすべての通信は、ハイパーメディア（HTML）レスポンスを使用したHTTPリクエストを介して管理されます。
• スクリプトは、主にアプリケーションのフロントエンドエクスペリエンスを向上させるために使用されます。

スクリプトは既存のハイパーメディア（HTML）を拡張しますが、置き換えるわけではなく、HDAの基本的なRESTfulアーキテクチャを破壊しません。

#HDAスタイルのライブラリ

次のライブラリを使用すると、開発者はHDAを作成できます。

• https://htmx.dokyumento.jp
• https://unpoly.com/
• https://piranha.github.io/twinspark-js/
• https://hotwire.dev
• https://hyperview.org/（モバイルハイパーメディア！）

適切に使用した場合、次のスクリプトライブラリはHDAアプローチを補完します。

• https://hyperscript.org
• https://alpinejs.dev/
• http://vanilla-js.com/（HTMLに直接埋め込まれています）

#結論

HDAアーキテクチャは、先行する2つのアーキテクチャ、元のマルチページアプリケーション（MPA）アーキテクチャと（比較的）新しいシングルページアプリケーションアーキテクチャの統合です。

これは、MPAsのシンプルさと信頼性、RESTfulアーキテクチャとHypermedia As The Engine Of Application Stateを使用し、多くの場合、SPAと同等の優れたユーザーエクスペリエンスを提供することを目指しています。