090. Morphing（モーフィング：最小限の破壊で、滑らかに「変身」させる）

原理：細胞レベルの「書き換え」

壊してから作るか、生かしたまま変えるか

通常のHTMXの更新（Swap）は、たとえるなら「古い家を一度壊して、同じ場所に新しい家を建てる」ような作業です。これでも十分に速いのですが、たまに不都合が生じます。 - 「入力中のフォーカスが外れてしまう」 - 「再生中のビデオが（hx-preserveを使わない限り）止まってしまう」 - 「CSSのアニメーションが途切れてしまう」

「モーフィング（Morphing）」は、「古い家を壊すのではなく、壁紙を張り替え、窓の位置を直し、必要なところだけを細胞レベルで少しずつ書き換えて、新しい家へとシームレスに変身させる」究極の更新技術です。

実践：究極の「滑らかさ」を手に入れる

1. 手法：idiomorph（イディオモーフ）などの利用

HTMX単体ではなく、拡張ライブラリ（idiomorph など）を併用することで、この「モーフィング」という魔法が使えるようになります。

<!-- 
  hx-swap: morph (拡張機能を使用)
-->
<div hx-get="/api/update-profile" hx-swap="morph">
    <!-- 
      ここを更新しても、HTMXは丸ごと入れ替えません。
      前回と今回のHTMLを見比べ、差分だけを賢く適用します。
    -->
    <p>ステータス：更新中...</p>
</div>

2. なぜモーフィングが必要なのか？

例えば、チャットの入力欄のメッセージを送りながら、同時に別の場所にある「入力中...」という文字を消したい場合。モーフィングを使えば、入力欄のカーソル位置（状態）を一切変えずに、テキストの内容だけを「そっと」変えることができます。まさに「細胞レベルの書き換え」です。

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

ライブラリの読み込み: idiomorph などのスクリプトをページに追加します。
設定の変更: hx-swap 属性に morph や morph:innerHTML と指定します。
確認: 画面がパッと切り替わるのではなく、まるで「生きているように」内容だけが滑らかに変化する様子を観察します。

比較：通常のSwap vs モーフィング

通常のSwap (innerHTML)

方法: 消す → 作る。
得手: スピードが最速。サーバー側がどんなHTMLを返しても確実。
不得手: 入力中の状態（フォーカス、スクロール）がリセットされやすい。

モーフィング (Morph)

方法: 前後の差分を見つけて、最小限のパッチを当てる。
得手: 極限まで「状態」を維持できる。アニメーションが途切れない。
不得手: ブラウザの計算コストが少しだけ高い（複雑なHTMLだと時間がかかる）。

まとめ：初心者のための「究極」の選択

モーフィングは、HTMXにおける「最高峰のこだわり」です。

最初から使わなくていい: モーフィングは高度な技術です。まずは通常の innerHTML や outerHTML で開発を進め、どうしても「状態がリセットされて困る」という難しい局面にぶつかった時に、この武器を取り出しましょう。
リッチなアプリの象徴: 画面が一切チカチカせず、中身の数字や文字だけが自然に、かつ完璧に書き換わっていく様子は、ユーザーに「これは凄く出来の良いアプリだ」という確信を与えます。
HTMLが「生きている」感覚: Webページを静かな文書としてではなく、常に形を変え続ける生き物として扱う。モーフィングはその哲学を象徴する機能です。

細胞の一つ一つから、新しく。morph という究極の選択肢を知ることで、あなたのWeb開発のレベルは、また一つ上のステージへと引き上げられました。

おめでとうございます！これで第4章「DOM更新戦略」の全25項目を走破しました。次の第5章（091〜）からは、ユーザーの細かな感触を磨き上げる「UXコントロール（UX Control）」の領域へと足を踏み入れます。