086. hx-preserve（要素の完全保護：更新の嵐の中でも「自分」を失わない）

原理：上書き禁止の「聖域」を作る

すべてを書き換えたくない時がある

HTMXの「部分更新」は非常に便利ですが、たまに困ったことが起きます。「大きなエリア（例えば #main）を丸ごとサーバーからのHTMLで書き換えたいけれど、その中にある『動画再生プレイヤー』や『地図』、あるいは『入力中のテキストエリア』だけは、今の状態を維持したまま、絶対に上書きしないでほしい！」

本来なら、親要素が書き換わるとその中の子要素もすべて消えて新しくなります。しかし、hx-preserve（エイチエックス・プリザーブ：保存）という魔法の属性を付けておくと、HTMXは「親が書き換わっても、この要素だけは今の場所から一時的に避難させ、更新が終わったあとに元の位置へピタッと戻す」という驚くべき離れ業をやってのけます。

実践：動的なページで「状態」を守り抜く

1. 動画プレイヤーの再生を止めない

ページの内容（記事など）を切り替えても、サイドバーで流している動画だけは止まらずに再生し続けたい例です。

<aside id="sidebar">
    <!-- 
      hx-preserve: これが付いていると、#sidebar が更新されても中身が維持されます。
      ※ id が必須です！
    -->
    <video id="global-player" controls hx-preserve>
        <source src="movie.mp4" type="video/mp4">
    </video>

    <div id="sidebar-content">
        <!-- ここは普通に書き換わります -->
    </div>
</aside>

<button hx-get="/api/sidebar/next" hx-target="#sidebar">
    サイドバーを更新（動画は止まりません）
</button>

2. ルール：必ず「ID」を付けること

hx-preserve を使うための絶対条件は、その要素にユニークな id が付いていることです。HTMXはこのIDを目印にして、「避難」と「帰還」を行います。

3. ステップ・バイ・ステップ解説

守りたい要素を特定: 動画、オーディオ、地図（Google Maps）、iframe、エディタなど、上書きされると困るものを選びます。
属性とIDを付記: hx-preserve と、固有の id="..." を書き込みます。
サーバーの応答: サーバーが返す新しいHTMLの中にも、同じ id を持つ空の（またはダミーの）タグを入れておきます。HTMXはそれを見つけると、避難させていた本物の要素をそこに流し込みます。

比較：そのまま更新 vs hx-preserve

そのまま更新

結果: 要素が一度消えて、新しい要素が作られる。
影響: 動画は停止し、最初から再生。入力中の文字は消える。地図のズーム位置もリセット。

hx-preserve 使用時

結果: 要素が物理的に「維持」される。
影響: 動画は流れたまま。カーソルの位置も変わらない。外部ライブラリ（地図など）の動作も継続。

まとめ：初心者のための「聖域」の作り方

hx-preserve は、広範囲のダイナミックな更新と、繊細なユーザー状態の維持を両立させるための、最後の切り札です。

「高価」な要素を守る: 地図や動画など、一度読み込むのに時間がかかる要素や、動かしている最中の要素には積極的に使いましょう。
ID設計の重要性: OOB更新と同様、ここでもIDが命綱です。hx-preserve 用のIDは、ページ内で絶対に重複しない特別な名前を付けてあげましょう。
見た目の連続性: 「裏側でHTMLがドラスティックに入れ替わっているのに、大事なところだけは平然と動き続けている」。このギャップが、ハイエンドなWebアプリの感触を生み出します。

嵐の中でも、変わらない場所を。hx-preserve を使って、ダイナミックな変化と安定したユーザー体験が同居する、強くて優しいUIを構築してください。次の記事からは、更新の瞬間に「彩り」を添える「アニメーション基礎（087. Transitions）」の世界へ進みます。