108. Optimistic Updates（楽観的更新：成功を「信じて」先に進む、究極の高速化）
原理：未来をハッピーに予測する
サーバーを待たないという勇気
現代のインターネットは速いとはいえ、ボタンを押してからサーバーが「OK」と返してくるまでには、どうしてもわずかな時間がかかります。この「待ち時間」がユーザーの満足度を下げる原因になります。
「楽観的更新（Optimistic Updates）」は、文字通り楽観的（ポジティブ）な考え方です。 「どうせ通信は成功するはずだ！それなら、サーバーからの返事を待たずに、今すぐに画面を『成功した後の見た目』に変えてしまおう」という手法です。
もし万が一失敗したら、その時だけ「ごめん、失敗したから元に戻すね」と謝ればいい……そんな潔い設計が、アプリを圧倒的に「サクサク」と感じさせます。
実践：「即レス」の感動を作る
1. 「いいね！」ボタンの即時点灯
「いいね」を押した瞬間、サーバーに届く前にハートを赤くしてしまう例です。
<!--
hx-on:click:
通信が始まる「瞬間」に、JavaScriptで見た目を変えてしまいます。
-->
<button id="like-btn"
hx-post="/api/like"
hx-on:click="this.classList.add('is-active')">
<i class="heart-icon"></i>
</button>
2. もし失敗したら？（ロールバック）
通信がエラーになった時は、HTMXのイベント（099.解説）を使って、赤くしたハートを元の色にそっと戻します。
3. ステップ・バイ・ステップ解説
- 「成功」の姿をイメージ: 「いいね」なら「赤くなる」、「削除」なら「薄くなる」といった見た目をCSSで作っておきます。
- 先行してクラスを付ける:
hx-on:clickなどを使って、通信が完了する前にそのCSSクラスを要素に付加します。 - 結果で上書き: 通信が終わればサーバーから「本当の最終結果のHTML」が届くので、それによって画面は整合性のとれた状態に自然と落ち着きます。
比較：慎重な更新 vs 楽観的な更新
慎重な更新（デフォルト）
- 流れ: クリック → ぐるぐる（待機） → 成功！ → 画面変化。
- 感覚: 「確実だけど、一瞬の間がある」。
楽観的な更新
- 流れ: クリック → 即座に画面変化 → 裏で通信。
- 感覚: 「爆速！一瞬も待たされない」。
まとめ：初心者のための「ハッピー」な設計
楽観的更新は、あなたのWebアプリを「ただの良いサイト」から「一流のプロフェッショナルなツール」へと進化させます。
- 成功率 99% の場所で使う: ほとんど失敗しないことがわかっている「いいね」や「チェックボックス」などに最適です。
- 「Undo」との合わせ技: この楽観的更新と、後ほど学ぶ Undo（取り消し）機能を組み合わせれば、ユーザーは一瞬の迷いもなく作業を進められるようになります。
- 視覚のトリック: 実際には通信に1秒かかっていても、画面が1ミリ秒で変われば、ユーザーは「このアプリは神速だ」と信じてくれます。
未来を先取りし、感動を作る。楽観的更新という少し大胆な魔法を使って、通信の壁を感じさせない、最高にダイナミックなユーザー体験を提供してください。次の記事では、操作をさらに自在に操る「取り消し・やり直し（109. Undo/Redo）」をご紹介します。