075. Swap Timing（更新タイミングの調整：早すぎず、遅すぎない「絶妙な間」を作る）
原理：一瞬の「余韻」がアプリを高級にする
早すぎて見逃す、という贅沢な悩み
HTMXの通信は、驚くほど速いです。ボタンを押した瞬間に、パッと画面が切り替わります。 しかし、人間の目はあまりに速い変化にはついていけません。 - 「保存」を押したのに、一瞬で完了してしまい「本当に保存されたか不安」になる。 - 画面がパッと切り替わりすぎて、何が変わったのか把握できない。
「Swap Timing（スワップ・タイミング）」は、「通信が終わってから、実際に画面を書き換えるまでの待ち時間」を調整するための魔法の設定です。あえて少しだけ（例えば0.5秒）遅らせることで、ユーザーに「今、処理が行われたんだな」という実感と、心地よいリズムを与えることができます。
実践：アニメーションのための「溜め」を作る
1. 入れ替えをあえて0.5秒待つ（swap:500ms）
通信が終わったあと、すぐに中身を変えずにちょっとだけ待つ例です。この間にCSSで「消えゆくアニメーション（フェードアウト）」を完結させることができます。
<!--
hx-swap: innerHTML (内側入れ替え)
swap:500ms : サーバーから返事が届いてから、実際に画面を変えるまで 500ms 待つ。
-->
<div hx-get="/api/new-stats"
hx-target="#stats"
hx-swap="innerHTML swap:500ms">
更新ボタン
</div>
2. 消去（delete）の時の余韻
要素を消すときにパッと消すと「バグかな？」と思うことがありますが、少し時間を稼ぐことで「フワッと消える」演出が可能になります。
<div class="card" id="card-1">
<button hx-delete="/card/1"
hx-target="#card-1"
hx-swap="delete swap:1s">
削除
</button>
</div>
3. ステップ・バイ・ステップ解説
- 目的の明確化: 「アニメーションを最後まで見せたい」のか、「処理している実感を与えたい」のかを決めます。
- 時間の指定:
hx-swapの中でswap:300msのように時間を指定します。 - CSSの準備:
htmx-swappingという特別な名前のクラス（087.解説予定）を使って、待っている間のアニメーションを書きます。
比較：0秒（デフォルト） vs Swap遅延
0秒（標準）
- 感覚: 「爆速」「即時」。
- 適した場所: 文字の入力補完、タブの切り替えなど、スピードが命の場所。
500ms〜1sの遅延
- 感覚: 「丁寧」「高級」「滑らか」。
- 適した場所: データの削除、保存完了、削除、リストへの追加。
まとめ：初心者のための「リズム」の調整法
swap のタイミングを操ることは、あなたのWebアプリに「呼吸」をさせるようなものです。
- 時間は短めに:
1s（1秒）は意外と長いです。まずは200msや500msあたりの、人間が「おっ、滑らかだな」と感じる一瞬の時間を狙いましょう。 - 高級感は「間」から生まれる: 何でもかんでも速ければ良いわけではありません。あえて「待たせる」ことが、ユーザーの安心感に繋がることがあります。
- アニメーションへのパス: この属性は、単体で使うよりも、後の章で学ぶ「CSSアニメーション」と組み合わせることで、100倍の効果を発揮します。
速さを制御し、心地よさに変える。swap のタイミングを自由に操って、機械的ではない、人間に寄り添った優しいWebアプリをプロデュースしてください。次の記事では、さらにその先、更新したあとの「落ち着き」を待つ「Settle Timing」（076. Settle Timing）をご紹介します。