Zenn
🧑‍💻

Vue.jsでの書き方はReact.jsではどう書くのか？

2022/06/23に公開
JavaScript
React
Vue.js
tech

はじめに

この記事はVue.jsを触ってる人がReact.jsを触るときにVue.jsで言うと所のどれになるんだ？という疑問に答える記事になります。
現在（2022年）のフロントエンドの代表格でよく挙げられるのが、Vue.jsとReact.jsではないかと思います。
最近ではVue.jsもVue3とバージョンが変わり、書き方も大きく変わってきました。
今回は、Vue.jsで書くことはReact.jsではどうかくのか？という比較を記載していきます。

前提条件

Vue.jsとReact.jsのバージョンはそれぞれになります。
また、どちらもJavascriptでの記述となります。

Vue.js:2.6.x (.vue)
React.js:18.2.x (.jsx)

methods

vue.js
<script>
export default {
  methods: {
    plus: function () {
      ...
    }
  }
}
...
</script>
React.js
const App() {
  const plus = () =>{
    ...
  }
}
export default App;

data

状態の管理

vue.js
<script>
export default {
  data(){
    return {
      name : "John",
    }
  }
}
...
</script>
React.js
const App() {
  const [name, setName] = React.useState("John");
}
export default App;

状態の操作

vue.js
methods: {
    exapmle: function () {
      this.name = "Risa";
    }
  }
React.js
const App() {
  const exaple = () =>{
    setName("Risa");
  }
}

props

vue.js
<script>
export default {
  props : {
    age : {
      type : Number,
      default : 24
    }
  }
}
...
</script>
React.js
const App(props) {
  const {age} = props;
}
export default App;

//または
const App({age}) {
}
export default App;

watch

vue.js
<script>
...
watch: {
  name : function(){
    ...
  }
}
</script>
React.js

const App() {
  ...
  useEffect(()=>{
    ...
  },[name])
  ...
}
export default App;

template

vue.js
<template>
  <div>
    <p>Hello</p>
  </div>
</template>
<script>
...
</script>
React.js

const App() {
  ...
  return (
  <div>
    <p>Hello</p>
  </div>
  );
}
export default App;

リテラル記法

vue.js
<template>
  <div>
    <p>{{ name }}</p>
  </div>
</template>
<script>
...
</script>
React.js
const App() {
  ...
  return (
  <div>
    <p>{ name }</p>
  </div>
  );
}
export default App;

v-model

vue.js
<template>
  <input v-model="message">
</template>
React.js
const App() {
  return (
  <div>
    <input value={message} onChange={(e) => setMessaaga(e.target.value)}>
  </div>
  );
}
export default App;

v-show

vue.js
<template>
  <div v-show="flag" >
    <p>Hello</p>
  </div>
</template>
React.js
//🚨JSX内で if は使えない
const App() {
  return (
    ...
    { flag ? <p>Hello</p> : null }
  );
}
export default App;

//または
const App() {
  const [Hello, setHello] =  useState(null); 
  const example = () =>{
   if(flag){
     setHello(<p>Hello</p>);
     return;
   }
   setHello(<p>Hello</p>);
  }
  return (
    ...
    { Hello }
  );
}
export default App;

v-for

vue.js
<template>
    ...
  <div v-show="flag" >
    <p v-for="item in items" :key="item.id">{{ item.value }}</p>
  </div>
</template>
React.js
//🚨JSX内で for は使えない
const App() {
  return (
    ...
    { items.map((item)=><p key={item.id}>{item.value}</p>) }
  );
}
export default App;

さいごに

これくらいあれば、対応はできるかな。

Discussion