HTMXはシンプルなHTML属性だけで強力な動的ウェブアプリケーションを構築できるようにします。今回の編では、 HTMXの高度な機能を見ていき、 hx-trigger、イベントトリガー、動的データ処理など実践的な活用例を通してHTMXの可能性を広げたいと思います。
そして最後の6篇では、 サーバーとクライアント間の応答処理のノウハウを中心に、HTMXとDjangoを活用した完璧な動的ウェブ開発プロセスをまとめる予定です。
1. HTMXの高度な機能紹介
HTMXの高度な機能は動的データ処理をより柔軟で強力にします。以下は今回の記事で扱う主要機能です:
hx-trigger: 特定のイベントをトリガーとして設定してリクエストを送信。hx-params: リクエスト時に送信するデータをカスタマイズ。hx-swap: サーバーの応答データをDOMに挿入する方法を設定。- 条件付きトリガー: 動作を条件に応じて柔軟に処理。
2. hx-trigger: イベントベースのリクエスト
hx-triggerは特定のイベントをトリガーとして設定してサーバーリクエストを送ることができます。基本的にクリックイベント(click)が使用されますが、これを自由に変更できます。
基本使用例
<input hx-get="/search/" hx-trigger="keyup changed delay:500ms" hx-target="#results" placeholder="検索ワードを入力">
<div id="results">検索結果がここに表示されます。</div>
主なポイント
keyup: キーを入力するたびにリクエストを送信。changed: 入力値が変更されたときのみリクエストを送信。delay: リクエスト送信を500ms遅延。hx-target: サーバー応答データを挿入する要素を指定。
3. hx-params: 送信するデータの制御
hx-paramsはサーバーに送信するデータをカスタマイズできます。
- 特定のデータを除外したり、必要なデータだけを送信できます。
例: 特定のフィールドのみ送信
<form hx-post="/submit/" hx-params="username,email" hx-target="#result">
<input type="text" name="username" placeholder="ユーザー名">
<input type="email" name="email" placeholder="メールアドレス">
<input type="password" name="password" placeholder="パスワード">
<button type="submit">送信</button>
</form>
<div id="result">結果がここに表示されます。</div>
上記のコードでは、 usernameと emailフィールドだけがサーバーに送信され、 passwordは除外されます。
4. hx-swap: 応答データの挿入方法制御
hx-swapはサーバーから受け取った応答データをDOMに挿入する方法を設定します。デフォルトは innerHTMLで、既存のコンテンツが置き換えられます。
主なオプション
innerHTML: デフォルト値。既存のコンテンツが差し替えられます。beforebegin: 要素の前に挿入。afterbegin: 要素内部の先頭に挿入。beforeend: 要素内部の最後に挿入。afterend: 要素の後に挿入。
使用例
<div id="content">
<p>既存のコンテンツ</p>
</div>
<button hx-get="/new-content/" hx-swap="beforeend" hx-target="#content">コンテンツ追加</button>
クリックすると、 /new-content/で受け取った応答データが <div id="content">内部の最後に挿入されます。
5. 条件付きトリガー
HTMXは条件付きでリクエストをトリガーできます。これによりユーザーインターフェイスとの相互作用をさらに細かく制御できます。
例: チェックボックスの選択によるリクエスト
<input type="checkbox" id="confirm" hx-get="/confirm/" hx-target="#message" hx-trigger="change:checked">
<div id="message"></div>
チェックボックスが選択されたときだけ /confirm/にリクエストを送信します。
6. 実習: HTMXで動的フィルタリング実装
HTMLコード
<select hx-get="/filter/" hx-trigger="change" hx-target="#results">
<option value="all">全て</option>
<option value="category1">カテゴリー 1</option>
<option value="category2">カテゴリー 2</option>
</select>
<div id="results">フィルター結果がここに表示されます。</div>
Djangoビュー
from django.http import JsonResponse
def filter_view(request):
category = request.GET.get("category", "all")
results = {
"all": ["全項目 1", "全項目 2"],
"category1": ["カテゴリー 1 項目 1", "カテゴリー 1 項目 2"],
"category2": ["カテゴリー 2 項目 1", "カテゴリー 2 項目 2"],
}
return JsonResponse({"results": results.get(category, [])})
今回を締めくくって
今回の編ではHTMXの高度な機能を通じてDjangoとの統合をさらに拡張する方法を学びました。
次の編は 最後の編として、 サーバーとクライアント間の応答処理ノウハウを中心に実践的な開発のヒントや最適化策を扱う予定です。ご期待ください！ 😊
Add a New Comment