066. innerHTML（内側の入れ替え：最も標準的な更新スタイル）
原理：箱の中身を入れ替える
「枠」は残して「中身」を新しくする
HTMXにおいて、最もよく使われる更新方法がこの innerHTML（インナー・エイチティーエムエル）です。
画面上の特定の要素（例えば div）を一つの「箱」だと考えてください。innerHTML を使った更新とは、その箱自体（外枠）はそのまま残し、中の荷物（子要素やテキスト）だけをすべて取り出して、新しいHTMLに入れ替えるという操作です。
これは非常に直感的で、かつ安全な方法です。なぜなら、箱に付いている属性（IDやクラス、イベント設定など）は維持されるため、周りのデザインやスクリプトを壊す心配が少ないからです。
実践：コンテンツをスマートに書き換える
1. タブの中身を更新する
タブの切り替えや、情報の詳細表示など、「器」が決まっている場所に内容を流し込む例です。
<!--
hx-target: #content-area を狙い撃ち
hx-swap: innerHTML (デフォルトなので省略可能)
-->
<button hx-get="/api/tab1" hx-target="#content-area" hx-swap="innerHTML">
タブ1を表示
</button>
<div id="content-area" style="border: 1px solid #ccc; padding: 10px;">
<!-- ボタンを押すと、ここ(内側)が書き換わります。div自体は消えません -->
最初に表示されている内容です。
</div>
2. デフォルトの挙動を理解する
HTMXでは、hx-swap を何も指定しなかった場合、自動的に innerHTML が選ばれます。つまり、私たちが普段「ここを更新して！」と思っていることのほとんどは、この innerHTML の仕組みで動いています。
3. ステップ・バイ・ステップ解説
- ターゲットの選定: 中身を書き換えたい要素に
id="aaa"などの名前を付けます。 - 実行: ボタンなどで
hx-target="#aaa"を指定して通信します。 - 結果の確認: サーバーから届いたHTMLが、ターゲットの内側にパッと収まるのを確認します。
比較：innerHTML vs outerHTML（次回予告）
innerHTML（今回）
- 範囲: ターゲットの「内側」だけ。
- メリット: ターゲット自体に設定されたCSSやIDが維持されるので、スタイルが崩れにくい。
outerHTML（次回）
- 範囲: ターゲットの「外側（自分自身）」も含めて全部。
- メリット: ターゲットのタグそのものを別のタグに変えたい時などに便利。
まとめ：初心者のための「器」と「中身」
innerHTML は、HTMX開発における「ホームポジション」です。
- 迷ったらこれ: まずは
innerHTML（または無指定）で始めてみましょう。ほとんどのケースで期待通りの動きになります。 - 親要素の役割: 親要素（ターゲット）に背景色や余白を設定しておけば、中身がどれだけ入れ替わっても、一貫した見た目を保つことができます。
- アニメーションとの相性: 中身が切り替わる瞬間にフワッとさせるCSS（087.解説予定）なども、この
innerHTMLと非常に相性が良いです。
箱はそのままに、中身を常に新しく。innerHTML という基本技をマスターして、安定感のある、心地よい画面更新を実現してください。次の記事では、自分自身を丸ごと入れ替える「outerHTML」（067. outerHTML）をご紹介します。