React・Vue・Svelte比較 — 同じボタンを作って、書き方の違いをつかもう

ひよこ

画面を作りたいけど、React・Vue・Svelteで迷う！

ペンギン先生

まずは同じ「押すと数字が増えるボタン」を見てみよう。どれもWebの画面を部品として作り、状態の変化を表示へ反映できるよ。書き方の違いをつかむと選びやすいんだ。

ひよこ

Reactはどう書くの？

ペンギン先生

JavaScriptの関数がJSXで見た目を返す形だよ。useStateで数を持ち、更新関数を呼ぶと、その状態を使う表示が更新されるんだ。React自体はUIのライブラリとして案内されているよ。

ひよこ

VueはHTMLに近い？

ペンギン先生

テンプレートに見た目を書く方法があるよ。今回のComposition APIではrefを使うんだ。JavaScriptでは.valueで値を操作するけど、テンプレートでは条件に応じて自動で取り出されるよ。

ひよこ

Svelteは変数を書くだけ？

ペンギン先生

Svelte 5のrunesを使う例では、$stateで反応する状態を宣言するよ。通常のletだけと混ぜないようにしよう。コンパイラーがコンポーネントをJavaScriptへ変換するのも特徴なんだ。

ひよこ

コンパイルするならSvelteが必ず速い？

ペンギン先生

仕組みだけで実際の速さは決められないよ。送るコード、データ取得、画面数、書き方などで変わるんだ。今回の小さなコードは書き方を比べるもので、性能ベンチマークではないよ。

ひよこ

初心者はVue一択かな？

ペンギン先生

HTMLに近い記法が入りやすい人も、JavaScript中心の書き方が好きな人もいるよ。HTML・CSS・JavaScriptの基礎を学び、小さな部品を読んで自分に合う入口を選ぼう。

ひよこ

仕事で使う場合は？

ペンギン先生

チームで使っている道具、必要なライブラリ、既存の画面との関係、運用方法も条件だよ。ページ遷移やサーバー処理まで扱うときは、Next.js・Nuxt・SvelteKitなども別の選択になるんだ。

ひよこ

まずは何を覚えよう？

ペンギン先生

「React・Vue・Svelteの比較」って出てきたら「同じ画面を、違う書き方と仕組みで作る道具の比較」と思えばだいたいOK！まずはボタンの状態がどこにあるかを見つけよう。

同じゴール：0を表示し、押すと1になる

ここではReactの関数コンポーネント、Vue 3のComposition API、Svelte 5のrunesという書き方を比べます。HTML・CSS・JavaScriptの基本を知っていると読みやすくなります。各コードは対応する開発環境のコンポーネントファイルへ置く例で、HTMLへそのまま全て貼るコードではありません。

React：状態と更新関数を組にする

Counter.jsxの例です。ブラウザー側で動く通常のReactコンポーネントとして使います。Next.jsなどで使う場合は、Client Componentの境界も別途設定します。

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(n => n + 1)}>
      押した回数：{count}
    </button>
  );
}

countが状態、setCountが更新関数です。前の値へ1を足す関数を渡しています。通常のローカル変数を書き換えるだけでは、Reactへ再表示を知らせることになりません。

Vue：refとテンプレートを組み合わせる

Counter.vueの例です。JavaScriptとテンプレートを1ファイルへまとめます。

<script setup>
import { ref } from 'vue';
const count = ref(0);

function increment() {
  count.value++;
}
</script>

<template>
  <button @click="increment">
    押した回数：{{ count }}
  </button>
</template>

JavaScriptで値を変えるときはcount.valueです。ここではテンプレートの最上位のrefなので、表示はcountで使えます。Options APIという別の記法もあるため、教材やチームでどちらを使うか確認しましょう。

Svelte：$stateで反応する状態を宣言する

Counter.svelteの例です。Svelte 5のrunes modeに合わせています。

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

<button onclick={() => count++}>
  押した回数：{count}
</button>

$stateで宣言した数を変更すると、それを使う表示が変わります。以前のSvelteの教材に出てくるlet count = 0と、現在のrunesを混ぜて説明しないことが大切です。

選ぶときに見る条件

行数だけで保守のしやすさは決まりません。ReactやVueにもビルド時の処理があり、Svelteにも実行時の処理があります。「前者は全部ブラウザー、後者は実行時の仕事がゼロ」という二分法にはしないようにしましょう。今回、求人や地域別人気・速度を測った比較はしていません。

次はReact入門、Vue入門、Svelte入門から、選んだ環境でボタンを動かしてみましょう。

参考資料

• Reactの状態 — useStateと再表示
• React Quick Start — コンポーネントとJSX
• Vueのリアクティブ状態 — refとscript setup
• Vueの概要 — APIの記法と基本知識
• Svelte $state — runesの状態とonclick
• Svelteの概要 — コンパイラーとUI