JavaScriptのinput・select・radio・checkboxの値操作と各種イベント処理を整理する

1. はじめに

この記事では、JavaScriptを使ったフォーム部品の値操作と各種イベント処理の基本を整理しています。
動画教材を見ながら手を動かして学んだ内容を、後から見返しやすいようにまとめました。

扱うトピックは以下の通りです。

• フォーム部品（input / textarea / select / radio / checkbox）の値取得・設定
• input / focus / blur / keydown / mousemove / submit イベントの使い方
• e.preventDefault() でデフォルト動作を防ぐ方法

2. フォーム部品の値操作

フォーム部品の値は textContent ではなく value を使うのが基本のようです。
部品の種類によって取得方法が少し異なるため、まとめて整理します。

2.1 input / textarea

<input type="text">
<textarea></textarea>
<button>送信</button>

const inputElement = document.querySelector('input');
const textarea = document.querySelector('textarea');

document.querySelector('button').addEventListener('click', () => {
  alert(inputElement.value);
  alert(textarea.value);

  // 値の消去
  textarea.value = '';
});

解説
input も textarea も .value で入力値を取得・設定できます。
textContent を使いたくなりますが、フォーム部品は value を使う点に注意が必要です。
また .value は取得だけでなく、空文字を代入することでクリアにも使えます。

2.2 select（ドロップダウン）

<select>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

const selectElement = document.querySelector('select');

document.querySelector('button').addEventListener('click', () => {
  alert(selectElement.value);
});

解説
select 要素は1つだけ取得すればよく、選択された値は .value で取得できます。
取得されるのは表示テキストではなく、option タグの value 属性の値です。ただしoption要素のvalue属性値が未定義の場合はその限りではありません(options[selectedIndex].text)。

2.3 radio ボタン

<input type="radio" name="color" value="red"> Red
<input type="radio" name="color" value="green"> Green
<input type="radio" name="color" value="blue"> Blue

document.querySelector('button').addEventListener('click', () => {
  const radios = document.querySelectorAll('input');
  radios.forEach((radio) => {
    if (radio.checked === true) {
      alert(radio.value);
    }
  });
});

解説

• name 属性を同じ値にすることで、1つだけ選択できるグループになります
• querySelectorAll() でまとめて取得し、forEach() で1つずつ処理します
• 選択されているかは .checked（true / false）で判定します

2.4 チェックボックス

<input type="checkbox" value="red"> Red
<input type="checkbox" value="green"> Green
<input type="checkbox" value="blue"> Blue

document.querySelector('button').addEventListener('click', () => {
  const checkboxes = document.querySelectorAll('input');
  const colors = [];

  checkboxes.forEach((checkbox) => {
    if (checkbox.checked) {
      colors.push(checkbox.value);
    }
  });

  alert(colors.join(', '));
});

解説
チェックボックスは複数選択できるため、配列に push() して収集し、最後に join() で文字列化して表示します。
ラジオボタンと同様に .checked で選択状態を確認できます。

3. 各種イベントの使い方

クリック以外にもさまざまなイベントがあることを学びました。
用途に合わせた使い分けが必要だと感じています。

3.1 input イベント（リアルタイム入力検知）

const inputElement = document.querySelector('input');
const pElement = document.querySelector('p');

inputElement.addEventListener('input', () => {
  pElement.textContent = inputElement.value;
});

出力結果
入力するたびに p 要素のテキストがリアルタイムで更新されます。

解説
input イベントは入力が変わるたびに発火します。
input / textarea / select で使用でき、radio / checkbox には change イベントを使います。
また .value.length で文字数も取得できます。

// 文字数をリアルタイムで表示する例
inputElement.addEventListener('input', () => {
  pElement.textContent = inputElement.value.length;
});

3.2 focus / blur イベント

const inputElement = document.querySelector('input');
const pElement = document.querySelector('p');

// フォーカスが当たったときにヒントを表示
inputElement.addEventListener('focus', () => {
  pElement.textContent = 'English only!';
});

// フォーカスが外れたときにヒントを消す
inputElement.addEventListener('blur', () => {
  pElement.textContent = '';
});

// ページ読み込み時に自動でフォーカスを当てる
inputElement.focus();

解説

• focus イベント → 入力欄がクリックされたとき（フォーカスが当たったとき）に発火します
• blur イベント → フォーカスが外れたときに発火します
• focus() メソッド → JavaScriptからフォーカスを強制的に当てます（イベントとは別物です）

3.3 keydown イベント

document.addEventListener('keydown', (e) => {
  document.querySelector('p').textContent = e.key;
});

出力結果
キーを押すたびに、押したキーの名前（a、Enter、ArrowRight など）が p 要素に表示されます。

解説
document にイベントリスナーを設定すると、ページ全体でキー入力を検知できます。
コールバック関数の引数（慣例として e）にイベント情報が入り、e.key で押されたキーの名前を取得できます。
この仕組みを応用すると、スライドショーの操作やキーボード操作のゲームなども作れるようです。

3.4 mousemove イベント

document.addEventListener('mousemove', (e) => {
  document.querySelector('p').textContent = `x: ${e.clientX}, y: ${e.clientY}`;
});

出力結果
マウスを動かすと、現在のカーソル座標がリアルタイムで表示されます。

解説
mousemove はマウスが動くたびに発火します。
e.clientX でX座標、e.clientY でY座標を取得でき、左上が (0, 0) の基点になります。

3.5 submit イベント

<form>
  <input type="text">
  <button>送信</button>
</form>
<p></p>

const form = document.querySelector('form');
const inputElement = document.querySelector('input');
const pElement = document.querySelector('p');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // ページのリロードを防ぐ
  pElement.textContent = inputElement.value;
});

解説
form タグでは送信時に submit イベントが発生します。
デフォルトではページがリロードされてしまうため、e.preventDefault() でそれを防ぎます。
form タグを使う利点として、ボタンクリックだけでなくEnterキーでも送信できる点があります。
click イベントで代替もできますが、UXの観点から form + submit を使う方がよさそうです。

まとめ

今回学んだフォーム操作とイベント処理の内容を振り返ります。

• フォーム部品の値は value で取得・設定する（textContent ではない）
• select は1要素だけ取得し、選択値は .value で取得できる
• radio は name でグループ化し、checked で選択状態を判定する
• checkbox は複数選択できるため、配列と push() / join() を組み合わせて処理する
• input イベント → 入力が変わるたびに発火（radio / checkbox は change イベント）
• focus / blur → フォーカスの当たり・外れを検知する
• focus() → JavaScriptからフォーカスを強制的に当てるメソッド
• keydown → e.key で押されたキーを取得できる
• mousemove → e.clientX / e.clientY でカーソル座標を取得できる
• submit → e.preventDefault() でページのリロードを防ぐ

今後は実際に小さなUIを作りながら、これらのイベントを使いこなせるようにしていきたいと思います。