Vue.jsとReactの書き方の違い

コンポーネントの定義

Vue.js

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style>
/* スタイルをここに記述 */
</style>

Vueでは、コンポーネントをtemplate, script, styleの3つのセクションに分けて定義する。
テンプレート部分でHTMLに似た構文を使用し、スクリプト部分でロジックを定義する。

React

import { useState } from 'react'

const Component = () => {
  const [text, setText] = useState('')
  return (
    <div>
      <p className="text">{text}</p>
    </div>
  )
}
export default Component

Reactでは、コンポーネントは基本的に関数またはクラスとして定義される。
JSX（JavaScript XML）を使用して、HTMLに似た記述をJavaScript内で行う。

データの管理

Vue.js

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Message Updated';
    }
  }
}
</script>

Vueでは、データはdataオプション内で定義され、テンプレート内で{{ }}を使用してバインドされる。データの変更は、通常メソッド内で直接行う。

React

import React, { useState } from 'react';

function MyComponent() {
  const [message, setMessage] = useState('Hello, React!');

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage('Message Updated')}>Update</button>
    </div>
  );
}

Reactでは、状態（State）はuseStateフックを使って管理する。
状態の変更は、setStateまたはuseStateから返される関数を使用して行う。

イベントのハンドリング

Vue.js

<button @click="handleClick">Click me</button>

Vueでは、イベントハンドラーは@を使って指定する。
例えば、＠clickがonClickに相当する。

React

<button onClick={handleClick}>Click me</button>

Reactでは、イベントハンドラーはキャメルケースで指定し、onClickやonChangeなどの属性で指定する。

コンポーネント間の通信

Reactでは、親から子へのデータの受け渡しはpropsを使用し、子から親への通信にはコールバック関数を渡すことが一般的である。
Vueでもpropsを使って親から子へデータを渡す。
子から親への通信には$emitを使用してカスタムイベントを発火させる。