この記事は、プロモーションを含みます。
こんにちは！今回は、JavaScriptを使って「自動販売機」を動かせるようにしていきましょう。
待ってました！
これで僕もWebアプリのプログラマーだ！
それはちょっと気が早すぎるんだけどなぁ～。
それでは、実際に作っていきましょう。
この記事で学べること
- ボタンクリック時のイベント処理の作り方
- ソースコードの共通化
- 入力項目への値の変更方法
入金額に入力してみよう
「JavaScriptで自動販売機を作る方法①」で作成した「vendingMachine_tmp.html」をダブルクリックで開いてください。
「お金を入れてください：」というラベルの下に入力欄があるので、「1000」という数字を入力してください。
HTMLのinputタグを作成することで、処理フローの「お金を入れる」を作ることが出来ています。
ボタンを押した時の処理を作ろう
次に、処理フローの2つ目「商品を選ぶ」を作っていきます。
HTMLファイルのbuttonタグを以下のように編集してください。
また、</body>タグの直前に、対象のJavaScriptファイルを呼び出す処理を追記してください。
<body>
<div class="vending-machine">
<h2>もふもふ自動販売機</h2>
<div class="money-input">
<label for="money">お金を入れてください：</label><br>
<input type="number" id="money" placeholder="例：200" />
</div>
<div class="juice">
<div class="juice-name">いちごソーダ - 150円</div>
<button onclick="ichigoSoda()">購入</button>
</div>
<div class="juice">
<div class="juice-name">ももジュース - 130円</div>
<button onclick="momoJuice()">購入</button>
</div>
<div class="juice">
<div class="juice-name">ミルクティー - 100円</div>
<button onclick="milkTea()">購入</button>
</div>
<p id="message"></p>
</div>
<!-- ↓外部JavaScriptファイルを読み込む処理を追記 -->
<script src="vendingMachine.js"></script>
</body>イベント処理について
buttonタグの「onclick」属性は、Webアプリの画面上からボタンがクリックされた時に呼ばれる処理を記載します。
そのため、今回追加した処理は「いちごソーダ」「ももジュース」「ミルクティー」の購入ボタンがクリックされた時の処理を呼び出していることになります。
次に、JavaScriptファイルに処理を記述しましょう。
JavaScriptファイルの作成
HTMLファイルを作成したフォルダに、「vendingMachine.js」というファイルを作成してください。
「vendingMachine.js」を右クリックして、メモ帳から開いてください。
メモ帳が開いたら下のソースコードを貼り付けて保存しましょう。
/** いちごソーダの購入ボタンをクリックされた時の処理 **/
function ichigoSoda() {
alert(`いちごソーダ：150円を購入しました♪`);
}
/** ももジュースの購入ボタンをクリックされた時の処理 **/
function momoJuice() {
alert(`ももジュース：130円を購入しました♪`);
}
/** ミルクティーの購入ボタンをクリックされた時の処理 **/
function milkTea() {
alert(`ミルクティー：100円を購入しました♪`);
}これで、ボタンをクリックすると、購入メッセージが表示されるようになりました。
alert()という関数が、()の中の文字列をブラウザのメッセージボックスに表示する処理になります。
購入ボタンの処理の確認
「vendingMachine_tmp.html」をダブルクリックして自動販売機を表示させてください。
好きなジュースの購入ボタンをクリックすると、画面の上部に画像のようなメッセージが表示されると思います。画像は「いちごソーダ」の購入ボタンを押した時のメッセージです。
入金額を減らしてみよう
これで、前回作成した処理フローの「お金を入れる」「商品を選ぶ」そして、メッセージボックスの表示によってどのジュースが購入されたか分かるようになったので、「商品を受け取る」が出来ました。
しかし、自動販売機では商品を購入したら入れたお金が減っていきます。
そこで、処理フローに「入金額を減らす」を追加し、入金額から購入した商品の金額を減らしていく処理を追加しましょう。
処理の追加
「vendingMachine.js」を以下のように修正してください。
/** いちごソーダの購入ボタンをクリックされた時の処理 **/
function ichigoSoda() {
const moneyInput = document.getElementById('money');
let zankin = moneyInput.value - 150;
moneyInput.value = zankin;
alert(`いちごソーダ：150円を購入しました♪`);
}
/** ももジュースの購入ボタンをクリックされた時の処理 **/
function momoJuice() {
const moneyInput = document.getElementById('money');
let zankin = moneyInput.value - 130;
moneyInput.value = zankin;
alert(`ももジュース：130円を購入しました♪`);
}
/** ミルクティーの購入ボタンをクリックされた時の処理 **/
function milkTea() {
const moneyInput = document.getElementById('money');
let zankin = moneyInput.value - 100;
moneyInput.value = zankin;
alert(`ミルクティー：100円を購入しました♪`);
}入金額の取得
const moneyInput = document.getElementById('money');これは、HTMLのid=’money'(入金額)のオブジェクトを取得して、「moneyInput」という変数に格納している処理になります。取得したオブジェクトは、処理の中で変更することはないため、constという宣言を使用しています。
残金の計算処理
let zankin = moneyInput.value - 150;これは、入金額から購入金額を減算し、zankinという変数に格納する処理になります。
入金額のオブジェクトから入金額を取得するには「moneyInput.value」という使い方をします。
「いちごソーダ」であれば、入金額から150円を減算した金額をzankinという変数に入れます。
zankinはconstではなく、letという宣言をしていますが、こちらは今後zankinに対して更に別の計算処理が行われる可能性を考慮してつけていますので、再代入がなければ const にしても構いません。
入金額の表示変更
moneyInput.value = zankin;これは、入金額に残金を格納している処理になります。
この処理を行うことで、入金額の表示を変更することが出来ます。
動作確認
入金額に「1000」を入力し、「いちごソーダ」の購入ボタンをクリックしてください。
メッセージボックスが表示された後に、OKボタンをクリックし、入金額が「850」に変わっていれば成功です。
保守性が低いコード
ここまで、ボタンをクリックした時の処理と入金額を変更する処理を作成しました。
しかし、JavaScriptの関数を見てみると、各ジュースごとに処理を分けていますが、実際に異なるのは「商品名」と「価格」だけです。
もし今後、メッセージの表示形式を変更する必要が出てきた場合、3か所で修正をする必要があります。現在は商品が3つですが、これが20個もあれば修正が面倒です。
このような状態のソースコードをIT業界では「保守性が低い」と表現します。
では、どのようにすれば「保守性が高い」ソースコードになるのでしょうか？
それは、同じような処理を1つにまとめる「共通化」という作業になります。
共通化の方法
JavaScriptの共通化
JavaScriptのコードは、以下のように共通化します。
/** ジュースの購入ボタンをクリックされた時の処理 **/
function buyJuice(name, price) {
const moneyInput = document.getElementById('money');
let zankin = moneyInput.value - price;
moneyInput.value = zankin;
alert(`${name}：${price}円を購入しました♪`);
}共通化した部分を説明していきます。
function buyJuice(name, price)共通化した関数名を「buyJuice」に変更しました。どの商品の購入ボタンをクリックしても、この関数を呼び出すようにします。
また、引数にname(商品名)と、price(価格)を受け取るようにしました。この2つを受け取ることで、購入された商品と価格を把握することが出来ます。
alert(`${name}：${price}円を購入しました♪`);文字列の中にnameやpriceの変数を入れるためには、${変数名}という書き方をします。
変数だけを使うのであれば、nameだけで大丈夫です。
HTMLの編集
JavaScriptの関数名を変更しましたので、ボタンをクリックされた時の処理を変更します。
<body>
<div class="vending-machine">
<h2>もふもふ自動販売機</h2>
<div class="money-input">
<label for="money">お金を入れてください：</label><br>
<input type="number" id="money" placeholder="例：200" />
</div>
<div class="juice">
<div class="juice-name">いちごソーダ - 150円</div>
<button onclick="buyJuice('いちごソーダ', 150)">購入</button>
</div>
<div class="juice">
<div class="juice-name">ももジュース - 130円</div>
<button onclick="buyJuice('ももジュース', 130)">購入</button>
</div>
<div class="juice">
<div class="juice-name">ミルクティー - 100円</div>
<button onclick="buyJuice('ミルクティー', 100)">購入</button>
</div>
<p id="message"></p>
</div>
<script src="vendingMachine.js"></script>
</body>buttonタグのonclickにJavaScriptの関数「buyJuice」を設定します。
第一引数には購入するジュースの名前、第二引数には購入するジュースの価格を設定します。
これで、ジュースを購入する処理に変更があれば、修正が1か所で済むため、保守性が向上します。
ちゃとらん君、
HTMLとJavaScriptの書き方や、紐づけ方は分かったかな？
分かりました！！
これで、処理フロー通りに動いたし、Webアプリは完成ですよね？
いやいや、まだ基本的な動きの処理が出来ただけだよ。
次回は、想定外の動きに対処する入力チェック等の処理を作っていくよ。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/478c5046.9232ee71.478c5047.d5fd6a20/?me_id=1285657&item_id=11875913&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbookfan%2Fcabinet%2F00798%2Fbk479739515x.jpg%3F_ex%3D128x128&s=128x128&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
コメント