デフォルト動作とは？
HTML要素には、それぞれ特定の操作に対して「デフォルト動作」が設定されています。例えば、リンク（aタグ）をクリックすると新しいページに移動したり、フォームを送信するとページがリロードされたりします。
JavaScriptを使うと、こうしたデフォルト動作をキャンセルして、カスタムの処理を実行することができます。このために使われるのがpreventDefaultメソッドです。
preventDefaultメソッドとは？
preventDefaultメソッドは、イベントが持つデフォルトの動作をキャンセルするためのメソッドです。例えば、リンクをクリックしてもページ遷移が起きないようにしたり、フォームを送信してもページのリロードを防ぐことができます。
preventDefaultの基本的な使い方
以下の例では、リンクのデフォルトの動作をキャンセルし、代わりにカスタムのアラートを表示しています。
const link = document.querySelector("a");
link.addEventListener("click", function(event) {
event.preventDefault(); // リンクのデフォルト動作をキャンセル
alert("リンクがクリックされましたが、ページ遷移しません。");
});
この例では、preventDefaultによって、リンクがクリックされても新しいページに遷移しません。代わりにアラートが表示されます。
主なデフォルト動作の例
HTML要素には、さまざまなデフォルト動作が設定されています。以下にいくつかの代表的な例を示します。
| 要素 | デフォルト動作 |
|---|---|
aタグ（リンク） |
リンク先のページに移動 |
formタグ（フォーム） |
フォームを送信し、ページをリロード |
inputタグのtype=”submit” |
フォームの送信とページリロード |
inputタグのtype=”checkbox” |
チェック状態を変更 |
フォーム送信のデフォルト動作をキャンセルする例
以下の例では、フォームの送信ボタンが押されたときにデフォルトのフォーム送信動作をキャンセルし、代わりにカスタムの処理を実行しています。
const form = document.querySelector("form");
form.addEventListener("submit", function(event) {
event.preventDefault(); // フォームのデフォルト動作をキャンセル
alert("フォームが送信されましたが、ページはリロードされません。");
});
この例では、preventDefaultを使用してフォームの送信動作をキャンセルし、アラートを表示しています。
preventDefaultを使う際の注意点
preventDefaultを使うことで、ユーザーが意図した操作を無効にすることができますが、これがユーザーエクスペリエンスに影響を与える場合があります。例えば、すべてのリンクやフォーム送信を無効にしてしまうと、ユーザーがページをナビゲートできなくなる可能性があります。
preventDefaultの適切な使い方
デフォルト動作をキャンセルする場合は、必要な箇所に限定して使用し、ユーザーにとっての利便性を考慮した設計が重要です。以下のような場合に、preventDefaultを活用すると良いでしょう。
- フォームの送信をAJAXで非同期的に行いたい場合
- リンクをクリックしてもページ遷移させたくない場合
- 特定の操作に対して、カスタムの処理を優先したい場合
まとめ
JavaScriptのpreventDefaultメソッドを使用することで、ブラウザのデフォルトの動作をキャンセルし、カスタムの処理を実装することが可能です。特に、フォーム送信の制御やリンクの挙動変更など、インタラクティブなUIを作成する際に役立ちます。しかし、preventDefaultは適切なタイミングで使用し、ユーザーエクスペリエンスに悪影響を与えないようにすることが重要です。