とりあえず､reactとvueで同じものを作って見比べてみる｡(足し算機 編)

下記のサイトを参考に足し算機をvueとreactの両方で作ってみた｡

https://tech.e3factory.com/programming/2586

### 結構大事な追記
`jsconfig.json`を使って絶対パスを使っていることを説明し忘れていました｡
混乱させてしまった方はすみません

コメント欄で`@honey32`さんが補足してくださっているのでそちらもご覧ください

# どういうものか軽く説明
2つのテキストボックスに数字を入れて､足し算して計算結果を表示するだけ

# 前置き
* 元サイトは､reactのチュートリアルみたいなものなので､vueは自分で考えた
* 元サイトでは､reactはクラス型で書いていたが､筆者の練習も兼ねて関数型で書いてみた｡
* 元サイトでは1つのファイルにすべてまとめてあるが､1コンポーネントにつき1ファイルに分けてみた｡
* Vueは``Option Api``方式で書く
* どちらもvscodeで編集
* どちらも`jsconfig.json`をつかって絶対パスを使ってコーディング

* reactは`create-react-app`
* vueは`npm init vue@latest`コマンドを使用

※ 自分向けのメモなので、細かいところは省略しますがご容赦ください。

### 筆者のスペック
react:1週間前から触り始めた
vue:触り初めてからもうすぐ1年になる

# react
[デプロイ先](https://s19013.github.io/simple-math-react/)
## 構成
┣Components
&emsp;┣ValueAnswer.js
&emsp;┣ValueInput.js
┣App.js
┣index.js
## コード
### App.js
大体以下のような動きをする
* 計算
* 他のコンポーネントを表示させる
* コンポーネント同士の仲介役

```javascript:App.js
import './App.css';
import ValueInput from './Components/ValueInput';
import ValueAnswer from './Components/ValueAnswer';
import { useState,React } from 'react';

function App() {
  const [value1,setValue1] = useState(0)
  const [value2,setValue2] = useState(0)
  const [answer,setAnswer] = useState(0)

  // 子からデータを受け取り計算をして更新
  function changeValue1(newValue) {
    let ans = parseInt(newValue) + parseInt(value2)
    setValue1(newValue);
    setAnswer(ans)
  }

  // 子からデータを受け取り計算をして更新
  function changeValue2(newValue) {
    let ans = parseInt(value1) + parseInt(newValue)
    setValue2(newValue);
    setAnswer(ans)
  }

  return (
    <div className="App">
      <ValueInput value={value1} valueChange={changeValue1}/>
      + <ValueInput value={value2} valueChange={changeValue2}/>
      = <ValueAnswer value={answer}/>
    </div>
  );
}

export default App;
```
### ValueInput.js
入力を受け取る
```javascript:ValueInput.js
export default function ValueInput({value,valueChange}) {
    function handleChange(e){
        // ここで親の関数を動かしてるみたいな? 渡された関数の元を参照してるみたいな?
        valueChange(e.target.value)
    }

    return (
        <input type="text" value={value} onChange={handleChange}></input>
    )
}
```

### ValueAnswer.js
受け取った答えを表示する
```javascript:ValueAnswer.js
export default function ValueAnswer({value}) {
    return (
        <span>{value}</span>
    )
}
```

# vue
[デプロイ先](https://s19013.github.io/simple-math-vue/)
## 構成
┣Components
&emsp;┣ValueAnswer.vue
&emsp;┣ValueInput.vue
┣App.js
┣main.js
## コード
### App.vue
大体以下のような動きをする
* 計算
* 他のコンポーネントを表示させる
* コンポーネント同士の仲介役
```vue:App.vue
<template >
  <div class="main">
    <ValueInput @changeValue = "changeValue1"/>     <!-- 子のchangeValueと親のchangeValue1を紐付ける -->
    + <ValueInput @changeValue ="changeValue2"/>
    = <ValueAnswer :value="answer"/>
  </div>
</template>

<script>
import ValueInput from './components/ValueInput.vue';
import ValueAnswer from './components/ValueAnswer.vue';
export default {
  data() {
    return {
      value1:0,
      value2:0,
      answer:0,
    }
  },
  components:{
    ValueInput,
    ValueAnswer,
    ValueInput
  },
  methods: {
    changeValue1({newValue}){
      let ans = parseInt(newValue) + parseInt(this.value2)
      this.value1 = newValue
      this.answer = ans
    },
    changeValue2({newValue}){
      let ans = parseInt(this.value1) + parseInt(newValue)
      this.value2 = newValue
      this.answer = ans
    }
  },
}
</script>

<style lang="scss" scoped>
// vueではなぜか改行するからflex
.main{
  display: flex;
}
</style>
```

### ValueInput.vue
入力を受け取る
```vue:ValueInput.vue
<template>
  <div>
    <input type="number" v-model="value"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
        value:0
    }
  },
  watch:{
    // 親にデータを渡す
    value:function(newValue){
        this.$emit('changeValue',{newValue:newValue})
    }
  },
}
</script>
```

### ValueAnswer.vue
受け取った答えを表示する
```vue:ValueAnswer.vue
<template>
  <div>
    <span>{{ value }}</span>
  </div>
  
</template>

<script>
export default {
  data() {
    return {
        
    }
  },
  props:{
    value:{
        type:Number,
        default:0
    }
  },
}
</script>
```

# 感想,気になること,気づいたこと
* そもそも､全体的に書き方が大きく異なる
* reactはコードエディター内で改行しても､コンポーネントが改行されなかったのに､vueだと改行した｡(おそらくコマンドで作った時のcssの設定によるものだと思う)
* vscodeで編集している時にreactでは､htmlタグを入力しても候補が表示されない(私の設定の問題の可能性もある)
* 感情的な話になるが､`return()`の中にhtml書くのあまり好みではない｡
* 個人としてはvueの方が書きやすい気がする｡

#### 親コンポーネントに情報を渡すという動きで大きく異なる
##### react
親から子に関数を渡す
子は親から渡された関数に対して引数を入れるなどの行動を起こす
##### vue
`emit`で子が親に対してを関数を作る
親は子から渡された関数と親自身が持っている関数を紐付ける

# 駄文のコーナー
## vueを最初に触った理由
｢reactとvueだとvueの方が簡単｣と聞いたから
｢一度vueになれていればスムーズにreactに移行できるようになる｣と聞いたから
行きたい会社がvueを採用していた

## reactも触り始めた理由
やはり､vueよりもreactを採用している会社の方が圧倒的に多いから
vueを採用している会社を探すのが難しい程
面接で｢vueで書いています｣｢reactはまだ触ったこと無いです｣といったら､面接官の表情が少し嫌そうだったことがあり｡｢reactをかける人の方が企業側としては価値があるのかな｣と考え､自分の価値を上げるためにも勉強しようと思った｡