JavaScriptのvalueとは？

JavaScriptにおいて、`value`はHTMLフォーム要素の値を扱うための重要なプロパティです。テキストボックス、セレクトボックス、ラジオボタン、チェックボックスなど、様々なフォーム要素の値を取得・設定することができます。

valueプロパティの用途

`value`プロパティは、主に以下の2つの用途で使用されます。

フォーム要素の種類によって、`value`プロパティの扱われ方が異なります。以下に代表的な例を挙げます。

フォーム要素	valueプロパティの扱い方	コード例
テキストボックス	ユーザーが入力したテキストが格納されます。	`<input type="text" id="name" value="山田太郎"> <script> const nameInput = document.getElementById("name"); console.log(nameInput.value); // "山田太郎" </script>`
セレクトボックス	選択されているオプションの値が格納されます。	`<select id="city"> <option value="tokyo">東京</option> <option value="osaka" selected>大阪</option> <option value="fukuoka">福岡</option> </select> <script> const citySelect = document.getElementById("city"); console.log(citySelect.value); // "osaka" </script>`
ラジオボタン	選択されているラジオボタンの値が格納されます。	`<input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female" checked>女性 <script> const genderRadios = document.querySelectorAll('input[name="gender"]'); genderRadios.forEach(radio => { if (radio.checked) { console.log(radio.value); // "female" } }); </script>`
チェックボックス	チェックされている場合は"on"、チェックされていない場合は""(空文字列)が格納されます。	`<input type="checkbox" id="agree" checked>同意する <script> const agreeCheckbox = document.getElementById("agree"); console.log(agreeCheckbox.value); // "on" </script>`

`value`プロパティを用いることで、JavaScriptから動的にフォームを操作することができます。例えば、以下のような操作が可能です。

A1. いいえ、`value`プロパティは読み書き可能です。そのため、JavaScriptからフォーム要素の値を取得するだけでなく、設定することも可能です。

A2. はい、可能です。チェックボックスの`value`属性に任意の値を設定することで、チェックされた際にその値を取得することができます。ただし、チェックされていない場合は""(空文字列)が返される点は変わりません。

A3. フォームの操作は、ユーザーエクスペリエンスに大きく影響します。そのため、JavaScriptでフォームを操作する際には、以下の点に注意する必要があります。

その他の参考記事:jquery value 取得