【2022年版】Vue3の最新の書き方をReactと比較しながら学んでみた【script setup構文】

class Counter extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  increase() {
    this.setState({
      count: this.state.count + 1,
    })
  }

  render() {
    return (
      <div>
        <p>合計:{this.state.count}</p>
        <button onClick={() => this.increase()}>クリック</button>
      </div>
    )
  }
}

const Counter = () => {
  const [count, setCount] = React.useState(0)

  const increase = () => {
    setCount(count + 1)
  }

  return (
    <div>
      <p>合計:{count}</p>
      <button onClick={increase}>クリック</button>
    </div>
  )
}

<template>
  <div>
    <p>合計:{{count}}</p>
    <button @click="increase">
      クリック
    </button>
  </div>
</template>

<script>
import Vue from "vue";
export default Vue.extend({
  data() {
    return {
      count: 0;
    };
  },
  methods: {
    increase() {
      this.count++;
    }
  },
});
</script>

<template>
  <div>
    <p>合計:{{count}}</p>
    <button @click="increase">
      クリック
    </button>
  </div>
</template>

<script>
import {defineComponent, ref} from "vue";

export default defineComponent({
  setup() {
    const count = ref(0);

    const increase = () => {
      count.value++;
    };

    return {
      count,
      increase,
    };
  },
});
</script>

<script setup>
import {ref} from "vue";

const count = ref(0);

const increase = () => {
  count.value++;
};
</script>

<template>
  <div>
    <p>合計:{{count}}</p>
    <button @click="increase">
      クリック
    </button>
  </div>
</template>

npx create-react-app sample-app

npm init vue@3 sample-app

npx create-react-app sample-app --template typescript

npm init vue@3 sample-app

npm start

npm run dev

import Adder from "./components/Adder"
import "./App.css"

const App = () => {
  return (
    <div className="App">
      <header>
        <h1>足し算器</h1>
      </header>
      <main>
        <Adder />
      </main>
    </div>
  )
}

export default App

<script setup>
import Adder from './components/Adder.vue';
</script>

<template>
  <div className="App">
    <header>
      <h1>
        足し算器
      </h1>
    </header>
    <main>
      <Adder />
    </main>
  </div>
</template>

<style>
@import "./App.css";
</style>

import React, { useState } from "react"
import "./css/Adder.css"

const Adder = () => {
  const [sum, setSum] = useState(0)
  const [increase, setIncrease] = useState("1")

  const add = () => {
    const parsed = parseInt(increase)
    if (isNaN(parsed)) {
      alert("増加量には数字を入力してください")
    } else if (parsed < 0) {
      alert("増加量には0以上の値を入力してください")
    } else {
      setSum(sum + parsed)
    }
  }

  const reset = () => {
    setSum(0)
  }

  const changeIncrease = e => {
    const value = e.target.value
    const parsed = parseInt(value)
    // 空文字か0以上の数字のみ入力可
    if (value === "" || (!isNaN(parsed) && parsed >= 0)) {
      setIncrease(value)
    } else {
      alert("0以上の数字を入力してください")
    }
  }

  return (
    <div className="adder">
      <h2>合計：{sum}</h2>
      <p>
        増加量：
        <input type="number" value={increase} onChange={changeIncrease} />
      </p>
      <div className="buttons">
        <button onClick={add}>足す</button>
        <button onClick={reset}>リセット</button>
      </div>
    </div>
  )
}

export default Adder

<script setup>
import { ref } from 'vue';

const sum = ref(0);
const increase = ref('1');

const add = () => {
  const parsed = parseInt(increase.value);
  if (isNaN(parsed)) {
    alert('増加量には数字を入力してください');
  } else if (parsed < 0) {
    alert('増加量には0以上の値を入力してください');
  } else {
    sum.value += parsed;
  }
};

const reset = () => {
  sum.value = 0;
};

const changeIncrease = (e) => {
  const value = e.target.value;
  const parsed = parseInt(value);
  // 空文字か0以上の数字のみ入力可
  if (value === '' || (!isNaN(parsed) && parsed >= 0)) {
    increase.value = value;
  } else {
    alert('0以上の数字を入力してください');
  }
};
</script>

<template>
  <div className="adder">
    <h2>合計：{{sum}}</h2>
    <p>増加量：<input type="number" :value="increase" @input="changeIncrease"/></p>
    <div className="buttons">
      <button @click="add">足す</button>
      <button @click="reset">リセット</button>
    </div>
  </div>
</template>

<style>
@import './css/Adder.css';
</style>

"homepage": "https://(githubのユーザー名).github.io/sample-app",

npm install --save gh-pages

"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",

npm run deploy

export default defineConfig({
+ base: '/sample-app/',
  plugins: [vue()],

npm install --save gh-pages

"scripts": {
+   "deploy": "npm run build && gh-pages -d dist",
    "start": "react-scripts start",

npm run deploy