Vue — 学びやすい宣言的フレームワーク

📖 このページのゴール：Vue（ビュー）が「Reactと同じ“宣言的”の仲間」でありながら、入口がやさしい理由を、しくみと小さなコードでつかむ。 ← 目次・はじめにへもどる

🪄 たとえ：Reactと同じ“宣言的”の仲間、でも入口がやさしい

前のページの React と Vue は、同じ家族です。どちらも「状態を書けば、画面はそれに合わせて勝手に変わる」宣言的（せんげんてき）な作り方——「今は“喜び”」と書けば笑顔の画面になる、あの考え方です。手で人形を動かす素のJS（命令的）とは違い、変化の反映はフレームワークにおまかせできます。

ちがうのは入口の広さ。React は「JSの中にHTMLを書く（JSX）」という独特の書き方に最初とまどいがち。Vue は 見慣れたHTMLに近い書き方から入れるので、初心者がいちばん最初に手に取りやすいフレームワークとよく言われます。

💡 ひとことで：Reactと考え方は同じ。でも「HTMLっぽさ」を残してくれるぶん、最初の坂がゆるい。

🧩 しくみ：3つの柱

Vueを支える考え方は、ざっくり3つです。

① テンプレート構文（HTMLに近い書き方）🟢

画面の見た目は、ほぼHTMLそのままに書けます。そこに `` や @click のような“ちょい足し”をするだけ。HTMLを少し知っていれば、すんなり読めます。

② リアクティブ（状態が変わると自動で画面が更新）🟢

ref（レフ）などで「状態（データ）」を作ると、その値が変わった瞬間に、それを使っている画面だけが自動で描き直されます。これがリアクティブ＝「状態に画面が反応して追従する」しくみ。自分で「ここを書き換えろ」と命令しなくていいのが、宣言的のうれしさです。

③ 単一ファイルコンポーネント（.vue / SFC）🟢

.vue という1つのファイルに、テンプレート（見た目）・スクリプト（動き）・スタイル（装飾）をまとめて書けます。これを SFC（Single File Component＝単一ファイルコンポーネント） と呼びます。「このボタン部品の見た目も動きも見た目の色も、ぜんぶここ」と1か所にまとまるので、初心者でも迷子になりにくいのが利点です。

ボタン部品.vue  ＝  <template> 見た目（HTML） </template>
                   <script>   動き（JS）       </script>
                   <style>    装飾（CSS）       </style>

🟢 小さなコード例：カウンター（Vue）

「ボタンを押すと数が増える」だけの部品を、Vue（SFC）で書くとこうなります。

<script setup>
import { ref } from 'vue'
const count = ref(0)              // 状態（最初は0）
</script>

<template>
  <button @click="count++">      <!-- 押したら count を +1 -->
    8 回おした
  </button>
</template>

説明（むずかしい所だけ）

ref(0) … 「0からはじまる状態」を作る箱。中身は count.value で変わるが、テンプレートでは count と書くだけでOK。
@click="count++" … 「クリックされたら count を1ふやす」。@click はHTMLの onclick のVue版。
8 … 状態をそのまま画面に表示する。count が変われば、ここも自動で書き変わる（＝リアクティブ）。

見た目（template）と動き（script）が1ファイルに同居しているのが、Vue らしさです。前ページの React 版（JSXで書いたカウンター）と見比べると、Vue の方が「HTMLっぽさ」が残っているのが分かります。

🆚 Reactとのちがい（早見表）

考え方（宣言的・リアクティブ）は同じ。書き味がいちばんの違いです。

観点	React	Vue
見た目の書き方	JSX（JSの中にHTMLっぽく書く）	テンプレート構文（HTMLに近い）
学習のしやすさ	やや急（JSXとお作法に慣れが要る）	ゆるやか（HTML/CSS知識を活かせる）
書き味	「全部JSの世界」。柔軟だが自由ゆえに迷いやすい	見た目・動き・装飾が1ファイル（SFC）で素直
規模	小〜超大規模、巨大エコシステム	中小〜大規模までバランス良く
メタフレームワーク	Next.js	Nuxt（ナクスト）

🔧 どちらが「正しい」ではなく好みと事情。チームにReact経験者が多ければReact、HTML/CSS出身でやさしく始めたいならVue、というふうに選びます。

👍 Vueが向くとき

🟢 学びやすさ重視：HTML/CSSを少しかじった人の「最初のフレームワーク」に good。
⚖️ バランスが良い：機能・性能・学びやすさのバランスが取れ、迷ったときの無難な一手になりやすい。
📈 中小〜大規模まで：小さな画面の“ちょい足し”から、本格的なアプリまで、段階的に育てられる。

👎 注意したいこと

🔎 Reactより求人・情報はやや少なめ：世界全体では React の方が採用も日本語以外の情報量も多い。困ったときに見つかる事例の数では React に一歩ゆずる場面がある（とはいえ Vue も十分大きなコミュニティです）。

🌱 エコシステム：メタフレームワークは Nuxt

Vue を本格的に使うときの“全部入りセット”が Nuxt（ナクスト）。ページごとに描き方を混ぜるハイブリッド（SSR/SSG など）を、Vue の世界でまとめて面倒見てくれるメタフレームワークです。React でいう Next.js のVue版、と覚えればOK。

くわしくは 第9章：メタフレームワーク＆ハイブリッド で扱います。ここでは「Vueにも“全部入り”の Nuxt がある」とだけ押さえれば十分です。

🏢 誰が使う？

👤 個人〜中堅のチーム：とくに学習のいちばん最初に選ばれやすい。HTML/CSSからの地続きで挫折しにくい。
🏬 中小〜中堅企業のWebアプリ：管理画面やサービス画面など、ちょうどよい規模で力を発揮。
🌏 日本語の入門情報も豊富で、はじめてのフレームワークとして安心して選べる。

🗒️ ことばメモ

宣言的（せんげんてき）：「状態がこうなら画面はこう」と書く作り方。変化の反映はフレームワーク任せ。
リアクティブ：状態が変われば、それを使う画面が自動で追従して書き変わること。
テンプレート構文：HTMLに近い見た目の書き方に `` や @click を足したもの。
ref（レフ）：Vueで「変わる状態」を作る箱。中身が変わると画面が追従する。
SFC（単一ファイルコンポーネント / .vue）：見た目・動き・装飾を1ファイルにまとめた部品。
Nuxt（ナクスト）：Vue用のメタフレームワーク（全部入り）。SSR/SSGなどを扱える。第9章。

🟢 ひとことで言うと

Vue は Reactと同じ“宣言的”の仲間。でもHTMLに近いテンプレートと、見た目・動き・装飾を1ファイルにまとめるSFCのおかげで、入口がいちばんやさしいフレームワークです。学びやすく・バランスが良く、最初の一歩に最適。本格化したら Nuxt が待っています。

➡️ 次へ

次のページ：その他のフレームワークと歴史 — jQuery / Svelte / Solid / Angular → ← 目次・はじめにへもどる