preventDefault

preventDefault() は、ブラウザが自動的に行う動作（デフォルト動作）をキャンセルするためのメソッドです。

個人情報を入力するフォームを例に説明します。

preventDefault()がないフォームでデータを送信してみると...

名前に何も入力しないで「送信」ボタンを押すと、エラーメッセージを表示するフォームを作りました。

以下のフォームで、名前を空のまま「送信」ボタンを押してみてください。

バリデーションのメッセージが一瞬だけ表示されて、すぐに消えてしまうのを確認できましたか？

これは「フォームの送信ボタンが押されたらページを再読み込みする」というブラウザのデフォルト動作が働いているためです。
JavaScriptがチェック処理を行っても、ブラウザがページを再読み込みしてしまうので、結果が消えてしまいます。

ブラウザのデフォルト動作とは

ブラウザは、ユーザーの特定の操作に対してあらかじめ決められた動作を行います。これを 「デフォルト動作」 と呼びます。

これらはJavaScriptを書かなくてもブラウザが自動的に行います。

さきほどのフォームでは、「フォームの送信ボタンを押す → ページが再読み込みされる」というデフォルト動作のせいで、JavaScriptの処理結果が消えていたのです。

preventDefaultで解決しよう

event.preventDefault() を1行追加するだけで、このデフォルト動作をキャンセルできます。

さっきと同じフォームに preventDefault() を追加しました。
名前を空のまま「送信」してみてください。今度はメッセージが消えずに残ります。

変わったのは event.preventDefault(); の1行だけです。

この1行で「ページを再読み込みする」というブラウザのデフォルト動作がキャンセルされ、自分で書いたJavaScriptの処理だけが実行されるようになりました。

コードの解説

form.addEventListener('submit', (event) => {
  event.preventDefault(); // デフォルト動作をキャンセル
  // ...この先の処理が安全に実行される
});

ポイントは event の部分です。

イベントが発火すると、ブラウザは「何が起きたか」の情報をイベントオブジェクトとして渡してくれます。
addEventListener の関数の引数（ここでは event）で受け取れます。

このイベントオブジェクトが持っている preventDefault() メソッドを呼ぶと、デフォルト動作がキャンセルされます。

まとめ