htmx は何をしますか?
HTMX開発ガイドライン。最小限のJavaScriptでHTML属性を使って動的なWebアプリケーションを構築します。
目的
このガイドラインは、開発者がHTMXを使用して、以下のような利点を享受しながらアプリケーションを構築できるようにすることを目的としています。
- JavaScriptの記述量を最小限に抑える
- サーバーサイドのロジックを活用した動的なUI更新
- HTML中心のシンプルなコード構造
主な機能
- hx-get: 要素をクリックしたときに指定されたURLにGETリクエストを送信
- hx-post: フォーム送信などでPOSTリクエストを使用
- hx-trigger: トリガー条件をカスタマイズ
- hx-target: レスポンスの描画先を指定
- hx-swap: レスポンスの挿入方法を制御
使用例
<button hx-get="/api/data" hx-target="#result">
データを取得
</button>
<div id="result"></div>
注意点
- サーバーサイドは適切なレスポンスを返す必要があります(HTMLフラグメント)
- イベントの重複や予期しない動作を避けるため、トリガー条件は明確に設定してください
- 大量のリクエストが発生しないよう、レート制限やデバウンスを考慮してください