はじめに
この記事では、Vue のテンプレート記法と React の JSX の違いを整理します。
Vue と React はどちらもコンポーネントで UI を作りますが、実際にコードを書くとかなり感触が違います。
特に差が出るのは次の点です。
- 条件分岐をどう書くか
- ループをどう書くか
- 属性へ値をどう渡すか
- UI とロジックがどこで混ざるか
この違いを理解すると、「なぜ Vue は読みやすく見えるのか」「なぜ React は分かりやすく感じる人がいるのか」が整理しやすくなります。
先に結論
Vue のテンプレートは、HTML に近い見た目を保ちながら専用記法を足す方向です。
React の JSX は、JavaScript の中で UI を組み立てる方向です。
ざっくり言うと次の違いです。
- Vue は表示部分をテンプレートとして分けて書く色が強い
- React は JavaScript 寄り
Vueはテンプレートとして読める
Vue のコードは、見た目としてかなり HTML に近いです。
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
const increment = (): void => {
count.value++;
};
</script>
<template>
<button @click="increment">増やす</button>
<p v-if="count > 0">{{ count }}</p>
</template>
この書き方の良さは、何を表示したいかがテンプレートとして見えることです。
- 画面の形が分かりやすい
- HTML を読む感覚で追いやすい
- HTML に近い見た目なので、画面構造を追いやすい
ReactはJavaScriptの中でUIを組み立てる
React では JSX を使います。
import { useState } from "react";
export function Counter() {
const [count, setCount] = useState(0);
return (
<>
<button onClick={() => setCount((count) => count + 1)}>増やす</button>
{count > 0 && <p>{count}</p>}
</>
);
}
Vue より JavaScript の存在感が強いです。
- 条件分岐は
&&や三項演算子 - ループは
map - イベントは関数渡し
つまり、React は JSX の中で、JavaScript の式を使って UI を組み立てます。
条件分岐の違い
Vue:
<script setup lang="ts">
import { ref } from "vue";
const count = ref(1);
</script>
<template>
<p v-if="count > 0">{{ count }}</p>
<p v-else>まだ0です</p>
</template>
React:
{count > 0 && <p>{count}</p>}
v-else のように分岐先も明示したいときは、React では三項演算子を使うことが多いです。
{count > 0 ? <p>{count}</p> : <p>まだ0です</p>}
Vue は「条件表示」という意図が v-if で見えます。
React は JavaScript の条件式としてそのまま書きます。
この差はかなり大きいです。
- Vue は意図がディレクティブ名で見える
- React は JavaScript を読めば分かる
ループの違い
Vue:
<script setup lang="ts">
import { ref } from "vue";
const items = ref([
{ id: 1, name: "りんご" },
{ id: 2, name: "みかん" },
]);
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
</template>
React:
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
Vue はテンプレートの流れのまま繰り返せます。
React は配列変換として書きます。
ここも、Vue は見た目が素直で、React は JavaScript として一貫しています。
Vue は表示部分をテンプレートとして分けて書く色が強く、React は JSX の中で処理と表示を近くに置く傾向があります。
JSXが分かりやすいと感じる理由
React の JSX が分かりやすいと感じる理由は、専用記法が少ないことです。
- ループは
map - 条件分岐は
&& - イベントは関数
- 値渡しは
{...}
つまり、UI 専用言語を別で覚えるというより、JavaScript をそのまま使う感覚で読めます。
Vue はテンプレートとしてきれいですが、v-if v-for v-model などの文法を別で覚える必要があります。
テンプレートの読みやすさとJSXの追いやすさは別の強み
ここは分けた方がよいです。
Vue のテンプレートは見た目が整っています。
画面構造を読むにはかなり向いています。
一方で React の JSX は、表示ロジックと JavaScript のつながりを追いやすいです。
そのため、
- UI の見た目を素直に読みたいなら Vue
- 実際に何が起きているかをコードとして追いたいなら React
という違いが出やすいです。
まとめ
Vue のテンプレートと React の JSX は、どちらも UI を書くための仕組みですが、発想がかなり違います。
- Vue は表示部分をテンプレートとして分けて書く色が強い
- React は JavaScript 寄り
- Vue は見た目を読みやすい
- React は処理の流れを追いやすい
そのため、React のほうが分かりやすいと感じるなら、それは JSX が JavaScript と連続しているからです。
Vue のほうが見やすいと感じるなら、それはテンプレートとして整理されているからです。
どちらが優れているかというより、何を読みやすさと感じるかの違いです。
Vue は「HTMLを拡張してUIを書く」感覚に近く、React は「JavaScriptの中でUIを値として扱う」感覚に近いです。