JavaScriptで自動販売機を作る方法③｜初心者向けWebアプリ作成

この記事は、プロモーションを含みます。

この記事で学べること

• テキストボックスでの入力制限(上限、下限)
• 条件分岐での入力チェック

入金額に入力制限を設定しよう

現状はどうなっているの？

入金額を入力するテキストボックスは、数値のみ入力できるようになっていますがその値は制限されていません。
「99999」という大きい金額も入力できますし、「-1000」といった自動販売機では使わないマイナス金額まで入力できてしまいます。

このままでは、自動販売機が予期せぬ動作をしてしまう可能性があるため、運用上使わないような値は事前に使われないようにすることが大事です。

「入力制限」を処理フローに追加してみよう

今回追加する処理フローの内容は以下の2つになります。

• 入金額が0より小さければ「お金を入力する」に戻る
• 入金額が1000より大きければ「お金を入力する」に戻る

処理フローの図は画像のようになります。

ひし形◇の図形は処理の分岐を表しています。例えば、「入金額<0」は「入金額は0より小さい」という条件を表していて、図形の右側には「Yes」つまり条件を満たした時に矢印の方向に進むという意味です。
また、図形の下側の「No」は、条件を満たさない時に進む矢印になります。

HTMLの修正

入金額のinputタグに下限と上限の値を設定します。HTMLを以下のように修正してください。

<div class="money-input">
    <label for="money">お金を入れてください：</label><br>
    <input type="number" id="money" placeholder="例：200" min=0 max=1000 />
</div>

inputタグの中の、min=0が下限値、max=1000が上限値を設定しています。

動きを見てみよう

では、入金額に0を入力し、右側の▼ボタンをクリックしてください。
金額がマイナスにならなくなりました。

次に、入金額に1000を入力し、右側の▲ボタンをクリックしてください。
金額が1001以上にならなくなりました。

JavaScriptの修正

今度は、規定値を外れた入力がある場合、入金額の値を消してエラーメッセージを表示させます。
JavaScriptのbuyJuice関数の下に以下のコードを追加してください。

/** 入力金額チェック（0未満・1000超え） **/
document.addEventListener('DOMContentLoaded', function () {
  const moneyInput = document.getElementById('money');
  const message = document.getElementById('message');

  moneyInput.addEventListener('input', function () {
    const money = Number(moneyInput.value);

    if (money < 0) {
      message.textContent = "0円未満は入力できないよ。";
      moneyInput.value = ""
    } else if (money > 1000) {
      message.textContent = "1000円を超える金額は入力できないよ。";
      moneyInput.value = ""
    } else {
      message.textContent = "";
    }
  });
});

ソースコードの解説

document.addEventListener('DOMContentLoaded', function () { ... });

• ページが読み込まれてから処理をスタートするおまじない。
• HTMLが読み込まれる前にJSが動かないようにするための安全対策です。

const moneyInput = document.getElementById('money');

• id="money" のテキストボックスをJavaScriptで使えるように変数に入れています。

const message = document.getElementById('message');

• エラーメッセージを表示する場所（<p id="message">）を取得しています。

moneyInput.addEventListener('input', function () { ... });

• 入力欄に何か値が入力されるたびに、中の関数が呼ばれるようにします。
• input イベントは、リアルタイムに入力が変わった瞬間に反応します。

const money = Number(moneyInput.value);

• 入力された文字列を、数値（Number）に変換しています。
• 入力が「300」→ 数字の300になります。

if (money < 0) { ... }

• 0円未満だったら、「入力できないよ」と教えて、入力値を空にします。

else if (money > 1000) { ... }

• 1000円を超えていたら、同じようにメッセージを出して入力をリセットします。

else { message.textContent = ""; }

• それ以外（正常な金額）のときは、メッセージを消しておきます。

動きを見てみよう

入金額にそれぞれ金額をいれてメッセージを確認してみましょう。

• 「-1」と入力すると、「0円未満は入力できないよ。」
• 「1001」と入力すると、「1000円を超える金額は入力できないよ。」

金額が足りない時の処理を追加しよう

現状はどうなっているの？

入金額に「50」と入力し、いちごソーダの購入ボタンをクリックしてください。
購入メッセージの表示後、入金額が「-100」になっています。

入金額が商品の価格よりも少ないのに、商品が購入できてしまうのはおかしいので
商品が購入できないようにチェック処理を入れていきます。

「購入制限」を処理フローに追加してみよう

今回追加する処理フローの内容は以下の内容になります。

• 入金額が商品価格より小さければ「エラーメッセージを表示」

処理フローの図は画像のようになります。

入金額より商品価格が大きい場合、エラーメッセージを表示して処理の先頭に戻る処理を追加しています。この処理フローを実現するソースコードを追加していきましょう。

JavaScriptの追加

購入制限を行うための処理を追加してきます。関数buyJuice()の処理を修正してください。

/** ジュースの購入ボタンをクリックされた時の処理 **/
function buyJuice(name, price) {
  const moneyInput = document.getElementById('money');
  const message = document.getElementById('message');
  const money = Number(moneyInput.value);
  
  // 購入制限チェック
  if (money < price) {
    message.textContent = `ごめんね…あと ${price - money} 円たりないよ。`;
    return;
  }
  
  let zankin = moneyInput.value - price;
  moneyInput.value = zankin;
  alert(`${name}：${price}円を購入しました♪`);
}

ソースコードの解説

const message = document.getElementById('message');
const money = Number(moneyInput.value);

こちらは、入力制限の章で解説していますので説明を省きます。振り返りの為、内容が分からなければ入力制限で作成したコードの解説を確認してください。

if (money < price) {
  message.textContent = `ごめんね…あと ${price - money} 円たりないよ。`;
  return;
}

• 入金額が商品価格より小さかったら、「○○円たりないよ。」とメッセージを表示します。
• return;を使って関数内の処理を終了します。

動きを見てみよう

入金額に「50」を入力し、いちごソーダの購入ボタンをクリックしてください。
「100円足りないよ。」とメッセージが表示されていて、商品が購入できなかったら購入制限の実装が完了です。

本当によくわかるJavaScriptの教科書 はじめての人も、挫折した人も、基礎力が必ず身に付く／ENTACLGRAPHICXXX【1000円以上送料無料】 価格：2,178円（税込、送料無料) (2025/5/13時点)