【Vue】eval電卓

# 概要
Vue.jsの入門として、何か作ってみたいという人向けです。
まず、通常のjsでeval電卓を作成し、Vue.jsを使って抽象化していきます。

# 実装

以下のような電卓を、最小構成で実装する。
`index.html`の`onClick`イベントにより、`calc`関数が呼ばれ、
クリックされたボタンに応じた処理をします。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/320365/e78b7580-4af2-2caf-404b-7c7ec8915651.png)

## 通常のjsの場合
`button`タグの羅列が冗長であることが確認できる。

とりあえず、動かしたい人は、cloneして下さい。

```sh:clone
git clone https://github.com/Naoto92X82V99/calc.git
```

```index.html
<html>
    <head>
        <meta charset ="utf-8">
        <script src="script.js"></script>
    </head>
    <body>
        <table id="calcTable">
            <tr>
                <td colspan="3"><input type="text" id="output" value="0"></td>
                <td><button value="C" onClick="calc('C')">C</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('7')">7</button></td>
                <td><button onClick="calc('8')">8</button></td>
                <td><button onClick="calc('9')">9</button></td>
                <td><button onClick="calc('/')">/</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('4')">4</button></td>
                <td><button onClick="calc('5')">5</button></td>
                <td><button onClick="calc('6')">6</button></td>
                <td><button onClick="calc('*')">*</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('1')">1</button></td>
                <td><button onClick="calc('2')">2</button></td>
                <td><button onClick="calc('3')">3</button></td>
                <td><button onClick="calc('-')">-</button></td>
            </tr>
            <tr>
                <td><button onClick="calc('0')">0</button></td>
                <td><button onClick="calc('.')">.</button></td>
                <td><button onClick="calc('+')">+</button></td>
                <td><button onClick="calc('=')">=</button></td>
            </tr>
        </table>
    </body>
</html>
```

```js:script.js
function calc(cmd){
    const element = document.getElementById('output')
    const value = element.value

    if(cmd === '='){
        element.value  = eval(value)
    }else if(cmd === 'C'){
        element.value = '0'
    }else if(value === '0') {
        element.value = cmd
    }else{
        element.value += cmd
    }
}
```

## Vue.jsの場合
上記実装において、`button`タグの羅列が冗長であるため、Vue.jsで書き直してみる。
v-forを使うことで、繰り返し処理を記述できる。

とりあえず、動かしたい人は、cloneして下さい。

```sh:clone
git clone https://github.com/Naoto92X82V99/vue-calc.git
```

```html:index.html
<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <table id="app">
            <tr>
                <td colspan="3"><input type="text" v-model="output"></td>
                <td><button value="C" v-on:click="calc('C')">C</button></td>
            </tr>
            <tr v-for="row in items">
                <td v-for="item in row">
                    <button v-on:click="calc(item)">{{ item }}</button>
                </td>
            </tr>
        </table>

        <script src="script.js"></script>
    </body>
</html>
```

```js:script.js
var app = new Vue({ 
    el: '#app',
    data: {
        output: '0',
        items: [
            ['7', '8', '9', '/'],
            ['4', '5', '6', '*'],
            ['1', '2', '3', '-'],
            ['0', '.', '+', '=']
        ]
    },
    methods: {
        calc: function (cmd) {
            if(cmd === '='){
                this.output = eval(this.output)
            }else if(cmd === 'C'){
                this.output = '0'
            }else if(this.output === '0') {
                this.output = cmd
            }else{
                this.output += cmd
            }
        }
    }
})
```

# まとめ
Vue.jsを用いて、最小構成でeval電卓を実装しました。
間違い・指摘等があればコメントお願いします。

# 参考文献
- [はじめに — Vue.js](https://jp.vuejs.org/v2/guide/index.html)
- [【Javascript】簡易電卓を短いコードで作ってみた](https://algorithm.joho.info/programming/javascript/simple-calculator/)