Vue.js+Bootstrapで小銭計算プログラムを作ろう

  • 投稿日
  • 更新日
  • 著者 ともすた
  • カテゴリー ブログ

680円は、500円玉が何枚で100円玉が何枚か。それを計算するプログラムを、前に Scratch 3.0で作りました。

今回は、そのプログラムを今度は JavaScript、特にここでは Vue.jsを使って作ってみましょう。

Bootstrapで HTMLを作ろう

まずは、HTMLファイルを作成して Bootstrapを CDNを使って取り込みます。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

そしたら、次のような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の場合は、プロパティに値を設定すればそのまま画面に表示されます。便利です。

プログラム全文は、こちらから。

JavaScript