1. ラジオボタン・チェックボックスの操作

解説： ユーザーの選択肢を扱う際に欠かせないのが、ラジオボタンとチェックボックスです。
ラジオボタンは「1つだけ選ぶ」場面に、チェックボックスは「複数選択」や「ON/OFFの切り替え」に使われます。

● ラジオボタンの値を取得する

「今どの選択肢が選ばれているか」を調べるには querySelector + :checked を使います。
valueプロパティを使えば、選択値をそのまま取得できます。

<input type="radio" name="fruit" value="りんご">りんご
<input type="radio" name="fruit" value="みかん">みかん
<input type="radio" name="fruit" value="バナナ">バナナ
<button id="checkRadio">選択中の果物を表示</button>

const btn = document.querySelector('#checkRadio');
btn.addEventListener('click', () => {
  const selected = document.querySelector('input[name="fruit"]:checked');
  if (selected) {
    alert('選択中の果物：' + selected.value);
  } else {
    alert('果物が選択されていません');
  }
});

● チェックボックスのON/OFFを取得する

checked プロパティを使えば、チェックされているかどうかを調べられます。
チェックされていれば true、されていなければ false が返ります。
また、真偽値で返ってくるので、if文の条件分岐にもそのまま利用できます。

<input type="checkbox" id="agree"> 利用規約に同意する
<button id="checkAgree">確認</button>

const checkBtn = document.querySelector('#checkAgree');
const checkbox = document.querySelector('#agree');

checkBtn.addEventListener('click', () => {
  if (checkbox.checked) {
    alert('同意されました！');
  } else {
    alert('同意が必要です。');
  }
});

● 実行例

● まとめ

• ✅ ラジオボタンは querySelector('input[name="xxx"]:checked') で選択中の値を取得
• ✅ チェックボックスは checked プロパティで状態を判定
• ✅ 複数選択や入力必須チェックに応用できる

ラジオボタンとチェックボックスは、ユーザーの意思を受け取る基本的な手段です。しっかり使いこなして、フォーム操作に強くなりましょう！次のステップでは、select要素の扱い方を学びましょう！

2. select要素の取得と選択値の確認

解説： プルダウン形式で選択肢を表示する際に使われるのが <select> 要素です。
ユーザーが選んだ値を取得したり、変更を検知したりするには valueプロパティ を使います。

● 選択された値を取得する

value プロパティを使えば、現在選ばれている option要素の value 属性 を取得できます。

<select id="pref">
  <option value="東京">東京都</option>
  <option value="大阪">大阪府</option>
  <option value="福岡">福岡県</option>
</select>
<button id="checkSelect">選択中の都道府県を表示</button>

const btn = document.querySelector('#checkSelect');
const select = document.querySelector('#pref');

btn.addEventListener('click', () => {
  alert('選択中の都道府県：' + select.value);
});

● 実行例

● 補足：初期値と動的生成

ページ読み込み時に 最初に選ばれているのが「初期値」です。
ユーザーの選択がなければ初期値がそのまま返されます。
また、選択肢が少ない場合は、直書きでも問題ありませんが、多くの選択肢がある場合は、JavaScriptで動的に生成するのが一般的です。 このとき、選択肢データは データベース・外部API・JSONファイル などから取得されることが多いです。

● まとめ

• ✅ select.value で現在の選択肢の値を取得できる
• ✅ プルダウンの選択肢は <option value="〇〇"> の形式で定義
• ✅ 初期値や動的生成も意識しておこう

select要素は、ユーザーの選択操作をシンプルに実装できる便利な部品です。
次はフォームのエラーメッセージやカスタムバリデーションについて学んでいきましょう！

3. エラーメッセージの出し分け・カスタムバリデーション

解説： 入力フォームでは、条件を満たしていないときにエラーメッセージを表示するのが一般的です。
JavaScriptを使えば、条件に応じて動的にメッセージを切り替えることができ、より親切なフォームを作れます。

● 空欄チェック＋条件によるエラー出し分け

「未入力」「文字数不足」「形式違い」など、それぞれに応じて異なるエラーを出します。

<input type="text" id="username">
<div id="errorMsg"></div>
<button id="validateBtn">送信</button>

const input = document.querySelector('#username');
const errorDiv = document.querySelector('#errorMsg');
const button = document.querySelector('#validateBtn');

button.addEventListener('click', () => {
  const value = input.value.trim();

  if (value === '') {
    errorDiv.textContent = 'ユーザー名を入力してください';
  } else if (value.length < 4) {
    errorDiv.textContent = '4文字以上で入力してください';
  } else if (!/^[a-zA-Z0-9]+$/.test(value)) {
    errorDiv.textContent = '半角英数字のみ使用できます';
  } else {
    errorDiv.textContent = '';
    alert('送信完了！');
  }
});

● 実行例

● よくあるバリデーション例

• ✅ 必須入力（空欄かどうか）
• ✅ 文字数チェック（例：4文字以上）
• ✅ 正規表現での形式チェック（例：メール・パスワード）
• ✅ 入力内容に応じたエラーメッセージの出し分け

● まとめ

• ✅ JavaScriptで条件を分岐すれば、柔軟にエラー表示を制御できる
• ✅ trim() で前後の空白を除去してからチェックすると丁寧
• ✅ 正規表現を使えば、文字種や形式の検証も可能

フォームバリデーションは「ユーザーに優しいインターフェース」を作る上でとても重要です。
次は、HTML5のバリデーション属性を使った方法について学んでいきましょう！

4. HTML5のバリデーション属性の活用（required / minlength / pattern）

解説： HTML5では、JavaScriptを使わなくても入力制限やチェックを行う機能が用意されています。
これらを使うことで、基本的なバリデーションを手軽に実装できます。

● 主なHTML5バリデーション属性

• required：未入力の場合、送信できない
• minlength / maxlength：入力文字数の制限
• pattern：正規表現で入力形式を制限
• type="email" / "number"：形式を自動でチェック

● 使用例（メールアドレス・パスワード）

<form>
  <input type=email required placeholder="メールアドレス">
  <input type=password required minlength="6" placeholder="6文字以上のパスワード">
  <input type=text required pattern="^[a-zA-Z]{3,}$" placeholder="英字3文字以上のユーザー名">
  <button type=submit>送信</button>
</form>

上記のように属性を指定するだけで、入力漏れや文字数不足などを自動でチェックしてくれます。

● pattern 属性を使った形式チェック

例：3文字以上の半角英字を必須とする入力欄

<input type="text" required pattern="^[a-zA-Z]{3,}$" placeholder="英字3文字以上">

pattern は正規表現で形式を細かく制御できます。英数字・電話番号・郵便番号などに便利です。

● 実行例

● まとめ

• ✅ HTML5の属性だけで、基本的なバリデーションが可能
• ✅ required / minlength / pattern を組み合わせて活用
• ✅ より細かい判定は JavaScript のカスタムバリデーションと併用

HTML5の機能をうまく活用すれば、軽量かつ堅牢なフォームバリデーションが実現できます。
次は、正規表現を活用した入力チェックをさらに掘り下げてみましょう！

5. 正規表現を活用した入力チェック（メール / 電話番号 / 郵便番号など）

解説： 正規表現（RegExp）を使えば、文字列のパターンに応じた入力チェックが行えます。
HTML5の pattern 属性や、JavaScript の RegExp オブジェクトで利用可能です。

● よく使う正規表現パターン例

• メールアドレス： ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$
• 電話番号（ハイフンあり）： ^0\d{1,4}-\d{1,4}-\d{4}$
• 郵便番号： ^\d{3}-\d{4}$
• 英字のみ： ^[a-zA-Z]+$
• 半角英数のみ： ^[a-zA-Z0-9]+$

● JavaScriptでの入力チェック例

<input type="text" id="email" placeholder="メールアドレス">
<button id="validate">確認</button>

const emailInput = document.querySelector('#email');
const btn = document.querySelector('#validate');

btn.addEventListener('click', () => {
  const pattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  const value = emailInput.value;

  if (pattern.test(value)) {
    alert('有効なメールアドレスです');
  } else {
    alert('無効な形式です');
  }
});

● 実行例

● まとめ

• ✅ pattern 属性でも正規表現を活用できる
• ✅ JavaScriptの RegExp で動的なチェックも可能
• ✅ 正規表現は構文がやや複雑なので、使うたびに確認・テストを

正規表現を使えば、自由度の高い柔軟な入力チェックが可能になります。
これにより、パターンに基づいた厳密な検証や、複雑な条件を満たすフォーム入力チェックを実装できるようになります。