はじめに
こんにちは、未経験からエンジニア転職を目指しているものです。
オンラインスクールで本格的に学習して4ヶ月目に入りました。勉強し始めの頃の自分が疑問に思っていたことを整理してみようと思い記事を書いております。HTML,CSS,JSを使用しログインフォームを作成した時に、event.preventDefault();を学びました。なぜこの記述が必要なのか疑問に思い、整理してみました。
作成したログインフォーム
まずは作成したログインフォームを紹介いたします。
event.preventDefault(); とは？
event.preventDefault(); は、JavaScriptでイベントが発生したときに、そのデフォルトの動作をキャンセル（防ぐ）ためのメソッドです。
例えば、フォームを送信すると通常ブラウザはそのデータをサーバーに送信し、ページをリロードします。しかし、このデフォルトの動作が必ずしも望ましいとは限りません。event.preventDefault(); を使うことで、このリロード動作を止め、JavaScriptによる独自の処理を実行できます。
なぜ event.preventDefault(); を使うのか？
主に次のような理由で使われます：
1. ページの再読み込みを防ぐ
フォームが送信されると、ページはリロードされます。しかし、再読み込みされると、ユーザーが入力した情報や、JavaScriptで保持している一時的なデータが失われてしまいます。event.preventDefault(); を使うことで、ページの再読み込みを防ぎ、ユーザーの操作をスムーズにできます。
2. カスタム処理を実行する
フォーム送信時に特定の処理（例えば、入力データをサーバーに送信する、バリデーションを行う、ローカルにデータを保存するなど）を行いたい場合、デフォルトの送信動作を防ぐことで、JavaScriptで必要な処理を実行できます。
具体的な例
例1: 通常のフォーム送信
まず、event.preventDefault(); を使わない場合のフォーム送信を見てみます。
<form id="login-form">
<input
type="email"
id="email"
class="storage"
placeholder="name@company.com"
required
/>
<div class="password">password</div>
<input type="password" id="password" class="storage" required />
<button type="submit" class="submit">Sign in</button>
</form>
const loginForm = document.getElementById("login-form");
loginForm.addEventListener("submit", (event) => {
const email = emailInput.value;
const password = passwordInput.value;
console.log("サインイン処理を実行: ", email, password);
});
この場合、フォームが送信されるとページが再読み込みされ、コンソールに結果が表示されない可能性があります。
例2: event.preventDefault(); を使ったフォーム送信
次に、event.preventDefault(); を使ってフォーム送信を見てみます。
<form id="login-form">
<input
type="email"
id="email"
class="storage"
placeholder="name@company.com"
required
/>
<div class="password">password</div>
<input type="password" id="password" class="storage" required />
<button type="submit" class="submit">Sign in</button>
</form>
const loginForm = document.getElementById("login-form");
loginForm.addEventListener("submit", (event) => {
event.preventDefault(); // フォームのデフォルトの送信動作をキャンセル
const email = emailInput.value;
const password = passwordInput.value;
console.log("サインイン処理を実行: ", email, password);
});
このコードでは、フォームが送信されてもページがリロードされることはなく、console.log() によってサインイン処理を実行します。（例：サーバーに送信）
まとめ
event.preventDefault(); は、デフォルトのフォーム送信動作を防ぎ、より柔軟にフォーム送信を処理するために便利なメソッドです。これを活用することで、スムーズなユーザー体験を提供できるだけでなく、フォーム送信時にJavaScriptでカスタム処理を実行することも可能になります。
最後までご覧いただき本当にありがとうございました！！