こんにちは、かつコーチです。
React編50記事、お疲れさまでした。
ここからは、いよいよVue.js編がスタートします。
「Reactは学んだけど、Vueってどう違うの？」という方にも、「Vueから初めてのフロントエンドフレームワークに触れる」という方にも、どちらにも伝わるように書いていきますので、気軽についてきてください。
Vue.jsとは？
「学習しやすい設計」のフロントエンドフレームワーク
Vue.js（読み方は「ビュー」）は、Webページに動きやインタラクションを加えるためのJavaScriptフレームワークです。
一番の特徴は、「学習しやすい設計」を明確に意識して作られている点にあります。
公式ドキュメントが丁寧で、HTML・CSS・JavaScriptの基礎知識があれば、比較的スムーズに書き始められるように設計されています。
私が最初にVueのチュートリアルを触ったときも、「あ、これは今までのHTML・CSSの知識の延長で読める」という感覚があり、Reactを最初に学んだときよりも導入のハードルは低く感じました。
なぜ「学習しやすさ」が重視されているのか
Vueを作ったEvan You氏は、もともとGoogleでAngularJSに関わっていた人物です。
その経験から、「複雑になりすぎず、必要な機能を段階的に学べるフレームワーク」を目指してVueを開発した、という背景があります。
段階的に学べるというのは、いきなり全部を理解しなくても、<template>にHTMLに近い書き方をしつつ、必要な部分だけJavaScriptのロジックを足していける、という意味です。
このアプローチが、初心者にも中規模〜大規模開発にも対応できる懐の深さにつながっています。
Reactとの立ち位置の違い
「ライブラリ」と「フレームワーク」
ReactとVueを比較するとき、最初に押さえておきたいのがこの違いです。
- React：UIを作るためのライブラリ
- Vue：アプリ全体を作るためのフレームワーク
Reactは公式には「UIを構築するためのライブラリ」と位置づけられています。
ルーティングや状態管理は含まれておらず、React Router・Redux・Zustandなど、外部のライブラリを自分で選んで組み合わせる必要があります。
一方Vueは、公式が提供するVue Router（ルーティング）やPinia（状態管理）といった周辺ツールがセットで揃っており、「フレームワーク」として一つのエコシステムにまとまっています。
React編で「Redux・Zustand・Context APIをどう使い分けるか」を検証しましたが、Vueでは状態管理の選択肢が最初から公式主導でまとまっているため、この手の「どれを選べばいいか問題」で悩む場面がやや少なくなります。
テンプレート構文 vs JSX
もう一つの大きな違いが、UIの書き方です。
Reactでは、JavaScriptの中にHTMLのような構文を書くJSXが標準的なスタイルでした。
// Reactの書き方（JSX）
function Greeting() {
const name = "かつコーチ";
return <p>こんにちは、{name}さん！</p>;
}
Vueでは、<template>タグの中にHTMLに近いテンプレート構文を書くのが標準的なスタイルです。
<script setup lang="ts">
const name = "かつコーチ";
</script>
<template>
<p>こんにちは、{{ name }}さん！</p>
</template>
見た目の違いは大きく感じるかもしれませんが、「HTMLに近い書き方ができる」という点で、Vueの方がとっつきやすいと感じる人が多い理由の一つです。
テンプレート構文の詳しい書き方は、次回の記事でしっかり解説します。
Reactを知っている人がVueを学ぶメリット
考え方の多くは共通している
Reactを学んだ経験がある人にとって、Vueの習得は決して一からのスタートではありません。
- コンポーネントに分割してUIを組み立てる、という考え方
- 親から子へデータを渡す「Props」という仕組み
- ユーザー操作に応じて画面を更新する「リアクティブ」な仕組み
これらの根本的な考え方は、ReactとVueで共通しています。
違うのは「同じ目的を、どんな構文で実現するか」という部分です。
私自身、ReactからVueに移ったときは「概念は知っているのに、書き方だけ変わる」という感覚で、思っていたよりも早く馴染めました。
現場で選ばれる理由もそれぞれにある
「結局どっちが優れているの？」という質問もよく受けますが、優劣というよりは、それぞれ得意な文脈が違います。
Reactは自由度が高い分、チームごとに設計方針を決める必要があり、大規模なエンジニア組織での採用が目立ちます。
Vueは学習コストの低さと、公式ツールがまとまっている安心感から、スタートアップや中小規模のプロジェクト、個人開発などで選ばれる場面が多い印象です。
私がつまずいた経験として、Vueを学び始めた当初、「Reactでできたことは全部Vueでもできるはず」という思い込みで進めて、v-modelのようなVue独自の便利な仕組みの存在に気づかず、Reactの書き方をそのまま無理やり再現しようとして遠回りしたことがあります。
「Reactの知識をそのまま持ち込む」のではなく、「Vueならではの書き方」を素直に学ぶ姿勢が、結果的に一番の近道でした。
まとめ
この記事のポイント
- Vue.jsは「学習しやすい設計」を重視したフロントエンドフレームワーク
- Reactは「UIライブラリ」、Vueはルーティング・状態管理まで含む「フレームワーク」という立ち位置の違いがある
- ReactのJSXに対し、VueはHTMLに近いテンプレート構文が標準
- コンポーネント・Props・リアクティブといった根本の考え方はReactと共通している
- Reactの知識をそのまま持ち込まず、Vueならではの書き方を素直に学ぶのが上達の近道
次に読むべき記事
次回は、実際にVue.jsの開発環境をパソコンに作っていきます。
Viteという高速なビルドツールを使って、手を動かしながら準備を進めましょう。
→ 次の記事：Vue.jsの環境構築：Viteで開発環境を作る