この記事の目次 開く・閉じる
今回の仕上がり
「ゲームの音の記事」を削除して2件にし、「直前の削除を取り消す」で3件に戻しました。復元した記事は元の2番目に入りました。画面で操作する仮データだけが対象で、みっけメディアの記事やサーバーのデータを削除した実験ではありません。
こちらは実際に触れる作例です。 スクリーンショットで操作や音を代用したものではありません。音の作例も自動では鳴りません。
必要なものと操作順
ブラウザだけで試せます。サンプルの3件は仮データで、再読み込みすると初期状態に戻ります。公開中のデータで削除練習をする必要はありません。
- 一覧の3件を確認し、2番目の「ゲームの音の記事」の削除を押す。
- 2件になったことと、削除した名前が結果欄に出たことを確かめる。
- 「直前の削除を取り消す」を押し、同じ内容が元の位置に戻ることを見る。
- 別の2件を続けて削除し、取り消せるのが最後の1件だけであることを試す。
- 「最初の3件へ戻す」で初期状態へ戻す。実際のサイトへ移す前に、どこまで取り消せる仕様かを決める。
仕組みと使いどころ
内容だけでなく、位置も覚える
削除した文章を復元できても、一覧の末尾へ勝手に移ると探し直すことになります。作例は内容と削除前の位置を一緒に持ち、同じ位置へ挿入します。
実際のサービスなら、作品名だけでなく安定したIDで対象を指定します。並べ替えやほかの人の更新がある場合に、位置だけを根拠に復元すると別のデータと混ざるためです。
取り消しの範囲を画面にも書く
この作例が覚えるのは直前の1件です。次の削除で記録を置き換え、再読み込みすると記録も消えます。制限を小さい文字だけに隠さず、ボタン名と説明に書いています。
時間制限を付ける場合は、操作が間に合わない人への配慮も必要です。今回の作例には数秒で消える通知を入れていません。取り消し操作後は一覧内へフォーカスを戻します。
サーバーの削除は別に考える
W3Cのエラー防止に関する資料では、対象となる処理について、取り消せること、検査できること、確定前に確認できることなどを扱っています。全削除操作に同じ見た目を当てはめればよいという話ではありません。
本番の永続データでは、即座に物理削除するのか、一時的に非表示にして復元できる期間を設けるのかを決めます。権限、同期、関連ファイルの扱いも必要です。この画面は、その前に操作を試すための見本です。
コードの要点
// 削除前の内容と位置を記録
deleted = { item: drafts[index], index };
drafts.splice(index, 1);
// 取り消すときは元の位置へ
if (deleted) {
drafts.splice(deleted.index, 0, deleted.item);
deleted = null;
}配列内の仮データを変える抜粋です。サーバーAPIへの削除要求ではありません。ZIPのdemo.jsにはボタンの無効化、結果表示、フォーカス移動も含めています。
自作のHTML・CSS・JavaScript・SVGはCC0です。ZIP内のREADMEと、共通のサンプル利用条件をご確認ください。
できたかの確認とよくあるつまずき
- 真ん中の1件を削除すると3件から2件になる。
- 取り消すと元の順番の3件になり、取り消しボタンが無効になる。
- 連続削除で直前の1件だけ戻り、初期化では3件すべてが戻る。
ここに注意。削除された内容を覚える前に配列から消すと、復元する情報を失います。処理の順番を固定します。
ここに注意。確認ダイアログをなくしてよいかは、操作の影響次第です。課金、共有ファイル、法的な確定などへこの見本をそのまま流用しません。
出典と確認した範囲
作例の確認日：2026年10月3日。個別の条件と未確認範囲は以下の通りです。共通の検証方法も公開しています。
仮データの削除、順番を保つ取り消し、390px幅を確認。サーバー連携、永続保存、複数人の同時編集、完全なデータ復旧は実装していません。
W3C WAI：Error Prevention Legal Financial Data。対象処理の取り消し、確認、検査の考え方。作例だけで適合を証明するものではない。