Vue3＋Vuetify3で電卓を作る

やったこと

仕事でVue+Vuetifyを使った経験があるので、@pagu_dayo (ぱぐ) さんが投稿された「Reactで電卓を作る」を移植してみました。
オンラインで動作確認できます。

準備

自分のPCで動作させたい場合は、Node.jsとnpmをインストールして vuetify プロジェクトを create しておきます。

src/App.vue などが自動生成されます。

実装コード

コンポーネント指向設計的には電卓コンポーネントを再利用できるように src/components 配下に作成して src/App.vue から inport して使うのですが、今回はReactと比較できるように src/App.vue に直接書いてみました。

App.vue

<template>
  <v-app class="App">
    <v-main>
      <h1>Dentaku!!!</h1>
      <p class="string-box">{{ result }}</p>
      <div class="column-box">
        <div class="row-box">
          <v-btn class="normal" text="7" @click="operate" />
          <v-btn class="normal" text="8" @click="operate" />
          <v-btn class="normal" text="9" @click="operate" />
          <v-btn class="normal" text="*" @click="operate" />
        </div>
        <div class="row-box">
          <v-btn class="normal" text="4" @click="operate" />
          <v-btn class="normal" text="5" @click="operate" />
          <v-btn class="normal" text="6" @click="operate" />
          <v-btn class="normal" text="-" @click="operate" />
        </div>
        <div class="row-box">
          <v-btn class="normal" text="1" @click="operate" />
          <v-btn class="normal" text="2" @click="operate" />
          <v-btn class="normal" text="3" @click="operate" />
          <v-btn class="normal" text="+" @click="operate" />
        </div>
        <div class="row-box">
          <v-btn class="normal" text="0" @click="operate" />
          <v-btn class="normal" text="." @click="operate" />
          <v-btn class="normal" text="/" @click="operate" />
          <v-btn class="normal" text="=" @click="calculate" />
        </div>
        <div class="row-box">
          <v-btn class="reset-button" text="Reset" @click="reset" />
        </div>
      </div>
    </v-main>
  </v-app>
</template>

<script setup>
  import { ref } from "vue";
  const result = ref("");
  const operate = ({ target }) => {
    result.value += target.textContent;
  };
  const calculate = () => {
    try {
      result.value = eval(result.value);
    } catch (error) {
      result.value = "Error!";
    }
  };
  const reset = () => {
    result.value = "";
  };
</script>

<style>
.App {
  text-align: center;
}

.column-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.row-box {
  display: flex;
  align-items: center;
  margin: 5px;
}

div.row-box > button.normal {
  width: 50px;
  height: 50px;
  margin: 1px;
  font-size: large;
}

.reset-button {
  width: 100px;
  height: 50px;
  margin: 1px;
  font-size: large;
}

.string-box {
  background-color: lavender;
  margin: 10px;
  border: 1px solid;
  border-radius: 5px;
  padding: 20px;
  display: inline-block;
  min-width: 180px;
}
</style>

終わりに

cssも同じファイルに<style>で書けて1ファイルで済ませられるのがいいですね。