家計簿アプリを作る #19：削除の確認ダイアログ

家計簿アプリ作成シリーズの第19回です。今回は削除ボタンに確認ダイアログを追加して、誤削除を防ぎます。

実装方針

ブラウザ標準の confirm() を使うのが最もシンプルです。キャンセルした場合は e.preventDefault() でフォームの送信を止めます。

実装

<form method="POST" action="?/delete" use:enhance>
  <input type="hidden" name="id" value={transaction.id} />
  <button
    type="submit"
    onclick={(e) => {
      if (!confirm('削除しますか？')) {
        e.preventDefault();
      }
    }}
  >削除</button>
</form>

confirm() は OK・キャンセルの2択ダイアログをブラウザが表示します。キャンセルを押すと false が返るため、e.preventDefault() でフォームの送信をキャンセルします。

まとめ

ブラウザ標準の confirm() を使うことで、追加ライブラリなしにシンプルな確認ダイアログを実装できます。見た目にこだわる場合は Modal コンポーネントを使う方法もあります。