HTMX: Web の未来

HTMX: HTML 中心のインタラクションによる Web 開発の合理化

この投稿では、Tailwind CSS (フロントエンド)、Python、Flask (バックエンド) で構築された SaaS プラットフォームに HTMX を統合した私の経験を探ります。他のテクノロジーについてはよく知っていますが、HTMX は私のツールキットに新しく追加されたものです。 この投稿ではその実装について詳しく説明します。

JSON 指向のアーキテクチャ: 課題

HTMX に取り組む前に、そのターゲットを理解することが重要です。 従来のフルスタック アプリケーションは、多くの場合、JSON 指向のアーキテクチャに依存しています。バックエンドは JSON データを送信し、フロントエンドはそれをレンダリングします。このアプローチでは、対話性が向上しますが、データのオーバーヘッドが大きくなります。 JSON ペイロードは同等の HTML の 10 倍になる可能性があり、パフォーマンスの低下につながります。

HTMX: パラダイムシフト

HTMX は、サーバーが HTML を直接返すことを推奨することで、この非効率性に対処します。 これによりデータ転送が最小限に抑えられ、ユーザー エクスペリエンスが向上します。 HTMX は単純な JSON の置き換えを超えています。サーバー側とクライアント側のロジックが緊密に統合され、その結果、より高速で応答性の高い対話が可能になります。

重要なことは、HTMX は JavaScript に置き換わるものではありません。 JavaScript を組み込む必要があります (CDN またはローカル ファイル経由)。

他の JavaScript フレームワークに対する HTMX の主な利点は、HTML 属性を通じて API と直接対話し、JavaScript コードを最小限に抑えることができることです。

例: データのフェッチとレンダリング

次のコードは、HTMX、クライアント側テンプレート、Nunjucks テンプレート エンジンを使用して API からデータをフェッチし、レンダリングする方法を示しています。

<code class="language-html"><title>Nibodhdaware News Blog</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"></code>

これにより、HTMX とそのクライアント側テンプレート拡張機能 (後述) を含む HTML が設定されます。 Nunjucks はテンプレートに使用されます。

メインのレンダリング ロジック:

<code class="language-html"><h1>Nibodhdaware</h1>
<p>HTMX JSON API Test</p>
<div hx-ext="client-side-templates">
  <div hx-get="https://api.spaceflightnewsapi.net/v4/blogs/" hx-trigger="load" nunjucks-template="blogs-template">
    <template>
      <p>The `hx-ext='client-side-templates'` attribute tells HTMX to utilize the extension.  We're using the Space Flight News API. `hx-trigger="load"` sends a GET request on page load.  `nunjucks-template` identifies the template.</p>

      <p>The API response schema is:</p>
      <code>
      {
        "count": 123,
        "next": "...",
        "previous": "...",
        "results": [ /* array of blog objects */ ]
      }
      </code>

      <p>Nunjucks (similar to Jinja) uses `{% %}` for code blocks and `{{ }}` for variables.  `{% if previous %}` checks for pagination. `{% for blog in results %}` iterates through blog posts, accessing properties like `{{ blog.url }}` and `{{ blog.title }}`.</p>

      <p>The blog posts are loaded directly from the API upon page load.</p>
      <img src="/uploads/20250116/17370305576788fb9d220a3.jpg" width="800" height="400" loading="lazy">

      <p>The remarkable aspect is the direct use of API data without explicit fetch calls or JavaScript manipulation of `innerHTML`.</p>
    </template>
  </div>
</div></code>

結論

JSON API を作成する必要がある場合もありますが、HTMX は HTML の直接レンダリングを可能にすることでフロントエンドを簡素化し、開発の複雑さを軽減し、パフォーマンスを向上させます。

以上がHTMX: Web の未来の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。