ともすたmedia
680円は、500円玉が何枚で100円玉が何枚か。それを計算するプログラムを、前に Scratch 3.0で作りました。
今回は、そのプログラムを今度は JavaScript、特にここでは Vue.jsを使って作ってみましょう。
Bootstrapで HTMLを作ろう
まずは、HTMLファイルを作成して Bootstrapを CDNを使って取り込みます。
そしたら、次のようなHTMLを作りましょう。
<div class="container">
<div class="row">
<div class="col-8 offset-2">
<h1 class="mt-5">小銭の計算</h1>
<div>
<p>いくら?</p>
<p><input type="number" name="price"> <button>計算</button></p>
</div>
</div>
</div>
<div class="row">
<div class="col-4 offset-2">
500円:
</div>
<div class="col-4">
100円:
</div>
<div class="col-4 offset-2">
50円:
</div>
<div class="col-4">
10円:
</div>
<div class="col-4 offset-2">
5円:
</div>
<div class="col-4">
1円:
</div>
</div>
</div>
Vue.jsを組み込もう
続いて、Vue.jsをこちらも CDNで読み込みましょう。基本のプログラムも直後にコピペします。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
そしたら、class="container"
を指定した<div>
要素に、id="app"
と指定して、Vue.jsを使えるようにします。
<div id="app"class="container">
dataを定義しよう
続いて、各コインの枚数を管理するための変数をdata
定義内に定義します。
data: {
yen500: 0,
yen100: 0,
yen50: 0,
yen10: 0,
yen5: 0,
yen1: 0
},
そして、HTML側にはこのデータを表示するためのプレースホルダーを設定しましょう。
<div class="col-4 offset-2">
500円: {{ yen500 }}
</div>
<div class="col-4">
100円: {{ yen100 }}
</div>
<div class="col-4 offset-2">
50円: {{ yen50 }}
</div>
<div class="col-4">
10円: {{ yen10 }}
</div>
<div class="col-4 offset-2">
5円: {{ yen5 }}
</div>
<div class="col-4">
1円: {{ yen1 }}
</div>
ボタンのクリックに反応しよう
Vue.jsでボタンのクリックに反応するにはv-on
を使います。次のように属性を追加しましょう。
<button v-on:click="calc()">計算</button>
そして、メソッドを実装します。data
定義の下に記述しましょう。
methods: {
calc: function(event) {
}
}
テキストフィールドの内容を取得しよう
Vue.jsでテキストフィールドの内容を取得するには、v-model
を利用します。
<input type="number" name="price" v-model="price">
そして、price
というプロパティを data
内で宣言しておきます。
data: {
price: 0, // 追加
yen500: 0,
後は、これを使って計算すれば完了です。完成したプログラムは次のようになります。
calc: function(event) {
change = this.price;
this.yen500 = Math.floor(change / 500);
change %= 500;
this.yen100 = Math.floor(change / 100);
change %= 100;
this.yen50 = Math.floor(change / 50);
change %= 50;
this.yen10 = Math.floor(change / 10);
change %= 10;
this.yen5 = Math.floor(change / 5);
this.yen1 = change % 5;
}
入力された値段を、500で割って小数を切り捨てた数が、500円玉の枚数。500で割った余りが残りの金額となり、それを 100で割って小数を切り捨てたものが 100円玉になるという具合。Vue.jsの場合は、プロパティに値を設定すればそのまま画面に表示されます。便利です。
プログラム全文は、こちらから。