この記事の要点

Vue.js は Evan You が 2014 年に公開したプログレッシブな JavaScript フレームワーク 現行は Vue 3 (2020 年〜、Composition API + Vite ベース)。Vue 2 は 2023/12/31 EOL SFC (Single File Component) 1 ファイルに <template> / <script> / <style> をまとめる エコシステム: Vue Router (ルーティング) / Pinia (状態管理) / Vite (ビルド) / Nuxt (SSR/SSG) React と Angular の中間: 学習曲線が緩く、SFC の構造が分かりやすい

Vue.js とは

Vue.js はユーザーインターフェース構築のための JavaScript フレームワークです。HTML のテンプレート構文をベースに、リアクティブなデータバインディング、コンポーネント指向、SFC (単一ファイルコンポーネント) を提供します。

項目	内容
初版	2014 年 (Evan You)
現行版	Vue 3.x (2020〜)
ライセンス	MIT
公式サイト	https://ja.vuejs.org
GitHub Stars	約 210k (2025 時点)
主要採用企業	GitLab / Nintendo / Adobe (Portfolio) / Alibaba

最小サンプル

<div id="app">
  <p>{{ message }}</p>
  <button @click="count++">押された: {{ count }} 回</button>
</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  createApp({
    setup() {
      const message = ref('Hello Vue 3');
      const count = ref(0);
      return { message, count };
    }
  }).mount('#app');
</script>

主要コンセプト

コンセプト	説明
リアクティブシステム	ref() / reactive() で値が変わると DOM 自動更新
テンプレート構文	{{ ... }} 補間、v-bind、v-on (@)、v-model、v-if、v-for
コンポーネント	UI を部品化。props で親から子へ、emit で子から親へ通信
SFC	.vue 拡張子に template / script / style を集約
Composition API	関数的にロジックを組み立てる。<script setup> が現代の標準
computed / watch	派生値の自動再計算、副作用の監視
ライフサイクル	onMounted / onUnmounted / onUpdated 等

Single File Component の構造

<!-- TodoItem.vue -->
<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  title: String,
  completed: Boolean,
});
const emit = defineEmits(['toggle']);

const classes = computed(() => ({
  done: props.completed,
}));
</script>

<template>
  <li :class="classes">
    <input type="checkbox"
           :checked="completed"
           @change="emit('toggle')">
    {{ title }}
  </li>
</template>

<style scoped>
.done { text-decoration: line-through; color: #999; }
</style>

Composition API: ref / reactive / computed / watch

import { ref, reactive, computed, watch, onMounted } from 'vue';

// ref: プリミティブ値をリアクティブに
const count = ref(0);
count.value++;             // .value でアクセス
console.log(count.value);  // テンプレート内では自動 unwrap

// reactive: オブジェクトをリアクティブに
const state = reactive({
  user: { name: 'taro', age: 25 },
  todos: [],
});
state.user.age = 26;

// computed: 派生値 (依存変化時のみ再計算)
const doubled = computed(() => count.value * 2);

// watch: 副作用
watch(count, (newVal, oldVal) => {
  console.log(`${oldVal} → ${newVal}`);
});

// ライフサイクル
onMounted(() => {
  console.log('component mounted');
});

エコシステム

ライブラリ	役割
Vite	開発サーバ + ビルド (Vue 公式推奨)
Vue Router 4	クライアントサイドルーティング (SPA)
Pinia	状態管理 (Vuex 後継、TypeScript フレンドリー)
Vuex 4	旧状態管理。新規は Pinia 推奨
Nuxt 3	SSR / SSG / フルスタックフレームワーク
VueUse	composable ユーティリティ集 (useFetch, useStorage 等)
Vitest	ユニットテスト
Element Plus / Vuetify / PrimeVue	UI コンポーネント集

React / Angular との比較

項目	Vue 3	React 18+	Angular 17+
テンプレート	HTML ベース (SFC)	JSX	HTML テンプレート + TS
学習曲線	低 〜 中	中	高
状態管理	Pinia	Redux / Zustand / Context	RxJS / NgRx
ルーティング	Vue Router	React Router	同梱
型安全	TypeScript 対応	TypeScript 対応	TypeScript 標準
規模	中規模が得意	大規模も可	大規模エンタープライズ
SSR フレームワーク	Nuxt	Next.js	Angular Universal

Vue 2 と Vue 3 の主な違い

• Composition API が公式に追加 (Vue 2.7 にもバックポートあり)
• 仮想 DOM のリライト (高速化、Tree-shaking)
• Multiple root nodes (Fragments) サポート
• Teleport (旧 portal) / Suspense 標準
• TypeScript サポート強化
• Vue 2 の filter / EventBus は廃止
• ビルドツールは Vue CLI から Vite へ

学習ロードマップ

1. HTML / CSS / JavaScript ES2015+ の基本
2. CDN で Hello World → リアクティブとイベント
3. create-vue で SFC を書く
4. Composition API + <script setup>
5. Vue Router で SPA、Pinia で状態管理
6. Nuxt 3 で SSR / SSG
7. Vitest でテスト、Vue DevTools でデバッグ

FAQ

Q: Vue は廃れる？
A: 2025 年時点で GitHub stars 210k、Nuxt は急成長、State of JS でも上位。エンタープライズ採用 (GitLab 等) も継続。

Q: React か Vue か
A: 求人数は React > Vue。学習しやすさは Vue > React。日本国内の中規模 SaaS で Vue 採用が多い。

Q: Vue 2 プロジェクトの移行
A: 公式の Vue 2.7 (Naruto) で Composition API を使い、その後 Vue 3 へ。vue-demi も有効。

📸 参考画像

※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。