Day18：フォーム操作の練習問題
input の値を JavaScript で取得することは、Webアプリの基礎中の基礎です。
ここでは、Day18 の内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。
基本問題：input の値を取得する
問題1：ボタンを押したら input の内容を p に表示してください
次の HTML を前提とします。
<input id="textInput" type="text">
<button id="btn">表示</button>
<p id="result"></p>
解答と解説
const textInput = document.getElementById("textInput");
const btn = document.getElementById("btn");
const result = document.getElementById("result");
btn.addEventListener("click", () => {
const value = textInput.value;
result.textContent = value;
});
input の中身は value で取得します。
textContent ではなく value を使う点が最重要です。
基本問題：入力後に input を空にする
問題2：表示後に input の中身を空にしてください
次の HTML を前提とします。
<input id="textInput" type="text">
<button id="btn">送信</button>
<p id="result"></p>
解答と解説
btn.addEventListener("click", () => {
const value = textInput.value;
result.textContent = value;
textInput.value = "";
});
value は「読み取り」だけでなく「書き込み」もできます。
空文字を代入することで、入力欄をリセットできます。
応用問題：空文字を弾く
問題3：何も入力されていない場合は「入力してください」と表示してください
次の HTML を前提とします。
<input id="textInput" type="text">
<button id="btn">送信</button>
<p id="result"></p>
解答と解説
btn.addEventListener("click", () => {
const value = textInput.value;
if (value === "") {
result.textContent = "入力してください";
return;
}
result.textContent = value;
textInput.value = "";
});
フォームでは「空文字チェック」が必須です。
value を変数に入れてからチェックすることで、後の処理が書きやすくなります。
応用問題：trim でスペースだけの入力を弾く
問題4：「スペースだけ」の入力も空として扱ってください
次の HTML を前提とします。
<input id="textInput" type="text">
<button id="btn">送信</button>
<p id="result"></p>
解答と解説
btn.addEventListener("click", () => {
const value = textInput.value.trim();
if (value === "") {
result.textContent = "入力してください";
return;
}
result.textContent = value;
textInput.value = "";
});
trim() は前後の空白を取り除きます。
ユーザーが「スペースだけ」入力した場合も正しく弾けます。
実務寄り問題：複数の input を扱う
問題5：名前と年齢を入力し、「〇〇さんは〇歳です」と表示してください
次の HTML を前提とします。
<input id="nameInput" type="text" placeholder="名前">
<input id="ageInput" type="number" placeholder="年齢">
<button id="btn">送信</button>
<p id="result"></p>
解答と解説
const nameInput = document.getElementById("nameInput");
const ageInput = document.getElementById("ageInput");
btn.addEventListener("click", () => {
const name = nameInput.value.trim();
const age = ageInput.value.trim();
if (name === "" || age === "") {
result.textContent = "名前と年齢を入力してください";
return;
}
result.textContent = `${name} さんは ${age} 歳です`;
});
複数 input を扱うときも、基本は「value を読む → チェック → 表示」の流れです。
セキュリティ問題：innerHTML を使わない
問題6：ユーザー入力を画面に表示するとき、innerHTML を使ってはいけない理由を説明してください
（文章で答える問題）
解答と解説
innerHTML は「文字列を HTML として解釈する」ため、
ユーザーが <script>...</script> のような文字列を入力した場合、
それが実行されてしまう危険があります（XSS）。
安全に表示するには textContent を使います。
textContent は「すべてをただの文字として扱う」ため、
どんな入力でも安全に画面へ表示できます。
発展問題：Enter キーでも送信できるフォームにする
問題7：form と submit イベントを使い、Enter キーでも送信できるようにしてください
次の HTML を前提とします。
<form id="myForm">
<input id="textInput" type="text">
<button type="submit">送信</button>
</form>
<p id="result"></p>
解答と解説
const form = document.getElementById("myForm");
const textInput = document.getElementById("textInput");
const result = document.getElementById("result");
form.addEventListener("submit", (event) => {
event.preventDefault();
const value = textInput.value.trim();
if (value === "") {
result.textContent = "入力してください";
return;
}
result.textContent = value;
textInput.value = "";
});
submit イベントを使うと、
ボタンクリックと Enter キーの両方を同じ処理で扱えます。
event.preventDefault() でページ遷移を止めるのがポイントです。
Day18 練習問題まとめ
今回の練習問題で、
input.value の取得
value の書き換え（クリア）
空文字チェック
trim による空白除去
複数 input の扱い
textContent による安全な表示
form と submit イベント
preventDefault によるページ遷移の抑止
といったフォーム操作の基礎がしっかり身につきます。