## サーバーとの強力な非同期通信を簡単に実現 {#sec-b77e387924b4}

[[HTMX]]は、Djangoのようなサーバーセントリックなウェブ開発フレームワークにおいて、[[JavaScript]]の複雑さに煩わされることなく、強力な非同期機能の実装を可能にします。今回の記事では、**HTMXがAjaxリクエストを処理する内部原理**と、**実際のDjangoビューとの通信方法**を具体的な例を交えて解説します。

![HTMXのAjax通信概念図](/media/whitedec/blog_img/bd86a3db8e1c4c409a777cf86a8047f7.webp)

## [[HTMX]]の核心: HTMLこそがメッセージです {#sec-fcb60a4b40b4}

一般的なAjax通信（例: axios, fetch）では、サーバーからJSONデータを受信し、JavaScriptがこれを解釈して画面を再描画するというプロセスを経ます。しかし、HTMXは**「Hypermedia as the Engine of Application State (HATEOAS)」**の原則に従います。つまり、サーバーはデータ（JSON）ではなく、**完成されたHTMLの断片**を送信し、HTMXはそれを指定された位置に「置き換える」だけです。

**HTMXのAjax通信 4ステップ**

1.  **イベント発生:** ユーザーがHTML要素（ボタンなど）とインタラクションします。
2.  **Ajaxリクエスト:** HTMXがブラウザの`fetch` APIを呼び出し、サーバーにリクエストを送信します。
3.  **HTML応答:** サーバーはロジックを処理した後、ページ全体ではなく**必要な部分のHTML断片**のみを返します。
4.  **DOM置換(Swap):** HTMXは、受け取ったHTMLを`hx-target`で指定された要素に即座に挿入します。



## 実践例: 「いいね」ボタンの実装 {#sec-5eb5b07b3b51}

単に数字を変更するだけでなく、サーバーとHTMLの断片をどのようにやり取りするのかを見ていきましょう。

### 1. フロントエンド (テンプレート) {#sec-cad7db10ba2b}

`hx-post`でリクエストを送信し、サーバーからの応答で`#like-section`全体を置き換える方式です。

```html
<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML">
        ❤️ いいね ({{ likes_count }})
    </button>
</div>
```

この例のように、`hx-target`と`hx-swap`がHTMLタグ内に明示されていれば、後でコードを読み返す際に「このボタンを押すとどこがどのように変わるのか」をJavaScriptファイルを探し回ることなく、すぐに把握できます。個人的な感想としては、コードを見るためにバックエンドのView関数を調べるのは少し不便かもしれませんが、上記の例のようにHTMLタグ内に`hx-`コードが埋め込まれているため、インラインJavaScriptよりも**Locality of Behavior**の観点からは優れているのかもしれない、とも感じます。


### 2. バックエンド (Django View) {#sec-1fda4c57da3b}

ここで重要なのは、**`JsonResponse`ではなく`render`を使用する**という点です。

```python
from django.shortcuts import render

def like_post(request):
    # いいねロジックを処理（例: DB更新）
    new_count = 10 
    
    # ページ全体ではなく、ボタン部分のみを含む小さなテンプレートの断片を返します。
    return render(request, 'partials/_like_button.html', {
        'likes_count': new_count
    })
```

## 3. 応答用部分テンプレート {#sec-ce5390bdc052}

サーバーがクライアントに送信する「HTMLの断片」です。`hx-swap="outerHTML"`が設定されているため、既存の`#like-section`全体がこの内容に置き換えられます。

```HTML
<!-- partials/_like_button.html -->
<div id="like-section">
    <button hx-post="/like/" 
            hx-target="#like-section" 
            hx-swap="outerHTML"
            class="btn-liked">
        ❤️ いいね ({{ likes_count }})
    </button>
</div>
```

### なぜこの方法を用いるのか？ (原理の理解) {#sec-67af112c65f1}

従来の方式では、`JsonResponse({'likes': 10})`を受け取った後、JavaScriptで`document.getElementById('count').innerText = data.likes`といったコードを記述する必要がありました。

しかし[[HTMX]]方式では:
1.  **ロジックの断片化防止:** 「いいねが押されたときに画面がどのように変化すべきか」という定義をサーバー（Djangoテンプレート）が管理します。
2.  **データとビューの同期:** サーバーから送信されたHTMLがそのまま画面に反映されるため、クライアント側でデータを加工する際に発生しがちなミスがなくなります。

 
## 終わりに {#sec-b28d1b5245c5}

[[HTMX]]を使用することは、単にコード量を減らすだけでなく、ウェブ本来の機能である「ハイパーメディア（HTML）」を最大限に活用する方式へと回帰することです。これにより、開発者はJavaScriptの状態管理の複雑さから解放され、サーバーロジックにより集中できるようになります。


**関連記事** :

- [DjangoとHTMXで動的Web開発をシンプルにする（パート1）](/ja/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/)
- [DjangoとHTMXで動的ウェブ開発をシンプルに - Ajax（第2回）](/ja/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-2/)
- [DjangoとHTMXで動的ウェブ開発をシンプルに (第3回): Djangoへの統合方法](/ja/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-3/)
- [DjangoとHTMXで動的Web開発をシンプルに（第4回）：ペイロードの送信方法](/ja/whitedec/2025/1/27/django-htmx-csrf-token-integration/)
- [DjangoとHTMXで動的Web開発をシンプルに：FormとSerializerの活用法](/ja/whitedec/2026/4/22/django-htmx-forms-serializer-usage/)[DjangoとHTMXで動的Web開発をシンプルに：FormとSerializerの活用法](/ja/whitedec/2026/4/22/django-htmx-forms-serializer-usage/)
- [DjangoとHTMXで動的ウェブ開発をシンプルに：Triggerの活用法](/ja/whitedec/2026/4/23/django-htmx-dynamic-web-development-trigger/)