はじめに

React とは？

宣言的 UI フレームワーク（開発者は「何を表示するか」を、フレームワークは「どうやって表示するか」を扱うフレームワーク）の一種です。

React は実のところ、Web 以外も扱えるように抽象化された設計になっており、DOM 実装とNative (Android/iOS) 実装のほか、CLI 実装などが存在します。本サイトでは、Web フロントエンド開発について扱うので、React も DOM 実装を扱います。

Vue との違いは？

読者の中には、Vue を使った Web フロントエンド開発の経験がある人もいるかもしれません。人によって意見が分かれますが、違いは端的には次のように表せます。

• Vue は Easy: やりたいことが簡単に書ける機能が充実している。その分、学ぶ機能が多い
• React は Simple: より少ない原則を理解していれば色々な処理が書ける。その分、原則の応用の効かせ方を身につける必要がある

また、機能ごとに React と Vue の対応を表にすると、次のようになります（すべての機能を表にしているわけではありませんが）

機能	React	Vue
コンポーネント	JavaScript 関数	Vue 単一ファイルコンポーネント
テンプレート	JSX (JavaScript の言語拡張)	Vue テンプレート構文1
テンプレート（繰り返し）	Array.prototype.map() など	リストレンダリング
テンプレート（条件分岐）	if...else、条件演算子 など	条件付きレンダリング
プロパティ	関数の引数	props
イベントハンドラー	コールバック関数	v-on ディレクティブによるイベントハンドリング

特筆すべきは、React は表にあげた機能について、JavaScript の構文や標準的なオブジェクトで説明できてしまいます。つまり、JavaScript の知識があれば React での開発に活かせる部分が多いのです。

サンプルで比較してみよう

実際にコードを見て、React と Vue の違いを体感してみましょう。以下のサンプルでは、比較表にあげた機能（繰り返し、条件分岐、プロパティ、イベントハンドラー）を実際に使用しています。

React 版

import { useState } from 'react';
import Greeting from './Greeting';

// コンポーネント: JavaScript 関数
export default function App() {
  const [showList, setShowList] = useState(true);
  const items = ['りんご', 'バナナ', 'オレンジ'];

  return (
    <div>
      <h1>Hello World</h1>

      {/* プロパティ（関数の引数） */}
      <Greeting name="太郎" />

      {/* イベントハンドラー（コールバック関数） */}
      <button onClick={() => setShowList(!showList)}>
        リストを{showList ? '非表示' : '表示'}
      </button>

      {/* テンプレート（条件分岐）: 条件演算子 */}
      {showList ? (
        <div>
          <h2>果物リスト</h2>
          {/* テンプレート（繰り返し）: Array.prototype.map() */}
          <ul>
            {items.map((item, index) => (
              <li key={index}>{item}</li>
            ))}
          </ul>
        </div>
      ) : (
        <p>リストは非表示です</p>
      )}
    </div>
  );
}

Open Sandbox

Vue 版

<!-- コンポーネント: Vue単一ファイルコンポーネント -->
<template>
  <div>
    <h1>Hello World</h1>

    <!-- プロパティ（props） -->
    <Greeting name="太郎" />

    <!-- イベントハンドラー（v-on ディレクティブ） -->
    <button @click="showList = !showList">
      リストを{{ showList ? '非表示' : '表示' }}
    </button>

    <!-- テンプレート（条件分岐）: v-if/v-else -->
    <div v-if="showList">
      <h2>果物リスト</h2>
      <!-- テンプレート（繰り返し）: v-for -->
      <ul>
        <li v-for="(item, index) in items" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>
    <p v-else>リストは非表示です</p>
  </div>
</template>

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

const showList = ref(true);
const items = ['りんご', 'バナナ', 'オレンジ'];
</script>

Open Sandbox

React は JavaScript の構文をそのまま使うのに対し、Vue は専用の構文とディレクティブ（v-for、v-if、@click など）を提供していることがわかりますね。

Footnotes

1. Vue は JSX もサポートしています https://ja.vuejs.org/guide/extras/render-function ↩