【初心者】簡単!vue.jsで電卓の作り方【サンプル】

アイキャッチ 猫JavaScript
スポンサーリンク

前回はJavaScriptで電卓を作成しました。
今回は前回作成した電卓を元にvue.jsに書き換えしてみましょう。

前回の記事はこちらから!

スポンサーリンク

はじめに

まずはじめに前回でも説明しましたが、電卓の機能を説明します。
その後、vue.jsに書き換える手順を説明します。

また、CSSに関しては前回の記事より変更がありませんので今回は割愛させていただきます。

電卓の機能

作る電卓の機能は次のとおりです。

  • 四則演算ができる
  • Cキーで初期化
  • =で計算した後
    数字の場合、初期化したあと数字入力
    演算子の場合、結果はそのまま使用
  • 最初のキーが”0”、”.”、”+-×/”の場合、
    あらかじめ0が入力されている前提で式に入力

完成イメージはこちらです。

スポンサーリンク

HTML

HTMLコードです。

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="icon" href="https://nyanblog2222.com/wp-content/themes/blogtemplate/images/favicon.ico">
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

<body>
  <div id="app">
    <h1 id="header">電卓</h1>
    <div id="calc">
      <div>
        <input readonly v-model="result" type="text"><button v-on:click="c_click">C</button>
      </div>
      <div v-for="row in dataArrays">
        <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
      </div>
    </div>
  </div>
</body>

vue.jsの設定 → CDNでの設定

<head>
  <meta charset="UTF-8">
  <title>電卓</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="script.js"></script>
</head>

今回vueを使用するため、6行目にheadタグにCDN設定を追加しました。

注意する点として、他のJavaScriptファイルを読み込む前にCDN設定するようにしてください。

また、vue.jsのインストールや最新環境のCDNの情報はこちらから確認してください♪

電卓の各ボタンをv-forで自動作成

<div v-for="row in dataArrays">
  <button v-for="column in row" v-on:click="btn_Click(column)">{{column}}</button>
</div>
// 電卓のボタン
dataArrays: [
  ["7", "8", "9", "÷"],
  ["4", "5", "6", "×"],
  ["1", "2", "3", "-"],
  ["0", ".", "=", "+"],
],

Cボタン以外はvueで自動生成させます。
ボタンの順番やデータはJavaScript側で記述します。

divタグはデータ1行単位でforを回し、buttonタグは1項目(1データ)単位で回しています。

みみねこ
みみねこ

dataArrayと完成イメージ図を見比べると分かりやすいと思います!

クリックイベント書き換え

クリックイベント「onclick」を「v-on:click」に置換します。

vue使用のためv-model、idの設定

inputタグのidを設定していましたが、v-modelでの設定に変更。
divのid=”app”を設定。

スポンサーリンク

JavaScript

こちらがJavaScriptのコードです。

scriptファイルを分けているので、「window.onload」でhtmlの読み込みが終わってから実行するようにしています。

window.onload = function () {
  new Vue({
    el: '#app',
    data: {
      result: "0",
      is_calc: false,
      dataArrays: [
        ["7", "8", "9", "÷"],
        ["4", "5", "6", "×"],
        ["1", "2", "3", "-"],
        ["0", ".", "=", "+"],
      ],
      operators_list: ["÷", "×", "-", "+"  ],
    },
    methods: {
      c_click: function () {
        this.result = "0";
        this.is_calc = false;
      },
      btn_Click: function (val) {
        if (this.operators_list.includes(val)) {
          this.ope_click(val);
        } else if (val === "=") {
          this.equal_click();
        } else {
          this.num_click(val);
        }
      },
      num_click: function (val) {
        if (this.is_calc) this.result = "0";
        this.is_calc = false;

        if (this.result == "0" && val == "0") {
          this.result = "0";
        } else if (this.result == "0" && val == ".") {
          this.result = "0.";
        } else if (this.result == "0") {
          this.result = val;
        } else {
          this.result += val;
        }
      },
      ope_click: function (val) {
        if (this.is_calc) this.is_calc = false;

        if (this.is_ope_last()) {
          this.result = this.result.slice(0, -1) + val;
        } else {
          this.result += val;
        }
      },
      equal_click: function () {
        if (this.is_ope_last()) this.result = this.result.slice(0, -1);

        var temp = new Function("return " + this.result.replaceAll("×", "*").replaceAll("÷", "/"))();
        if (temp == Infinity || Number.isNaN(temp)) {
          this.result = "Error";
        } else {
          this.result = temp;
          this.is_calc = true;
        }
      },
      is_ope_last: function () {
        return this.operators_list.includes(this.result.toString().slice(-1));
      },
    },
  });
};
スポンサーリンク

デモ

こちらがデモページになります。
電卓が表示され、ボタンを押すと実際に計算ができるのでぜひ試してみてください♪

スポンサーリンク

最後に

いかがでしたでしょうか。vue.jsも主流になっていますので使いこなしていきたいですね!

良ければ別のサンプルページも見てみてくださいね♪

タイトルとURLをコピーしました