【JavaScript】フォームに入力した年齢でメッセージを切り替える方法

年齢をフォームに入力すると、「いらっしゃいませ」または「お帰りください」とメッセージが切り替わるシンプルなサンプルです。
JavaScriptの三項演算子やフォームの扱いに慣れる練習として、動作を確認しながら理解を深めることができます。

完成形を触ってみよう！
コードをチェック
Web制作を学ぶならUdemy

完成形を触ってみよう！

「年齢を入力」とある場所に数字を入力してください。
20以上と19以下で違うメッセージが表示されます。

コードをチェック

HTML・CSS・JavaScriptの3つに分けてコードを紹介します。

HTML

<div class="wrap">
  <form>
    <input
      type="number"
      id="inputNumber"
      class="inputNumber"
      name="inputNumber"
      autocomplete="off"
      placeholder="年齢を入力"
      min="0"
      max="120"
      required />
    <button type="submit" class="submitBtn">OK</button>
  </form>
  <div id="message" class="message">
    <p id="ageInfo"></p>
    <p id="resultMessage"></p>
  </div>
  <button id="clearBtn" class="clearBtn hide">クリア</button>
</div>

このHTMLは、年齢を入力して判定結果を表示するためのシンプルなフォームを作るものです。以下に要点を絞って解説します。

✅ <div class="wrap">

全体を囲むラッパー要素です。CSSで中央寄せやレイアウト調整のために使われます。

✅ <form> とその中身

この部分が入力と送信の中心です。

<input type="number" ... />

数値専用の入力欄です（type="number"）。
id="inputNumber"：JavaScriptなどで参照するためのID。
class="inputNumber"：CSSで見た目を調整するためのクラス。
name="inputNumber"：form.elements.inputNumber.value のように、JSで値を取得するために必要。
autocomplete="off"：入力履歴をブラウザに記憶させない設定。
placeholder="年齢を入力"：入力欄に表示される薄い文字（ヒント）。
min="0" max="120"：入力できる年齢の範囲を制限。
required：未入力のままでは送信できない。

<button type="submit">OK</button>

フォームの送信ボタン。
押すとsubmitイベントが発生し、JavaScriptで処理されます。

<p id="ageInfo"></p>
<p id="resultMessage"></p>

入力された年齢に応じたメッセージ（例：「お帰りください」など）を表示する場所です。
初期状態では空ですが、JSで動的に文字が入ります。

<button id="clearBtn" class="clearBtn hide">クリア</button>

入力内容やメッセージを消すためのボタン。
hide クラスによって初期状態では非表示。
年齢が入力・判定されたあとにJSで表示されます。

✅ 補足

このHTMLだけでは動きませんが、JavaScriptとCSSを組み合わせることで以下のような動作になります。

年齢を入力 → OKを押す → メッセージ表示
「クリア」を押す → 入力・メッセージ消去、ボタン非表示に戻る

CSS

* {
  box-sizing: border-box;
}
.wrap {
  width: 90%;
  max-width: 500px;
  min-height: 400px;
  margin: 0 auto;
  padding: 10px;
  border: 1px solid #ccc;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wrap form {
  margin: 30px 0;
  display: flex;
}
.wrap form .inputNumber {
  width: 180px;
  height: 50px;
  margin-right: 4px;
  padding: 6px;
  font-size: 1.2em;
}
.wrap form .submitBtn {
  display: block;
  width: 60px;
  height: 50px;
  padding: 6px;
  font-size: 1em;
  color: #fff;
  background-color: #228b22;
  cursor: pointer;
}
.wrap form .submitBtn:hover {
  opacity: 0.9;
}
.wrap .message {
  width: 90%;
  height: 120px;
  font-size: 1.4em;
  line-height: 1.8;
  margin: 0 0 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrap .message p {
  margin: 0;
}
.wrap .clearBtn {
  display: block;
  width: 70%;
  min-height: 50px;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.2em;
  color: #fff;
  background-color: #228b22;
  border: 2px solid #100600;
  cursor: pointer;
}
.wrap .clearBtn:hover {
  opacity: 0.9;
}
.wrap .clearBtn.hide {
  display: none;
}

*
全要素に box-sizing: border-box を指定し、余白や枠線込みでサイズを計算。レイアウトの崩れを防ぎます。

.wrap
全体のコンテナ。幅90%、最大500px、中央寄せ。縦並びになるよう flex-direction: column を指定しています。

.wrap form
フォームを横並びに表示し、上下に30pxの余白をつけています。

.inputNumber
年齢入力欄。幅を180px、高さ50pxにし、読みやすくするために文字サイズを1.2emに設定。

.submitBtn
「OK」ボタン。緑色の背景に白い文字で目立たせ、ホバー時に少し透けて薄く見えます。

.message
結果表示欄。中央揃えで、文字を大きく（1.4em）し、縦横中央に配置されるよう flex で調整。

.clearBtn
「クリア」ボタン。中央寄せで大きめ、緑色の背景と黒い枠線。非表示時は .hide により display: none になります。

JavaScript

const form = document.querySelector('form');
const input = form.querySelector('input');
const message = document.querySelector('#message');
const ageInfo = message.querySelector('#ageInfo');
const resultMessage = message.querySelector('#resultMessage');
const clearBtn = document.querySelector('#clearBtn');

function makeMessage(age) {
  return age >= 20 ? 'いらっしゃいませ' : 'お帰りください';
}

form.addEventListener('submit', (e) => {
  e.preventDefault();

  let age = parseInt(form.elements.inputNumber.value, 10);

  if (isNaN(age)) {
    message.textContent = '正しい年齢を入力してください';
    return;
  }

  const result = makeMessage(age);
  ageInfo.textContent = `${age}歳ですね`;
  resultMessage.textContent = result;

  clearBtn.classList.remove('hide');
});

clearBtn.addEventListener('click', function () {
  input.value = '';
  ageInfo.textContent = '';
  resultMessage.textContent = '';
  this.classList.add('hide');
});

こちらのJavaScriptコードは、年齢入力フォームに連動してメッセージを表示し、クリアボタンでリセットできるシンプルな仕組みを実装しています。
以下にポイントをしぼってわかりやすく解説します。

✅ 要素の取得

const form = document.querySelector('form');
const input = form.querySelector('input');
const message = document.querySelector('#message');
const ageInfo = message.querySelector('#ageInfo');
const resultMessage = message.querySelector('#resultMessage');
const clearBtn = document.querySelector('#clearBtn');

form, input, message, ageInfo, resultMessage, clearBtn の各DOM要素をそれぞれ取得しています。
これにより、フォームの送信・入力値の取得・メッセージ表示・ボタンクリック処理ができるようになります。

✅ 年齢からメッセージを生成する関数

function makeMessage(age) {
  return age >= 20 ? 'いらっしゃいませ' : 'お帰りください';
}

入力された年齢に応じて、20歳以上なら「いらっしゃいませ」、未満なら「お帰りください」と返します。
三項演算子（条件 ? 値1 : 値2）を使ってシンプルに書かれています。

✅ フォームの送信処理

form.addEventListener('submit', (e) => {
  e.preventDefault();

フォームの送信イベントを監視して、ページのリロードを防ぎます（e.preventDefault()）。

  let age = parseInt(form.elements.inputNumber.value, 10);

フォーム内の inputNumber に入力された値を数値として取得。

  if (isNaN(age)) {
    message.textContent = '正しい年齢を入力してください';
    return;
  }

数値でない場合（空欄や文字など）は警告メッセージを表示して処理を終了。

この if 文は、年齢が数字でないときのためのチェックですが、実際には type="number" と required があるので、普通に使っていればこの分岐に入ることはありません。念のために書いてあります。

  const result = makeMessage(age);
  ageInfo.textContent = `${age}歳ですね`;
  resultMessage.textContent = result;

年齢と判定結果を画面に表示します。

  clearBtn.classList.remove('hide');

「クリア」ボタンを表示します（初期状態では .hide により非表示）。

✅ クリアボタンの処理

clearBtn.addEventListener('click', function () {
  input.value = '';
  ageInfo.textContent = '';
  resultMessage.textContent = '';
  this.classList.add('hide');
});