input の value とは何か
input の value には「現在の入力値（プロパティ）」と「初期値（属性）」の2種類があります。JavaScript から扱うときは、今画面に表示されている“現在値”は el.value（プロパティ）で、HTML に書いた初期値は el.getAttribute(“value”) または el.defaultValue で扱います。ここが重要です：属性の更新は“初期値の変更”、プロパティの更新は“今の表示の変更”。目的に応じて使い分けるのが正解です。
テキスト入力の基本（現在値と初期値の使い分け）
現在値を読む・書く（プロパティが基本）
<input id="name" value="初期値" placeholder="氏名">
<script>
const name = document.getElementById("name");
console.log(name.value); // "初期値"（今の表示）
name.value = "山田太郎"; // 画面の入力値が即座に変わる
</script>
ここが重要です：ユーザーの入力やプログラムで変わる「今の値」は .value。フォーム処理、バリデーション、送信前整形は .value を使います。
初期値の確認と変更（属性・defaultValue）
<input id="nick" value="guest">
<script>
const nick = document.getElementById("nick");
console.log(nick.getAttribute("value")); // "guest"（HTMLの初期値）
console.log(nick.defaultValue); // "guest"（同じ意味）
nick.setAttribute("value", "member"); // 初期値を更新（reset 時に反映）
console.log(nick.value); // 現在値はそのまま（変わらない）
</script>
ここが重要です：初期値を変えたいなら属性（または defaultValue）。今の表示を変えたいなら .value。混同すると「変えたのに画面が変わらない」というバグになります。
チェックボックス・ラジオの value（選択状態は checked で扱う）
checkbox の value と checked
<input id="agree" type="checkbox" value="yes">
<script>
const c = document.getElementById("agree");
console.log(c.value); // "yes"（送信される値のラベル）
console.log(c.checked); // false/true（選択状態）
c.checked = true; // チェックを付ける（見た目と送信に影響）
</script>
ここが重要です：checkbox の value は「選ばれたとき送られる文字」。オン/オフの状態は .checked で管理します。状態判定に value を使わないこと。
radio グループの選択値
<label><input name="size" type="radio" value="S">S</label>
<label><input name="size" type="radio" value="M">M</label>
<label><input name="size" type="radio" value="L">L</label>
<script>
const sel = document.querySelector('input[name="size"]:checked');
console.log(sel?.value); // "M" など（選ばれていないときは null）
</script>
ここが重要です：ラジオは“グループ名”でひとつが選ばれる。選択中の値は :checked で要素を取り、.value を読むのがシンプルです。
数値・日付の専用 API（valueAsNumber / valueAsDate）
number 型の安全な読み取り
<input id="age" type="number" min="0" max="120" step="1">
<script>
const age = document.getElementById("age");
age.value = "20";
console.log(age.valueAsNumber); // 20（数値で取得）
age.value = ""; // 未入力
console.log(age.valueAsNumber); // NaN（数値にできない）
</script>
ここが重要です：数値計算したいなら valueAsNumber を使い、NaN の扱いを必ず用意します（既定値に丸めるなど）。
date/datetime-local の読み取り
<input id="d" type="date" value="2025-12-13">
<script>
const d = document.getElementById("d");
console.log(d.value); // "2025-12-13"（文字）
console.log(d.valueAsDate); // Date オブジェクト（または null）
</script>
ここが重要です：日付は文字列より valueAsDate が扱いやすい。送信や表示時に必要に応じてフォーマットへ戻します。
select・textarea の値（選択肢と複数選択）
select の現在値
<select id="color">
<option value="red">赤</option>
<option value="blue" selected>青</option>
</select>
<script>
const color = document.getElementById("color");
console.log(color.value); // "blue"
color.value = "red"; // 選択肢を切り替え
</script>
ここが重要です：select も .value が現在の選択を表します。存在しない値を入れると選択が外れたり無視されたりするため、候補を確認してから設定します。
複数選択（multiple）の取り出し
<select id="fruits" multiple>
<option value="apple" selected>りんご</option>
<option value="banana">バナナ</option>
<option value="cherry" selected>さくらんぼ</option>
</select>
<script>
const fruits = document.getElementById("fruits");
const values = Array.from(fruits.selectedOptions).map(o => o.value);
console.log(values); // ["apple","cherry"]
</script>
ここが重要です：multiple のときは .value ではなく selectedOptions を列挙して配列化します。
イベントとタイミング（入力検知・プログラム更新）
input / change イベントの違い
<input id="q" type="text">
<script>
const q = document.getElementById("q");
q.addEventListener("input", () => console.log("タイプ中:", q.value));
q.addEventListener("change", () => console.log("確定後:", q.value));
</script>
ここが重要です：input は“逐次”、change は“確定時”。UX に合わせて使い分けます（number や select は change の方が自然なことが多い）。
プログラムで値を変えてもイベントは自動では出ない
q.value = "初期化";
// 監視側に通知したいなら明示的にイベントを送る
q.dispatchEvent(new Event("input", { bubbles: true }));
ここが重要です：双方向バインドがない素朴な設計では、プログラム更新後に必要なイベントを自分で発火します。
IME（日本語入力）の合成中は確定しない
q.addEventListener("compositionstart", () => {/* 合成開始 */});
q.addEventListener("compositionend", () => {/* 合成終了 → 値確定 */});
ここが重要です：日本語入力では composition 中は値が“確定前”。リアルタイム検証は合成終了後に行うと誤判定が減ります。
フォームの reset と初期値（defaultValue と同期）
reset の挙動
<form id="f">
<input id="u" value="初期">
<button type="reset">リセット</button>
</form>
<script>
const u = document.getElementById("u");
u.value = "今の値";
document.getElementById("f").reset(); // "初期" に戻る（属性の value / defaultValue）
</script>
ここが重要です：reset は“初期値”へ戻します。初期値を動的に変えたいなら、defaultValue を更新すると reset の戻り先も更新されます。
u.defaultValue = "新しい初期値"; // または u.setAttribute("value", "新しい初期値")
実践例（トリム・妥当性・送信用整形）
入力をトリムしてボタン有効化
<input id="email" type="email" required>
<button id="next" disabled>次へ</button>
<script>
const email = document.getElementById("email");
const next = document.getElementById("next");
email.addEventListener("input", () => {
const v = email.value.trim();
next.disabled = !(v && email.validity.valid);
});
</script>
ここが重要です：送信前の整形は .value を加工。validity と併用すると複雑な検証を簡単に書けます。
送信時に型変換・正規化
<input id="age" type="number" min="0">
<script>
const age = document.getElementById("age");
function readAge() {
const n = age.valueAsNumber;
return Number.isFinite(n) ? n : null; // 未入力や不正は null に
}
</script>
ここが重要です：valueAsNumber/valueAsDate を使い、未入力や不正値の扱いを“常に同じ規則”にするだけでバグが激減します。
よくある落とし穴と回避策
- 属性と現在値の混同: get/setAttribute(“value”) は初期値、.value は現在値。目的に合う方だけ触る。
- checkbox の誤用: 状態は .checked、送信ラベルは .value。オン/オフ判定に .value を使わない。
- multiple select: .value で単一しか取れない。selectedOptions を配列化。
- イベント未発火: プログラムで .value を変えても input/change は自動では出ない。必要なら dispatchEvent。
- IME 合成中の検証: composition イベントを考慮し、確定後に判定。 ここが重要です：値の“意味”と“タイミング”を揃える。それだけでフォームの信頼性が一段上がります。
まとめ
input の value は「現在値（プロパティ）」と「初期値（属性）」に分かれます。画面の値は .value、初期値は getAttribute(“value”)/defaultValue。checkbox/radio は .checked で状態、.value は送信ラベル。number/date には valueAsNumber/valueAsDate を活用し、select multiple は selectedOptions を配列化。イベントは input/change を使い分け、プログラム更新後は必要なら自前で発火。reset と初期値の関係を理解して同期すれば、初心者でも安全で意図通りのフォーム値取り扱いができます。