Day18 後半のゴール
後半では、前半で学んだ「input.value を読む」を、
もう一段“実戦レベル”に引き上げます。
フォーム全体（form 要素）と submit イベント、
Enter キーでの送信、
ページ遷移を止める preventDefault、
そして「ちゃんと入力されているか」をチェックする流れをつかむのがゴールです。
Day18 後半でつかみたい感覚
「ボタンのクリック」だけでなく「フォーム送信」という単位で考える
submit イベントを使うと Enter キーも一緒に扱える
preventDefault で「ブラウザのデフォルト動作を止めて、自分の処理に切り替える」
form 要素と submit イベント
form は「入力のまとまり」
まず、form 要素を使った基本形から見ていきます。
<form id="userForm">
<input id="nameInput" type="text" placeholder="名前">
<button type="submit">送信</button>
</form>
<p id="result"></p>
ここで大事なのは、button の type が “submit” になっていることです。
type=”submit” のボタンが押されると、「フォーム送信」というイベントが発生します。
JavaScript では、この「フォーム送信」を submit イベントとして扱えます。
const userFormElement = document.getElementById("userForm");
const nameInputElement = document.getElementById("nameInput");
const resultElement = document.getElementById("result");
userFormElement.addEventListener("submit", (event) => {
const name = nameInputElement.value;
resultElement.textContent = `こんにちは、${name} さん`;
});
ここで一つ問題があります。
このままだと、フォーム送信のあとにページがリロードされてしまいます。
preventDefault でページ遷移を止める
ブラウザの「標準の動き」を止める
フォームの submit は、本来「サーバーにデータを送ってページを切り替える」ための仕組みです。
でも、今は「ページ遷移せずに、JavaScript で処理したい」わけですよね。
そこで使うのが event.preventDefault() です。
userFormElement.addEventListener("submit", (event) => {
event.preventDefault();
const name = nameInputElement.value;
resultElement.textContent = `こんにちは、${name} さん`;
});
event.preventDefault() は、
「このイベントに対するブラウザの標準動作を止める」という意味です。
フォーム送信の場合、
「サーバーに送信してページを再読み込みする」という標準動作が止まり、
代わりに自分の JavaScript の処理だけが実行されます。
ここはフォーム操作の超重要ポイントなので、
「submit イベントを使うときは、まず preventDefault を書く」と覚えてしまって構いません。
Enter キーでも送信できるようになる
ボタンクリックと Enter を同じ扱いにする
submit イベントを使うメリットはもう一つあります。
それは「Enter キーでの送信も自動で拾える」ことです。
さきほどの form を使った例では、
input にフォーカスがある状態で Enter キーを押すと、
ボタンを押さなくても submit イベントが発生します。
つまり、ユーザーから見るとこうです。
ボタンをクリックしても送信できる
Enter キーでも送信できる
でも JavaScript 側は、
「どちらも同じ submit イベントとして処理する」だけで済みます。
userFormElement.addEventListener("submit", (event) => {
event.preventDefault();
const name = nameInputElement.value.trim();
if (name === "") {
resultElement.textContent = "名前を入力してください。";
return;
}
resultElement.textContent = `こんにちは、${name} さん`;
});
クリックか Enter かを意識せず、
「フォームが送信された」という単位で考えられるようになるのが、
submit イベントの強みです。
複数 input を持つフォームの処理
名前とメールアドレスを同時に扱う
次は、複数の input を持つフォームを submit で処理してみます。
<form id="contactForm">
<p>
名前：<input id="nameInput" type="text">
</p>
<p>
メール：<input id="emailInput" type="email">
</p>
<button type="submit">送信</button>
</form>
<p id="result"></p>
JavaScript はこう書けます。
const contactFormElement = document.getElementById("contactForm");
const nameInputElement = document.getElementById("nameInput");
const emailInputElement = document.getElementById("emailInput");
const resultElement = document.getElementById("result");
contactFormElement.addEventListener("submit", (event) => {
event.preventDefault();
const name = nameInputElement.value.trim();
const email = emailInputElement.value.trim();
if (name === "" || email === "") {
resultElement.textContent = "名前とメールアドレスを入力してください。";
return;
}
resultElement.textContent = `送信内容：${name} さん（${email}）`;
});
ここでもやっていることはシンプルです。
フォームの submit イベントを受け取る
preventDefault でページ遷移を止める
各 input の value を読み取る
空チェックをする
結果を textContent で表示する
このパターンを何度も書くと、
「フォーム処理ってこういう流れだよね」という感覚が自然に身についてきます。
ボタンクリックと submit の違いを整理する
どちらを使うべきか
Day17 では、button に直接 click イベントを付けていました。
button.addEventListener("click", () => {
// 処理
});
Day18 後半では、form に submit イベントを付けています。
form.addEventListener("submit", (event) => {
event.preventDefault();
// 処理
});
どちらも「ユーザーの操作をきっかけに処理を実行する」点では同じですが、
フォームの場合は submit を使うほうが自然です。
理由は二つあります。
一つ目は、Enter キーも自動で拾えること。
二つ目は、「フォーム送信」という意味が HTML 的にも正しいこと。
フォームを扱うときは、
「ボタンに click ではなく、フォームに submit」
という設計を基本形として覚えておくと良いです。
セキュリティとバリデーションの入り口
入力値を信用しない、という姿勢
Day18 の段階では、まだサーバーとは通信していませんが、
フォーム入力はセキュリティの入り口でもあります。
ここで意識しておきたいのは、
「ユーザーの入力値は、基本的に信用しない」という姿勢です。
具体的にはこうです。
空文字やスペースだけの入力は弾く
想定外に長すぎる文字列は警戒する（実務ではサーバー側で制限）
画面に表示するときは textContent を使う
たとえば、次のようなコードは避けるべきです。
// 危険な例
resultElement.innerHTML = `こんにちは、${name} さん`;
name に悪意のある HTML やスクリプトが入っていた場合、
それがそのまま実行される可能性があります。
安全な書き方はこうです。
resultElement.textContent = `こんにちは、${name} さん`;
テンプレート文字列の中にユーザー入力を混ぜるときも、
textContent なら「全部まとめてただの文字」として扱われます。
Day18 後半のミニサンプル
「ログインフォーム風」のミニアプリ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day18 フォーム操作 後半</title>
</head>
<body>
<h1>ログイン風フォーム</h1>
<form id="loginForm">
<p>
ユーザー名：<input id="userInput" type="text">
</p>
<p>
パスワード：<input id="passwordInput" type="password">
</p>
<button type="submit">ログイン</button>
</form>
<p id="message"></p>
<script>
const loginFormElement = document.getElementById("loginForm");
const userInputElement = document.getElementById("userInput");
const passwordInputElement = document.getElementById("passwordInput");
const messageElement = document.getElementById("message");
loginFormElement.addEventListener("submit", (event) => {
event.preventDefault();
const user = userInputElement.value.trim();
const password = passwordInputElement.value;
if (user === "" || password === "") {
messageElement.textContent = "ユーザー名とパスワードを入力してください。";
return;
}
messageElement.textContent = `ようこそ、${user} さん（※これはダミーログインです）`;
userInputElement.value = "";
passwordInputElement.value = "";
});
</script>
</body>
</html>
ここには、Day18 後半の要素がすべて入っています。
form と submit イベント
preventDefault によるページ遷移の抑止
複数 input の value 取得
trim による空白除去
空チェックとメッセージ表示
textContent による安全な表示
このレベルのフォーム処理が自分で書ければ、
「ユーザーから情報を受け取って、画面に反映する」という
Webアプリの基本サイクルを一通り回せていると言っていいです。
Day18 後半のまとめ
Day18 後半では、
input.value を「フォーム送信」という文脈で扱うところまで進みました。
form と submit イベントを使うと、
ボタンクリックも Enter キーも一つの流れで処理できる。
preventDefault でブラウザの標準動作を止め、自分のロジックに切り替えられる。
複数 input の値をまとめて扱い、バリデーションをかけられる。
ユーザー入力は textContent で安全に表示する。
ここまで来たあなたは、
「ただ動くページ」ではなく「ユーザーと対話するページ」を
自分の手で組み立てられる段階にいます。
この先の「サーバー通信」や「保存機能」にも、今日の感覚がそのままつながっていきます。