DjangoとHTMXで動的Web開発を簡素化する (３篇)

HTMXはDjangoと自然に統合できるツールであり、シンプルな設定だけで動的なWebアプリケーションを構築できます。今回のコンテンツでは、DjangoとHTMXを統合するための全体的な準備作業と設定方法を見ていきます。

Integration of Django and HTMX for dynamic web development

1. HTMXをDjangoに統合するための準備作業

DjangoでHTMXを使用するには、以下のステップに従ってください：

1.1 HTMX JavaScriptライブラリのロード

HTMLテンプレートファイルの <head> タグ内にCDNリンクを追加します。

<script src="https://unpkg.com/htmx.org"></script>

1.2 DjangoでHTMX属性を活用する

HTMXはHTTPリクエストを簡単に処理するための様々な属性を提供しています。

hx-get: GETリクエストを送信するための属性
hx-post: POSTリクエストを送信するための属性
hx-target: サーバーの応答データを挿入するHTML要素を指定

HTMLコードの例

<div id="content">
    <button hx-get="/get-data/" hx-target="#result">データを取得</button>
    <button hx-post="/submit/" hx-target="#result">データを送信</button>
</div>
<div id="result">結果がここに表示されます。</div>

2. DjangoビューとHTMXリクエストの処理

2.1 GETリクエストの処理

from django.http import HttpResponse

def get_data(request):
    if request.method == "GET":
        return HttpResponse("<p>GETリクエスト処理完了！</p>")

2.2 POSTリクエストの処理

from django.http import HttpResponse

def submit_data(request):
    if request.method == "POST":
        return HttpResponse("<p>POSTリクエスト処理完了！</p>")

2.3 URLマッピング

from django.urls import path
from .views import get_data, submit_data

urlpatterns = [
    path('get-data/', get_data, name='get_data'),
    path('submit/', submit_data, name='submit_data'),
]

3. HTMX統合時の注意点

3.1 CSRFトークンの処理

DjangoはCSRF保護を基本として有効になっているため、POSTリクエスト時にCSRFトークンが必要です。HTMXでPOSTリクエストを処理するために、次の2つの方法のいずれかを選択してください：

1. HTML `<meta>` タグとJavaScriptスクリプトを使用する

<meta name="csrf-token" content="{{ csrf_token }}">
<script>
    document.body.addEventListener('htmx:configRequest', function (event) {
        event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
    });
</script>

2. HTML `<form>` タグ内に `{% csrf_token %}` を挿入する

<form hx-post="/submit/" hx-target="#result">
    {% csrf_token %}
    <input type="text" name="name" placeholder="名前を入力してください">
    <button type="submit">送信</button>
</form>
<div id="result"></div>

CSRFトークンの処理に関する詳細は、次回で取り上げます。

3.2 HTMXリクエストの区別

Django 4.2以降では、request.htmx 属性を使用してHTMXリクエストを区別できます。

from django.shortcuts import render

def my_view(request):
    if request.htmx:  # HTMXリクエスト
        return render(request, 'partials/snippet.html')
    return render(request, 'index.html')  # 全ページ

4. HTMXとDjango統合の全体の流れ

4.1 完成したHTMLの例

<!DOCTYPE html>
<html>
<head>
    <title>HTMXデモ</title>
    <script src="https://unpkg.com/htmx.org"></script>
    <meta name="csrf-token" content="{{ csrf_token }}">
    <script>
        document.body.addEventListener('htmx:configRequest', function (event) {
            event.detail.headers['X-CSRFToken'] = document.querySelector('meta[name="csrf-token"]').content;
        });
    </script>
</head>
<body>
    <div id="content">
        <button hx-get="/get-data/" hx-target="#result">GETリクエスト</button>
        <button hx-post="/submit/" hx-target="#result">POSTリクエスト</button>
    </div>
    <div id="result">結果がここに表示されます。</div>
</body>
</html>

今回のまとめ

今回のコンテンツでは、DjangoとHTMXを統合するための準備作業と設定方法を見ていきました。次回は、CSRFトークンの処理方法を中心に、DjangoとHTMXのセキュリティ統合について詳しく解説します。お楽しみに！ 😊