Day18 前半のゴール
Day18 では、いよいよ「フォーム操作」に入ります。
ここまでで「クリックされたら文字を変える」「要素を増やす」はできるようになりました。
ここからは、ユーザーが入力した値を JavaScript で受け取る、という一段大事なステップに進みます。
前半のゴールはこうです。
Day18 前半でつかみたい感覚
input 要素の「中身」は value プロパティから取り出す
「DOM を取る」→「value を読む」→「使う」という流れを自然に書けるようにする
ここが分かると、「名前を入力してもらう」「検索キーワードを受け取る」「メモを保存する」など、
“ユーザーと対話する”Webページが作れるようになります。
input 要素とは何かを整理する
HTML の input は「ユーザーが値を入れる入り口」
まずは HTML 側から見てみます。
<input id="nameInput" type="text" placeholder="名前を入力">
この input 要素は、ユーザーがキーボードで文字を打ち込むための“箱”です。
ブラウザ上では「テキストボックス」として表示されます。
JavaScript からは、この input 要素を取得して、
その「中身（入力された文字）」を読み取ることができます。
input の値は value プロパティで取得する
一番大事なプロパティ：value
input 要素の「中身」は、
textContent ではなく value というプロパティに入っています。
<input id="nameInput" type="text" placeholder="名前を入力">
<button id="showButton">表示</button>
<p id="result"></p>
この HTML に対して、JavaScript を書いてみます。
const nameInputElement = document.getElementById("nameInput");
const showButtonElement = document.getElementById("showButton");
const resultElement = document.getElementById("result");
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
resultElement.textContent = `こんにちは、${name} さん`;
});
ここで一番重要なのは、この1行です。
const name = nameInputElement.value;
これが「ユーザーが入力した文字列を JavaScript の変数として受け取る」瞬間です。
深掘り：textContent ではダメな理由
input 要素は、こういう構造ではありません。
<input>ここに文字が入る</input>
ではなく、
「タグの中身」ではなく「属性として値を持つ」タイプの要素です。
そのため、textContent を見ても何も入っていません。
input の中身は value から取る、これは必ず体に染み込ませてください。
クリックと input 取得を組み合わせる基本パターン
「ボタンを押したら入力内容を表示する」例
もう一度、シンプルな例を最初から通して見てみます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day18 フォーム操作 前半</title>
</head>
<body>
<input id="nameInput" type="text" placeholder="名前を入力">
<button id="showButton">挨拶する</button>
<p id="result"></p>
<script>
const nameInputElement = document.getElementById("nameInput");
const showButtonElement = document.getElementById("showButton");
const resultElement = document.getElementById("result");
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
resultElement.textContent = `こんにちは、${name} さん`;
});
</script>
</body>
</html>
流れを言葉で追うとこうなります。
ページ読み込み時に、input・button・p の要素を取得する
ボタンに click イベントを登録する
クリックされた瞬間に、input.value から文字列を取り出す
取り出した文字列を使って、p の textContent を書き換える
この「input.value → 変数 → DOM に反映」という流れが、Day18 の核です。
入力後に input をクリアする
入力欄を空に戻すのもよくあるパターン
ユーザーが入力してボタンを押したあと、
入力欄を空に戻したいことがよくあります。
さきほどの例に 1 行足すだけです。
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
resultElement.textContent = `こんにちは、${name} さん`;
nameInputElement.value = "";
});
最後の
nameInputElement.value = "";
で、input の中身を空文字にしています。
これも「value を読む」「value に書く」という同じ仕組みです。
空文字チェックを入れてみる
何も入力されていないときの扱い
実用的なフォームでは、
「何も入力されていないのに送信される」のは困ります。
簡単なチェックを入れてみましょう。
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value;
if (name === "") {
resultElement.textContent = "名前を入力してください。";
return;
}
resultElement.textContent = `こんにちは、${name} さん`;
nameInputElement.value = "";
});
ここでのポイントは、
「入力値を変数に入れてからチェックする」 という流れです。
value を直接 if に書くこともできますが、
変数に入れておくと、あとからログに出したり、別の処理に使ったりしやすくなります。
trim で前後の空白を無視する
「スペースだけ」の入力を弾きたい場合
ユーザーが「スペースだけ」入力している場合も、
実質的には空とみなしたいことが多いです。
そのときに使えるのが trim です。
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
if (name === "") {
resultElement.textContent = "名前を入力してください。";
return;
}
resultElement.textContent = `こんにちは、${name} さん`;
nameInputElement.value = "";
});
trim() は、文字列の前後にある空白（スペースや改行）を取り除きます。
セキュリティというより「ちゃんと入力してもらうためのバリデーション」の一歩目です。
セキュリティの視点：入力値をどう扱うか
innerHTML に直接入れない
ユーザーが入力した値を画面に表示するとき、
innerHTML にそのまま入れるのは危険です。
// これは危険な例
resultElement.innerHTML = name;
もし name に <script>...</script> のような文字列が入っていた場合、
それがそのまま HTML として解釈され、スクリプトが実行される可能性があります（XSS）。
Day18 の段階では、
ユーザー入力を表示するときは textContent を使う
というルールだけ、しっかり覚えておいてください。
resultElement.textContent = name;
これなら、どんな文字列でも「ただの文字」として扱われます。
複数の input を扱う基本
名前と年齢を同時に受け取る
input は 1 つだけとは限りません。
複数の input から値を取るのも、基本は同じです。
<input id="nameInput" type="text" placeholder="名前">
<input id="ageInput" type="number" placeholder="年齢">
<button id="showButton">表示</button>
<p id="result"></p>
const nameInputElement = document.getElementById("nameInput");
const ageInputElement = document.getElementById("ageInput");
const showButtonElement = document.getElementById("showButton");
const resultElement = document.getElementById("result");
showButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
const age = ageInputElement.value.trim();
if (name === "" || age === "") {
resultElement.textContent = "名前と年齢を入力してください。";
return;
}
resultElement.textContent = `${name} さんは ${age} 歳ですね。`;
});
ここでもやっていることは同じです。
DOM から input 要素を取得する
value を読み取る
必要なら trim する
空チェックをする
textContent で表示する
このパターンを何度も書いて、手に馴染ませていきましょう。
Day18 前半のミニサンプル
シンプルな「自己紹介ジェネレーター」
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Day18 フォーム操作 前半</title>
</head>
<body>
<h1>自己紹介ジェネレーター</h1>
<p>
名前：<input id="nameInput" type="text">
</p>
<p>
好きな食べ物：<input id="foodInput" type="text">
</p>
<button id="makeButton">自己紹介を作る</button>
<p id="result"></p>
<script>
const nameInputElement = document.getElementById("nameInput");
const foodInputElement = document.getElementById("foodInput");
const makeButtonElement = document.getElementById("makeButton");
const resultElement = document.getElementById("result");
makeButtonElement.addEventListener("click", () => {
const name = nameInputElement.value.trim();
const food = foodInputElement.value.trim();
if (name === "" || food === "") {
resultElement.textContent = "名前と好きな食べ物を入力してください。";
return;
}
resultElement.textContent = `私は ${name} です。好きな食べ物は ${food} です。`;
});
</script>
</body>
</html>
ここまで書ければ、
「input から値を取って、クリックをきっかけに画面へ反映する」
という Day18 前半のテーマは、ほぼクリアです。
Day18 前半のまとめ
Day18 前半で押さえるべきポイントは、かなりシンプルですが超重要です。
input 要素の中身は value から取得する
value を変数に入れてから使うと、チェックや加工がしやすい
空文字やスペースだけの入力は、必要に応じて弾く（trim）
ユーザー入力を表示するときは textContent を使う（innerHTML は使わない）
後半では、
フォーム全体（form 要素）と submit イベント、
Enter キーでの送信、
そして「ページ遷移させずにフォームを扱う」ためのテクニックに踏み込んでいきます。