Vue / React / Svelte ― 3 大フロントエンドの“書き味”比較

「どのフレームワークを選ぶべき？」と社内でよく聞かれます。そこで、変数の扱いと親→子コンポーネント間のデータ受け渡しという“超基本”だけに絞って、Vue・React・Svelteを並べてみました。コードは最小限＆コピペで動くようにしています。

1. 変数（状態）の宣言と更新

宣言更新ポイント

Vue 3 (Composition API)

const count = ref(0)
count.value++

refでラップ。テンプレート側は{{ count }}

React 18

const [count, setCount] = useState(0)
setCount(c => c + 1)

配列分割で getter / setter

Svelte 5

let count = $state(0)
count++

普通のlet。再代入だけで再描画

<!-- Vue -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

// React
import { useState } from 'react';
export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>
           Clicked {count} times
         </button>;
}

<!-- Svelte -->
<script>
  let count = $state(0);
</script>

<button on:click={() => count++}>
  Clicked {count} times
</button>

2. 親 → 子へデータを渡す

親での書き方子での受け取り

Vue 3

<Child :message="msg" />
defineProps<{ message: string }>()

React

<Child message={msg} />
function Child({ message }) {…}

Svelte

<Child message={msg} />
let { message } = $props();

Vue (親 & 子)

<!-- Parent.vue -->
<script setup>
import Child from './Child.vue'
const msg = 'Hello Vue'
</script>
<template><Child :message="msg" /></template>

<!-- Child.vue -->
<script setup lang="ts">
const props = defineProps<{ message: string }>()
</script>
<template>{{ props.message }}</template>

React

// Parent.jsx
import Child from './Child';
export default function Parent() {
  const msg = 'Hello React';
  return <Child message={msg} />;
}

// Child.jsx
export default function Child({ message }) {
  return <p>{message}</p>;
}

Svelte

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte';
  let msg = 'Hello Svelte'; // 更新されない変数はJSのletで
</script>
<Child {msg} />

<!-- Child.svelte -->
<script>
  const { msg } = $props();
</script>
<p>{msg}</p>

まとめ（60 秒で分かる選び方）

• Vue：テンプレート付きで“HTML 拡張”感覚。ref/reactiveに慣れれば直感的。
• React：関数と hooks が中心。TypeScript との相性が良く、エコシステムが最大。
• Svelte：宣言的かつ最小構文。ビルド時に余計なランタイムを削ぎ落とし、軽量。

Takeaway
小規模でサクッと作りたい → Svelte
大規模・チームで既存資産活用 → React
テンプレート志向 & 学習コスト低く始めたい → Vue

あなたのプロジェクト規模・チーム構成・既存コードベースに合わせて、ベストな“相棒”を選んでみてください！