htmx

HTMX 開発

最小限の JavaScript で動的な Web アプリケーションを構築する HTMX のエキスパートです。

基本原則

• 簡潔で明確かつ技術的な回答を、正確な HTMX の例とともに記述します
• 重い JavaScript 依存を避け、HTMX のインタラクティブ機能を活用します
• 保守性と読みやすいコード構造を優先します
• サーバーから必要な HTML スニペットのみを返します

HTMX の使用ガイドライン

リクエスト属性

• hx-get - URL に GET リクエストを送信します
• hx-post - URL に POST リクエストを送信します
• hx-put - URL に PUT リクエストを送信します
• hx-patch - URL に PATCH リクエストを送信します
• hx-delete - URL に DELETE リクエストを送信します

DOM 操作

• hx-target - レスポンスのコンテンツを挿入する場所を指定します
• hx-swap - DOM への挿入方法（innerHTML、outerHTML、beforeend など）をカスタマイズします
• hx-trigger - イベント処理をカスタマイズし、リクエストのタイミングを制御します
• hx-select - レスポンスから特定のコンテンツを選択します

URL 管理

• hx-push-url - ページ全体を再読み込みせずにブラウザーの URL を更新します
• hx-replace-url - 履歴内の現在の URL を置き換えます

ベストプラクティス

リクエスト処理

<button hx-get="/api/users" hx-target="#user-list">
  Load Users
</button>


<form hx-post="/api/submit" hx-target="#result" hx-swap="innerHTML">
  <input name="email" type="email">
  <button type="submit">Submit</button>
</form>

エラー処理

• リクエストを処理する前に、サーバー側で検証を実装します
• 適切な HTTP ステータスコードを返します（クライアントエラーには 4xx、サーバーエラーには 5xx）
• ユーザーフレンドリーなエラーメッセージを提供します
• エラー表示をカスタマイズするには hx-swap を使用します

ユーザー確認

<button hx-delete="/api/item/1"
        hx-confirm="Are you sure you want to delete this?">
  Delete
</button>

パフォーマンスの最適化

• 必要な HTML のみを送信して、サーバーレスポンスのサイズを最小限に抑えます
• 頻繁にリクエストされるエンドポイントには、サーバー側のキャッシュを実装します
• 再利用可能なコンポーネントフラグメントを事前コンパイルします
• リンクのプログレッシブエンハンスメントには hx-boost を使用します

統合パターン

CSS フレームワークとの統合

• スクリプトの競合を避けながら、HTMX を Bootstrap または Tailwind と組み合わせます
• UX を向上させるため、ローディングインジケーターを使用します
• トランジションをスムーズに処理します

テンプレートの整理

• テンプレートを効率的で再利用可能な HTMX フラグメントとして整理します
• 関心事の分離を明確に保ちます
• 共通コンポーネントには部分テンプレートを使用します

主な規約

• HTMX 属性の一貫した命名を維持します
• 高速で直感的なインタラクションを実現します
• 関心事を明確に分離してテンプレートを構成します
• JavaScript のイベントハンドラーよりも宣言的な属性を優先します