109. Undo/Redo（操作の取り消し・やり直し：時間を巻き戻す「魔法の杖」を渡す）
原理：過ちを許す優しさ
「間違えた！」を「なかったこと」に
Webアプリで一番怖いのは、「やってしまった操作が元に戻せないこと」です。 大事なファイルを消したり、変な名前で保存してしまったり……。 そんなとき、「Ctrl + Z（Macなら Cmd + Z）」で時間を巻き戻すことができれば、ユーザーはどれほど救われるでしょうか。
「Undo（取り消し）/ Redo（やり直し）」は、ユーザーが行ったアクションを履歴として記録しておき、必要に応じて過去の状態に戻したり、また未来（現在）へ進めたりする機能です。
HTMXは、この「過去の自分（HTML）」をサーバーからもう一度受け取るだけで済むため、高度な Undo 機能を非常にシンプルに実装できます。
実践：時間を操るインターフェースの構築
1. 「一時保存」と「取り消し」ボタン
何かを変更した直後に、画面の上の方に「取り消す」という案内を出す例です。
<!-- 保存直後のサーバーからのレスポンス -->
<div id="undo-toolbar" hx-swap-oob="true">
<span>変更を保存しました。</span>
<!--
ここでのポイントは、現在のデータを「保存前の古いデータ」に
書き換えるリクエストを呼び出すことです。
-->
<button hx-post="/api/undo/last-action" hx-target="#main-content">
取り消す
</button>
</div>
2. 本物の Undo（履歴管理）
サーバー側で「以前の状態（HTMLの断片）」を履歴として保存しておけば、ユーザーが「Undo」を押すたびに、一個前の状態のHTMLを返して、画面を過去へ過去へと戻していくことができます。
3. ステップ・バイ・ステップ解説
- アクションの記録: ユーザーが何かを変えるたびに、サーバー側で「古いデータ」をどこかに控えておきます。
- Undoボタンの提供: 操作が完了した直後に、その「控え」を使って元に戻すためのボタンを画面に出します。
- 現状復旧: Undoが押されたら、サーバーは「古い方のHTML」を返して、いま表示されている「新しい方のHTML」を上書きします。
比較：確認ダイアログ（091.） vs Undo
確認ダイアログ (Are you sure?)
- 性格: 「実行を止める」ブレーキ。
- 体験: 作業が中断される。安全重視。
Undo (取り消し)
- 性格: 「実行のあとに道を用意する」セーフティネット。
- 体験: 作業を止めない！失敗してもOKという「全能感」が生まれる。
まとめ：初心者のための「自由」の設計
Undo/Redo 機能を備えたアプリは、単なるWebツールを超えて、ユーザーが安心して試行錯誤できる「クリエイティブな仕事場」へと昇華します。
- 「削除」は「非表示」から: 本当にデータを消してしまうと Undo が大変です。「削除ボタン」を押されたら、まずは「画面から消して、フラグを立てる」だけに留めておけば、戻すのがとても簡単になります。
- 通知は控えめに: Undo リンクは、作業の邪魔にならないすみっこに、そっと置いてあげましょう。
- 魔法の鍵: 「いつでも戻れる」という確信があれば、ユーザーはもっと積極的にあなたのアプリを使いこなしてくれるようになります。
時間を自在に、体験を軽やかに。Undo/Redo という魔法の杖をユーザーに渡して、失敗を恐れずに突き進める、自由で力強い操作環境を作り上げてください。第5章の最後を飾るのは、すべての人に優しいWebへの入り口「アクセシビリティ（110. Accessibility）」です。