JavaScript: `event.preventDefault()` とは？
最終更新日: 2025年10月4日
JavaScriptでWebページに動きを加える際、`event.preventDefault()` という命令が登場することがあります。これは、HTML要素がもともと持っているデフォルトの動作をキャンセルするための重要なメソッドです。
デフォルトの動作とは？
HTMLの要素には、それぞれブラウザが標準で実行する「デフォルトの動作」が決められています。
- `` タグ：クリックされると、`href`属性で指定されたページに遷移する。
- `クリックされると、フォームのデータを `action`属性で指定されたURLに送信し、ページが再読み込みされる。
- チェックボックス：クリックされると、チェックのオン／オフが切り替わる。
`event.preventDefault()` は、これらの「当たり前の動作」をJavaScriptによって意図的に停止させたい場合に使います。
フォームにおける活用例
フォームで `event.preventDefault()` が最もよく使われるのは、**非同期通信（Ajax）**でデータを送信する場面です。
通常のフォーム送信では、ボタンを押すとページ全体が再読み込みされ、完了ページに遷移します。しかし、ページ遷移なしでフォームを送信し、結果だけをページの一部に表示したい場合があります。このような処理を実装するには、以下のような手順を踏みます。
- JavaScriptで、フォームの送信イベントを監視する。
- 送信ボタンが押されたら、まず `event.preventDefault()` を呼び出し、ページが再読み込みされる**デフォルトの動作をキャンセルする**。
- JavaScriptを使って、フォームのデータを裏側でサーバーに送信する（Ajax）。
- サーバーからの応答を受け取り、画面に「送信が完了しました」といったメッセージを表示する。
まとめ
`event.preventDefault()` は、**「ちょっと待って、いつもの動きはしないで。代わりにこれからJavaScriptで特別な処理をするから」**とブラウザに伝えるための合図です。特に、ページ遷移を伴わないモダンなUIを持つフォームやWebアプリケーションを開発する上で、欠かすことのできない基本的な命令の一つです。
Web制作者向け便利ツール
Myホームページクリエイター
無料で使える高品質なホームページテンプレートを提供。ビジネスサイトやポートフォリオに最適です。
My Logo Creator
登録不要で本格的なロゴを無料作成。Webサイトや名刺に使えるプロ品質のSVG形式にも対応しています。
My Canvas Creator
ブラウザ上で手軽に画像を編集・加工できるツール。SNS投稿やブログのアイキャッチ作成に役立ちます。
Myカラークリエイター
Webデザインに最適な配色が見つかるツール。アクセシビリティ対応のコントラスト比チェック機能も搭載。
My OGPクリエイター
SNSシェア時の美しいプレビューカード(OGPタグ)を、ライブプレビューを見ながら簡単に作成できます。
My Faviconクリエイター
1枚の画像やイニシャルから、あらゆるデバイスに対応したファビコン一式を瞬時に自動生成します。