Webサイトには「お問い合わせフォーム」や「検索窓」など、ユーザーが文字を入力する場所がありますよね。
今回は、そこに入力された文字をJavaScriptで引っ張り出し、活用する方法を学びます。
これができると、「入力された金額から消費税を計算する」とか「入力された名前を使って挨拶する」といった機能が作れるようになります。
重要ルール：「value（バリュー）」を使う
これまで、文字を書き換えるときは textContent を使っていました。
しかし、<input> タグ（入力欄）の中身を取得するときは、value プロパティを使わなければなりません。
- textContent：
<p>ここ</p>のように、タグに挟まれた文字用。 - value：
<input>や<textarea>の入力欄の中身用。
書き方
const input = document.querySelector("#name-input");
// 入力された文字を取得して、変数に入れる
const name = input.value;文字を合体させる魔法「テンプレートリテラル」
取得した名前を使って「こんにちは、〇〇さん！」と表示したい場合、文字を合体させる必要があります。
昔は + を使っていましたが、今は「バッククォート（`）」を使う書き方が主流です。
これを「テンプレートリテラル」と呼びます。
const name = "田中";
// 👴 昔の書き方（プラスで繋ぐ）
// "こんにちは、" + name + "さん！"
// 👶 今の書き方（バッククォートで囲む）
`こんにちは、${name}さん！`${ 変数 } と書いた部分に、自動的に中身が埋め込まれます。
直感的で分かりやすいですよね！
※注意： バッククォート（`）は、Shiftキーを押しながら「@」キーを押すと入力できます（日本語キーボードの場合）。シングルクォート（’）とは別物なので注意！
実践：リアルタイム挨拶アプリ
では、名前を入力してボタンを押すと、画面にメッセージが表示されるアプリを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>ご挨拶アプリ</h1>
<p>お名前を入力してください：</p>
<input type="text" id="name-input" placeholder="例：タナカ">
<button id="greet-btn">あ い さ つ</button>
<p id="result-area">（ここにメッセージが出ます）</p>
<script>
const input = document.querySelector("#name-input");
const btn = document.querySelector("#greet-btn");
const result = document.querySelector("#result-area");
// ボタンが押されたら...
btn.addEventListener("click", function() {
// 1. 入力欄から文字(value)を取得
const userName = input.value;
// ★もし空欄だったら警告する（if文の復習！）
if (userName === "") {
alert("名前を入れてください！");
return; // ここで処理を中断させる
}
// 2. 文字を作って表示（テンプレートリテラル）
result.textContent = `${userName}さん、ようこそWDM Cafeへ！`;
});
</script>
</body>
</html>解説：コードの流れ
input.valueで、ユーザーが書いた文字を抜き出します。if (userName === "")で、未入力のままボタンを押された時の対策をしています。${userName}を使って、取得した名前を文章の中に埋め込んでいます。
まとめ
- 入力欄（input）の中身は
.valueで取る！ - 文字の合体は バッククォート（`） と
${}を使う！ - 空欄チェックには
if文を使うと親切。
これで、ユーザーと「会話」ができるようになりました。
次回は、これまで習った知識（DOM、イベント、if文、計算）を総動員して、「カウンターアプリ」を作ります！
📝 今日のミニテスト
クリックで答え合わせ！
Q1. inputタグに入力された文字を取得する正しいプロパティは？
正解：value
textContent や innerHTML では入力された値は取れません。
Q2. 変数 score の中身を埋め込む正しい書き方は？
`あなたの点数は XX 点です`
正解：${score}
ドルマークと波カッコを使います。これを囲むときは必ず「バッククォート（`）」を使ってください。
Q3. 実践問題：ID=”email” の入力欄の中身を、コンソールに表示するコードを書いてください。
const emailInput = document.querySelector("#email");
console.log( emailInput.① );
// 答え
// ① value