# Vue.js + Bootstrapで小銭計算プログラムを作ろうというYoutubeビデオを見ながらコードを書いてみた

仕事も人生と同じで調子がイイ時もあれば、我慢が必要な時もある。もうイイ歳なので、その辺のコントロールは上手く出来るはずなんだけど、ちょっとそりゃないよ、、って思うこともある。そんな時、お酒に頼るのではなく、プログラムを書くっていうのも良いのかもしれない。

👇は僕にとって、素敵な癒やしな時間となりました。たにぐちまこと(@seltzer)さん、ありがとうございましたmm

# 小銭を計算するプログラムをHTMLファイル1つで

VS Codeを使うと ht とかって入力すると html:5 が補完される。これを使ってビヤっと生成されたものを使う。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

langをjaに書き換え。でもって、見た目をBootstrapで整えていくので、CDNにあるスタイルシートのURLを取得してheadに追加しつつ、タイトル変えたりするとheadタグまでのところは👇こんな風になる。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小銭の計算</title>
  <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">
</head>

# Vue.jsもCDNからロード

👇のスクリプトタグをbodyの閉じタグの上に置いてあげるだけ。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

# 画面表示部分

画面表示のメインのところのHTMLは👇こんな感じ。

スタイルシートのcolとoffsetを使って表組み的なヤツをアレしつつ、 inputに数値型を入力するようにして、計算ボタンがクリックされるとcalc()というファンクションが呼ばれる。入力された値はv-modelで取得する。

それぞれの硬貨の隣にあるのはVue.jsで計算された結果を表示するためのもので、カッコが2つ並んでるので囲むのはマスタッシュ(👨🏻←こんなヒゲ)と呼ばれる記法。

  <div id="app" class="container">
    <div class="col-8 offset-2">
      <h1 class="mt-5">小銭の計算</h1>

      <div>
        <p>いくら？</p>
        <p><input type="number" name="price" v-model="price"><button v-on:click="calc()">計算</button></p>
      </div>

      <div class="row">
        <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>
      </div>
    </div>
  </div>

# 計算ロジック部分

上記でロードしたVue.jsのscriptの下に👇のscriptタグおよびJavaScriptを書いていく。

el(Elementの略語だと思う)は、div id="app"に描画しますよ、という設定で、dataの中は初期値としてそれぞれの硬貨およびinputを0円にしている。

methodsの中でcalc()ファンクションの実装をしている。(あ、dataとかmethodsってのもel同様にVue.jsの機構です)

Math.floorは割れなかった部分は切り捨ててくれるので、入力されたprice(最初にchangeに代入)の値を一番大きい硬貨の500円で割って、割り切れた分を枚数として計上して、今度は%で割った余り(つまり割り切れた分が差し引かれたヤツ)をchangeに再代入。次に二番目に大きい硬貨の100円で割って、、っていうのを繰り返していって、5円で割ったら、最後はその余りを1円の枚数にする、と。

なんていうか、バババッとコピペして、数字だけちょっと変えたりする作業が没頭できて、他のことを考えなくて良くて心地よいこと、この上ない。

<script>
  var app = new Vue({
    el: '#app',
    data: {
      price: 0,
      yen500: 0,
      yen100: 0,
      yen50: 0,
      yen10: 0,
      yen5: 0,
      yen1: 0
    },
    methods: {
      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;
      }
    }
  })
</script>

# 最終的な成果物

879と入力して、計算ボタンを押すと、

500円が1枚
100円が3枚
50円が1枚
10円が2枚
1円が4枚。

output

あぁ、、コンピューターは入力した通りに動いてくれて素晴らしい。。。

とか思ってしまうの、やっぱり病んでるのかもなぁ…笑

Algolia検索からの流入のみConversionボタン表示

小銭を計算するプログラムをHTMLファイル1つで