【JS】event.preventDefault()の使い方を解説

2024年4月19日2024年10月3日

この記事にはPRが含まれます。

JavaScriptのコードで、event.preventDefault()というのを見たことはありますか？

見たことあるけど意味よくわかってない

という方もいらっしゃると思うので、

この記事では、プログラミング初心者向けにevent.preventDefault()の使い方を、

実際のサンプルコードとともに分かりやすく解説します。

1. event.preventDefault()とは

event.preventDefault()は、ブラウザがイベントに対して通常行うデフォルトの動作をキャンセルするために使用されるJavaScriptのメソッドです。

例えば、フォームの送信、リンクのフォローなど、ブラウザにプリセットされている動作を防ぎたい場合に利用します。

もっと簡単にいえば、ブラウザが普段自動でやってしまうことを止めることができます。

例えば、誤って「送信」ボタンを押したときに、本当に送る前に止めたい場合に役立ちます。

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // ここにフォーム送信時のカスタム動作を記述します
});

2. 何をするのか？

event.preventDefault()は、イベントが引き起こすデフォルトの動作を「ストップ！」といって停止できます。

これにより、開発者は例えばユーザーが何かをクリックしたときに自分の決めた特別な反応をさせることができます。

具体的には、formのsubmitで画面がリロードされることを停止できたりします。

3. どういう時に使う？

event.preventDefault()は以下のような場合に便利です：

フォーム送信を制御する時：フォームの内容送信時、画面リロードをさせたくない場合。
リンクのデフォルト動作をキャンセルする時：例えば、リンクをクリックしたら、普通にページを移動する代わりに、別な動作をさせたい場合。
コンテキストメニューのカスタマイズ：特定の場所で右クリックしたときに、普通のメニューではなく、特別なメニューを表示させたい場合。

サンプルコード（リンクのデフォルト動作をキャンセル）

下記のようにすれば、通常のリンクを阻止し、カスタムした別のアクションを設定できます。

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  // ここにカスタム動作を記述
});

4. フォームが持つデフォルトの動作ってなに？

フォームを例えにデフォルトの動作がどんなものか説明してみましょう。

フォームが持つデフォルトの動作とは、主にフォームのデータをサーバーに送信してページをリロードすることです。

フォームに入力して「送信」ボタンを押すと、普通はその情報がサーバーに送られて、ページが新しく読み込まれます。

これは、例えば書いた手紙をポストに入れると、自動的に郵便局に届くようなものです。

event.preventDefault()を使うと、このデフォルト動作を止めて、手紙をポストに入れる前に

ポストが「本当にいいのか？」と聞いてくるようにしよう、というカスタムもできる、みたいな感じです。

サンプルコード（フォームのデフォルト動作を防ぐ）

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  // 確認画面を出すコードをここに書く
});

5. event.preventDefault()を呼び出すとどうなるのか？

event.preventDefault()を呼び出すと、イベントのデフォルト動作がキャンセルされます。

これにより、開発者はユーザーからの入力やアクションに基づいてカスタマイズされた反応やデータ処理を自由に行うことができます。

つまり、ブラウザが自動で行おうとする動作を止めることができるので、

プログラムを作る人は、もっと自由に、ユーザーの動作に合わせた特別な処理を書くことができます。

6. JavaScript(React)でのメリット

例えでReactでの活用例を紹介します。

Reactでは、フォームやボタンクリックイベントの管理にevent.preventDefault()を使用することが結構一般的です。

Reactは、ユーザーの操作に応じて画面の一部だけを更新する「差分レンダリング」という技術を使っているのですが、

通常のフォーム送信はページを再読み込みしてしまうため、Reactのこの利点が生かせません。

event.preventDefault()を使うと、フォームの送信によるページの全体リロードを防ぎ、Reactが得意とする部分的な更新を効果的に行うことができるわけです。

そのため、event.preventDefault()は積極的に活用されていて、ユーザー体験を向上させ、アプリケーションのパフォーマンスを保つことが可能です。

サンプルコード（Reactでの使用例）

function App() {
  const handleSubmit = (event) => {
    event.preventDefault();
    // フォームデータを使った処理
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

このサンプルコードでは、event.preventDefault()を呼び出すことでフォームの送信がブラウザによって自動で行われるのを防いでいます。

このようにすることで、フォームやボタン、リンククリック時などのデフォルト動作を止めて、任意のカスタマイズができるわけです。

event.preventDefault()はフロントエンド技術の中でよく出てくるので必ず覚えておきましょう！