074. Show/Scroll（フォーカス制御：更新後の「視点」を魔法のように操る）

原理：ユーザーの「目」を迷わせない

画面が変わったとき、どこを見るべきか？

HTMXで画面の一部が新しくなったとき、大きな問題が起きることがあります。例えば、「ページの下の方にあるボタンを押して情報を読み込んだのに、ブラウザの表示位置（スクロール）が勝手にページの一番上に戻ってしまった！」これでは、ユーザーはせっかく読み込んだ情報を探して、また下までスクロールし直さなければなりません。

hx-swap の中には、「更新したあと、画面のどこを表示して、どこにスクロールさせるか」を細かく指示する便利なオプションがあります。それが show と scroll です。

実践：更新した場所を「見せて」あげる

1. 更新した場所へ自動スクロール（scroll:top）

「もっと見る」ボタンで新しい情報を足した時、その足された場所へスルスルと画面を移動させる例です。

<!-- 
  hx-swap: beforeend (末尾に足す)
  show:top : 更新が終わったら、その要素の「一番上」が見えるようにスクロールする
-->
<button hx-get="/api/more" 
        hx-target="#list" 
        hx-swap="beforeend show:top">
    さらに読み込む
</button>

2. ウィンドウの一番上へ戻す（window:top）

逆に、ページを切り替えたような大きな更新のときは、ページの一番上にパッと戻ってほしいものです。

<button hx-get="/api/new-page" 
        hx-target="#main" 
        hx-swap="innerHTML scroll:window:top">
    新着ニュース（TOPへ戻る）
</button>

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

期待する動きを考える: 「ユーザーは、今の場所で留まりたい？それとも新しい場所を見てほしい？」
指示の追加: hx-swap の値（innerHTMLなど）のあとに、スペースを空けて show:top や scroll:bottom などを書き添えます。
セレクタの指定（上級）: show:#header:top のように書くと、特定の「別な場所」を見せることも可能です。

比較：scroll vs show

scroll

意味: 指定した要素の「中身」をスクロールさせます。
用途: 長いチャットログの「一番下」を常に見せたい時などに便利。

show

意味: 指定した要素が「見える位置」まで、ブラウザ全体をスクロールさせます。
用途: 読み込んだコンテンツが画面外にある時に、そこまでユーザーを連れて行ってあげたい時に便利。

指定例	意味
`show:top`	更新された要素の頭が見える位置までスクロール。
`show:bottom`	更新された要素の尻尾が見える位置までスクロール。
`scroll:top`	ページ全体（または親）を一番上にスクロール。

まとめ：初心者のための「おもてなし」の視点

show と scroll を使いこなすと、あなたのWebアプリは「ユーザーの視線を優しくエスコートする」親切なガイドへと変わります。

「迷子」を作らない: 画面が書き換わったあとにユーザーが「あれ、どこに行った？」と探す時間は、UX（ユーザー体験）における最大のストレスです。それを先回りして解決しましょう。
滑らかな移動: CSSに scroll-behavior: smooth; を一行書いておくと、これらの指示で画面が動くときに、パッと飛ぶのではなく「スルスルッ」と気持ちよく動くようになります。
デフォルトの大切さ: 何もしないと「今の位置を維持」しようとします。それが正しい場面も多いので、ここぞという時にだけこの指示を使いましょう。

視線の先までデザインする。show と scroll を使って、情報の更新だけでなく「情報の発見」までをスムーズに導いてください。次の記事では、更新の瞬間にわざと「待ち時間」を作るテクニック「Swap Timing」（075. Swap Timing）をご紹介します。