<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.8/dist/htmx.min.js"></script>

npm install htmx.org

<!-- GETリクエスト -->
<div hx-get="/api/items" hx-target="#item-list">一覧を取得</div>

<!-- POSTリクエスト（フォーム送信） -->
<form hx-post="/api/items" hx-target="#item-list">
  <input type="text" name="title">
  <button type="submit">追加</button>
</form>

<!-- aタグでも使える -->
<a hx-get="/api/items/1" hx-target="#detail">詳細を見る</a>

// サーバー側（PHP）はHTMLの断片だけを返す
echo '<p>こんにちは！現在の時刻は ' . date('H:i:s') . ' です。</p>';

<div hx-get="/api/greeting" hx-target="#result">
  クリックであいさつを取得
</div>
<div id="result"></div>

<!-- テーブル行内のボタンから、最も近い親のtrを更新 -->
<button hx-get="/api/row/1" hx-target="closest tr">更新</button>

<!-- 次の兄弟要素の.outputを更新 -->
<div hx-get="/api/data" hx-target="next .output">クリックで取得</div>
<div class="output"></div>

<!-- innerHTML（デフォルト）: #boxの中身だけ入れ替え -->
<div hx-get="/content" hx-target="#box" hx-swap="innerHTML">
  クリックで中身を入れ替え
</div>
<div id="box">ここが置き換わる</div>

<!-- 結果: <div id="box">が残り、中身だけ変わる -->
<!-- <div id="box">（レスポンスのHTML）</div> -->

<!-- outerHTML: #box要素ごと置き換え -->
<div hx-get="/content" hx-target="#box" hx-swap="outerHTML">
  クリックで要素ごと入れ替え
</div>
<div id="box">ここが丸ごと消える</div>

<!-- 結果: <div id="box">自体が消え、レスポンスHTMLに置き換わる -->

<!-- ターゲットの末尾に追加（追加読み込みに最適） -->
<div hx-get="/api/items?page=2" hx-target="#list" hx-swap="beforeend">
  もっと読み込む
</div>

<!-- ターゲットの先頭に追加（新着表示などに） -->
<div hx-get="/api/latest" hx-target="#list" hx-swap="afterbegin">
  新着を取得
</div>

<!-- 入力中にリアルタイム検索（500msの遅延付き） -->
<input type="text" name="q"
       hx-get="/search"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#search-results">

<!-- ページ読み込み時に自動取得 -->
<div hx-get="/notifications"
     hx-trigger="load"
     hx-target="this">
  読み込み中...
</div>

<!-- スクロールで画面内に入ったら取得（無限スクロール向き） -->
<div hx-get="/items?page=2"
     hx-trigger="revealed"
     hx-swap="afterend">
</div>

<!-- 一度だけ発火 -->
<div hx-get="/api/data" hx-trigger="click once">
  一度だけ取得
</div>

<!-- レスポンス全体から#main-contentだけを取り出す -->
<a hx-get="/page/about"
   hx-target="#content"
   hx-select="#main-content">
  Aboutページを読み込む
</a>
<div id="content"></div>

<!-- サーバーのレスポンス（ページ全体） -->
<header>ヘッダー</header>
<div id="main-content">
  <h1>Aboutページ</h1>
  <p>ここだけ使いたい</p>
</div>
<footer>フッター</footer>

<div hx-get="/api/update"
     hx-target="#main"
     hx-select="#main"
     hx-select-oob="#notification">
  更新
</div>

<div id="main">メインコンテンツ</div>
<div id="notification">通知エリア</div>

<div hx-get="/api/data" hx-target="#data-area" hx-indicator="#spinner">
  データ取得
</div>
<span id="spinner" class="htmx-indicator">読み込み中...</span>
<div id="data-area"></div>

.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

document.body.addEventListener('htmx:afterSwap', function(event) {
  // event.detail.target — swapされたターゲット要素
  const target = event.detail.target;

  // ターゲット内のスライダーを初期化
  const sliders = target.querySelectorAll('.slider');
  sliders.forEach(slider => {
    new SomeSliderLibrary(slider);
  });
});

document.body.addEventListener('htmx:afterSettle', function(event) {
  const target = event.detail.target;

  // レイアウトが確定した後に高さ計算やアニメーションを実行
  const newItems = target.querySelectorAll('.fade-in');
  newItems.forEach(item => {
    item.classList.add('is-visible');
  });
});

<div hx-get="/api/content"
     hx-target="this"
     hx-on:htmx:after-swap="console.log('swap完了:', this)">
  コンテンツ
</div>

document.body.addEventListener('htmx:load', function(event) {
  // event.detail.elt — 新しく読み込まれた要素
  const newElement = event.detail.elt;

  // 新しく追加されたツールチップを初期化
  const tooltips = newElement.querySelectorAll('[data-tooltip]');
  tooltips.forEach(el => initTooltip(el));
});

<!-- ❌ CLS悪化の原因になりやすい -->
<div hx-get="/api/sidebar-banner"
     hx-trigger="load"
     hx-target="this">
</div>
<!-- ↓ この下のコンテンツが押し下げられる -->
<main>メインコンテンツ</main>

<!-- ✅ min-heightで領域を事前確保 -->
<div hx-get="/api/sidebar-banner"
     hx-trigger="load"
     hx-target="this"
     style="min-height: 250px;">
</div>

<div hx-get="/api/card-list"
     hx-trigger="load"
     hx-target="this">
  <!-- スケルトン（読み込み後にhtmxが中身を差し替える） -->
  <div class="skeleton" style="height: 200px; background: #e0e0e0; border-radius: 8px;"></div>
</div>

<!-- 画面に表示されたタイミングで取得 -->
<div hx-get="/api/recommendations"
     hx-trigger="revealed"
     hx-target="this"
     style="min-height: 300px;">
</div>