Vue3 概要

Vue3 はユーザーインターフェースを構築するためのプログレッシブフレームワークです。

プログレッシブつまり、プロジェクトのニーズに応じて Vue の一部の機能だけを導入できます。シンプルなページのインタラクション強化から、完全なシングルページアプリケーション（SPA）やサーバーサイドレンダリング（SSR）アプリケーションの構築まで、Vue3 はすべて対応できます。

Vue3 は、尤雨溪（Evan You）が主導して開発したプログレッシブな JavaScript フロントエンドフレームワークであり、2020年9月18日に正式リリースされました。コードネームはOne Piece（ワンピース）。

Vue2 と比較すると、Vue3 はコアアーキテクチャを全面的に書き直しました。リアクティブシステムはObject.definePropertyにアップグレードされましたProxy、Composition API（コンポジション API）が導入され、パフォーマンス、TypeScript サポート、バンドルサイズなどの面で全面的に向上しました。

Vue3 の公式な位置づけは次のとおりです：簡単に始められるだけでなく、複雑なプロジェクトを支える十分な能力を備えたフレームワーク。Angular のように特定のアーキテクチャを強制することもなく、React のように大量の手動最適化を必要とすることもなく、使いやすさと能力のバランスを見出しています。

Vue3 と Vue2 の本質的な違い

Vue3 は Vue2 の修正アップグレードではなく、完全な書き直しです。

比較項目Vue2Vue3
リアクティブの原理Object.defineProperty、新しいプロパティや配列インデックスの変更を監視できないProxy、オブジェクトのすべての操作を完全にプロキシし、上記のような制限はない
コードの編成方法オプション API（Options API）：data、methods、computed が分離されているコンポジション API（Composition API）：論理的な関心事ごとにコードを集約する
TypeScript サポート後付けの対応であり、型推論が限定的コアコードが TypeScript で書き直され、TS は第一級市民
バンドルサイズランタイム約 20KB（gzip）Tree-shaking に対応し、必要な分だけをバンドルするため、最小 13.5KB
パフォーマンスベースライン初回レンダリングは約 55% 高速、更新レンダリングは約 133% 高速、メモリ使用量は約 54% 削減
コンポーネントテンプレートのルートノードルート要素は必須で、1つだけでなければならない複数のルートノード（Fragment）をサポート
グローバル APIVue コンストラクタにマウントされ、複数のインスタンスで状態を共有するを介してcreateApp独立したインスタンスを作成し、分離がより徹底的

コア機能

Vue3 の改良は、リアクティブシステム、API 設計、コンパイラ、新しい組み込みコンポーネントの4つの側面をカバーしています。

コンポジション API（Composition API）

Composition API は Vue3 で最も重要な設計変更であり、Vue2 の Options API の根本的な痛点を解決しました：関連するロジックが異なるオプションに分散し、再利用が困難。

Options API では、「ユーザー検索」機能のデータがdata、methods、computed、watch4つのオプションに分散される可能性があります。一方、Composition API では、同じ機能のすべてのロジックを一緒に書き、再利用可能な関数（Composable）として抽出できます。

例：Options API と Composition API の比較

<!-- Options API 写法（Vue2 / Vue3 均支持） -->
<script>
export default {
  data() {
    return {
count: 0, // 计数器数据
username: 'サンプル' // 用户名数据
    }
  },
  computed: {
doubled() { // count の2倍
      return this.count * 2
    }
  },
  methods: {
increment() { // 增加计数
      this.count++
    }
  }
}
</script>

例：推奨される書き方（script setup シンタックスシュガー）

<!-- Composition API + script setup（Vue3 推荐写法） -->
<script setup>
import { ref, computed } from 'vue'

// 响应式数据直接声明，无需 return
const count = ref(0) // ref 包裹基本类型
const username = ref('サンプル')

// 计算属性
const doubled = computed(() => count.value * 2)

// 方法直接定义函数
function increment() {
count.value++ // 注意：ref でラップされた値は .value 経由でアクセスする必要があります
}
</script>

<template>
  <!-- 模板中 ref 自动解包，无需 .value -->
  <p>用户：{{ username }}</p>
  <p>计数：{{ count }}，两倍：{{ doubled }}</p>
  <button @click="increment">+1</button>
</template>

<script setup>は Composition API のシンタックスシュガーです。これにより、<script>トップレベルで直接 Composition API コードを記述でき、手動でreturn、すべてのトップレベルの変数と関数は自動的にテンプレートに公開されます。これは Vue3 が現在最も推奨する単一ファイルコンポーネントの書き方です。

リアクティブシステム：Proxy による defineProperty の置き換え

Vue2 のリアクティブはObject.defineProperty、この方法には根本的に解決できない2つの問題があります：オブジェクトへの新しいプロパティの追加を監視できない、配列のインデックスによる直接代入を監視できない。Vue3 はProxyでこの2つの問題を根本的に解決しました。

例：ref と reactive

import { ref, reactive, watch } from 'vue'

// ref：适合基本类型（number、string、boolean）
// 値のアクセスと変更は .value を介して行う
const count = ref(0)
count.value = 10

// reactive：オブジェクトと配列に適しています
// 直接访问属性，无需 .value
const user = reactive({
  name: 'サンプル',
  age: 18,
  skills: ['vue', 'typescript']
})

// Vue3 はオブジェクトに直接新しいプロパティを追加でき、リアクティブは正常に動作します。
user.email = 'サンプル@example.com'  // Vue2 中此操作不会触发视图更新

// 也可以直接修改数组元素
user.skills[0] = 'vue3'  // Vue2 中此操作不会触发视图更新

// 监听响应式数据变化
watch(count, (newVal, oldVal) => {
  console.log(`count から ${oldVal}$になる{newVal}`)
})

コンポーザブル関数（Composables）

Composables は、Vue3 で状態を持つロジックを再利用するための標準的な方法であり、React のカスタムフックに似ています。

慣例としてuseで始まる名前を付け、完全なリアクティブロジックを独立した関数に抽出し、複数のコンポーネントで再利用します。

例：カスタム Composable

// 文件路径：composables/useCounter.js
// 封装计数器逻辑，任何组件都可以复用

import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)           // 内部リアクティブ状態
  const doubled = computed(() => count.value * 2)  // 派生状態

  function increment() { count.value++ }
  function decrement() { count.value-- }
  function reset() { count.value = initialValue }

  // 外部に公開する状態とメソッドを返す
  return { count, doubled, increment, decrement, reset }
}

例：コンポーネントで Composable を使用する

<script setup>
import { useCounter } from './composables/useCounter'

// 直接分割代入してもリアクティブ性は維持される
const { count, doubled, increment, decrement, reset } = useCounter(10)
</script>

<template>
  <p>現在値：{{ count }}、2倍：{{ doubled }}</p>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
  <button @click="reset">リセット</button>
</template>

新しい組み込みコンポーネント

Vue3には新しい組み込みコンポーネントが3つ追加され、フロントエンド開発における3つの高頻度シーンを解決しました。

コンポーネント解決する問題典型的な使用シーン
FragmentVue2ではコンポーネントテンプレートに単一のルートノードが必要でしたが、Fragmentは複数のルートノードを共存させることができます（余分なdivでラップする必要なし）リスト項目コンポーネント、不要なDOM階層の削減
TeleportコンポーネントのHTMLをDOM内の任意の指定位置にレンダリングし、親コンポーネントのCSS重ね合わせコンテキストの制限を突破するグローバルModalポップアップ、Toast通知、フローティングツールバー
Suspense非同期コンポーネントの読み込み完了前に、フォールバックコンテンツをエレガントに表示し、非同期待機状態を統一的に処理するレイジーロードコンポーネントのスケルトンスクリーン、ルート切り替え時のLoading

例：Teleport でグローバルモーダルを実装する

<script setup>
import { ref } from 'vue'
const showModal = ref(false)
</script>

<template>
  <button @click="showModal = true">ポップアップを開く</button>

  <!--
Teleportはポップアップコンテンツをbody配下にマウントし、
現在のコンポーネントの親要素内ではなく、z-indexやoverflowの問題を回避します
 -->
  <Teleport to="body">
    <div v-if="showModal" class="modal-mask">
      <div class="modal-box">
        <p>これはグローバルポップアップです</p>
        <button @click="showModal = false">閉じる</button>
      </div>
    </div>
  </Teleport>
</template>

例：Suspense で非同期コンポーネントの読み込みを処理する

<!-- 親コンポーネント App.vue -->
<template>
  <Suspense>
    <!-- デフォルトスロット：非同期コンテンツ -->
    <template #default>
      <AsyncUserProfile />  <!-- 内部でawaitを使用する非同期コンポーネント -->
    </template>
    <!-- fallbackスロット：読み込み中に表示するコンテンツ -->
    <template #fallback>
      <div class="loading">読み込み中...</div>
    </template>
  </Suspense>
</template>

Tree-shaking サポート

Vue3はすべてのグローバルAPIを名前付きエクスポート（Named Export）に変更し、Vite / webpackなどのバンドラのTree-shaking機能と組み合わせることで、未使用のAPIは最終成果物にバンドルされません。

例：API をオンデマンドでインポートする

// Vue2：すべてのAPIはグローバルオブジェクトVueを介してアクセスされるため、tree-shakeできない
// Vue.nextTick(...)
// Vue.set(obj, 'key', value)

// Vue3：オンデマンドインポートにより、バンドル時には実際に使用する関数のみが含まれる
import { ref, computed, watch, nextTick, onMounted } from 'vue'

// これらのAPIのみがインポートされ、未使用のもの（watchEffect、provideなど）は成果物に含まれない

ライフサイクルフック

Vue3のコンポジションAPIに対応するライフサイクルフックはすべてonで始まり、setup内で呼び出されます。

Vue2 オプション方式Vue3 コンポジション方式発動タイミング
beforeCreate— （setup自体が置き換え）インスタンス初期化前
created— （setup自体が置き換え）インスタンス作成完了
beforeMountonBeforeMountマウント前
mountedonMountedマウント完了、DOMにアクセス可能
beforeUpdateonBeforeUpdateデータ更新、DOM再レンダリング前
updatedonUpdatedDOM再レンダリング完了後
beforeDestroyonBeforeUnmountコンポーネント破棄前（名称変更済み）
destroyedonUnmountedコンポーネント破棄完了（名称変更済み）

例：ライフサイクルフックの使用

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const timer = ref(null)
const count = ref(0)

// コンポーネントのマウント完了後に実行（安全にDOMを操作可能）
onMounted(() => {
console.log('コンポーネントがマウントされました')
// タイマーを起動し、毎秒カウントを1増やす
  timer.value = setInterval(() => {
    count.value++
  }, 1000)
})

// コンポーネントのアンマウント時に実行（副作用をクリーンアップし、メモリリークを防ぐ）
onUnmounted(() => {
  clearInterval(timer.value)
console.log('タイマーがクリアされました')
})
</script>

<template>
  <p>経過：{{ count }} 秒</p>
</template>

完全な TypeScript サポート

Vue3のコアライブラリは完全にTypeScriptで書き直され、精密な型推論を提供します。これを組み合わせることで、<script setup lang="ts">単一ファイルコンポーネント内で追加設定なしにTypeScriptを直接使用できます。

例：script setup で TypeScript を使用する

<script setup lang="ts">
import { ref, computed } from 'vue'

// インターフェースでコンポーネント内のデータ構造を定義
interface User {
  id: number
  name: string
  email?: string
}

// refは初期値から自動的に型を推論します。明示的に指定することも可能
const user = ref<User>({
  id: 1,
  name: 'サンプル',
})

// defineProps：propsの型を宣言・推論
const props = defineProps<{
 title: string       //必須
 count?: number      //任意
}>()

// defineEmits：カスタムイベントの宣言と型チェック
const emit = defineEmits<{
 (e: 'update', value: number): void
 (e: 'close'): void
}>()

const displayName = computed(() => user.value.name.toUpperCase())

function handleUpdate() {
  emit('update', 42)
}
</script>

応用分野

Vue3は完全なフロントエンドフレームワークエコシステムとして、シングルページアプリケーションからサーバーサイドレンダリング、Webからモバイルまで幅広いシーンをカバーしています。

シングルページアプリケーション（SPA）

これはVue3の最も典型的な使用シーンです。Vue Router 4を使用してフロントエンドルーティングを実装し、Pinia（Vue3公式推奨の状態管理ライブラリ、Vuexの代替）でグローバル状態を管理すれば、機能が充実したシングルページアプリケーションを構築できます。

代表的なプロジェクトタイプ：企業向けバックオフィス管理システム、データ大画面、ECプラットフォームのフロントエンド。

サーバーサイドレンダリング（SSR）と静的サイト生成（SSG）

Nuxt 3はVue3ベースのフルスタックフレームワークで、SSRとSSGの機能を深く統合しています。サーバーサイドレンダリングの複雑さを自動的に処理し、開発者は通常のVueコンポーネントを書くようにSEOに優しいアプリケーションを構築できます。

適用シーン：コンテンツ型Webサイト、ブログ、ドキュメントサイト、マーケティングランディングページ。

モバイルとクロスプラットフォーム

uni-appVue3構文でWeChatミニプログラム、Alipayミニプログラム、H5、App（iOS/Android）を同時に開発できます。Ionic + Vue3は高品質なハイブリッドモバイルアプリの構築に適しています。

デスクトップアプリケーション

Electron + Vue3（electron-viteなどのツールチェーンを使用）Vue3アプリケーションをクロスプラットフォームのデスクトッププログラムにパッケージ化できます。Tauri + Vue3は近年人気の代替案で、Rustをバックエンドとして使用し、アプリケーションのサイズが小さく、パフォーマンスが優れています。

UI コンポーネントライブラリのエコシステム

Vue3エコシステムには、選択可能な豊富な成熟コンポーネントライブラリがあります：

コンポーネントライブラリ位置づけ適用シーン
Element PlusPC向けデスクトップコンポーネントライブラリ、Element UIのVue3バージョン企業向けバックオフィス管理、データ集約型アプリケーション
Ant Design VueAnt DesignのVue実装、成熟したデザイン仕様管理系システム、エンタープライズアプリケーション
Vant 4モバイル向けコンポーネントライブラリ、軽量・高性能モバイルH5、WeChatミニプログラム
Vuetify 3Material Designスタイルのコンポーネントライブラリ消費者向けWebアプリケーション
Naive UITypeScriptで記述、テーマカスタマイズ機能が強力テーマの深いカスタマイズが必要なプロジェクト
shadcn-vueRadix UIとTailwindベース、コードをコピーして使用できるコンポーネント集UIの独自性を重視するプロジェクト

発展の歴史

Vue.jsは個人プロジェクトから世界トップ3のフロントエンドフレームワークへと発展しました。各メジャーバージョンの背後には明確なエンジニアリングニーズがありました。

起源（2013年 - 2014年）

Vue.jsは尤雨溪（Evan You）がGoogle在職中に作成しました。2013年、彼はAngularの開発体験を探求し、最も気に入った部分——すなわちデータ駆動のビュー更新メカニズム——を抽出し、過度に重いと感じた部分を除去したいと考えました。

2014年2月、Vue.js 0.8.0が公開リリースされ、その後Laravelコミュニティから注目を集め、次第にJavaScriptコミュニティで知名度が高まりました。

Vue 1.x の時代（2015年）

2015年10月、Vue 1.0が正式リリースされました。コードネームはEvangelion（新世紀エヴァンゲリオン）です。同年、Vue Router（2015.08）、Vuex（2015.11）、Vue CLI（2015.12）が相次いでリリースされ、Vueがビュー層ライブラリから完全なプログレッシブフレームワークへと発展したことを示しました。

Vue 2.x の時代（2016年 - 2020年）

2016年10月、Vue 2.0がリリースされ、仮想DOM方式（Reactを参考にした）を導入し、サーバーサイドレンダリング（SSR）をサポート、パフォーマンスが大幅に向上しました。

Vue 2時代はVueエコシステムが最も急速に拡大した段階です：Element UIなどのコンポーネントライブラリが台頭し、Nuxt.jsが登場し、Vueは世界で最もGitHub Starが多いフロントエンドフレームワークの1つになりました。

2019年2月、Vue 2.6がリリースされました。コードネームはMacrossで、これはVue 2最後の重要なバージョンであり、前後をつなぐ役割を果たしました。

Vue 3.0 リリース（2020年）

Vue3の開発は2018年末に始まり、約2年間を経て、30以上のRFC（Request for Comments）、2600以上のコミット、99人のコントリビューターによる628のPRを経ました。

2020年9月18日、Vue 3.0が正式リリースされ、コードネームはOne Piece（ワンピース）でした。主な変更点：

  • リアクティブシステムはProxy書き換え
  • Composition APIの導入
  • TypeScriptを全面的にサポート
  • Fragment、Teleport、Suspenseを新規追加
  • Tree-shakingをサポートし、パッケージサイズが大幅に削減

エコシステムの充実期（2021年 - 2022年）

時期バージョン / イベントマイルストーン的な意味合い
2021-08Vue 3.2<script setup>シンタックスシュガーが正式に安定化、<style> v-bind動的CSSバインディングをサポートし、最も人気のあるVue 3バージョンの1つとなった
2022-02Vue 3がデフォルトバージョンになったvue.js公式サイトとnpm上でvueパッケージのデフォルトバージョンが2から3に切り替わり、Vue3エコシステムが正式に主流となった
2022-05Piniaが公式推奨となったVuex 5の計画は保留され、PiniaがVue3公式推奨の状態管理ライブラリとなった
2022Vue 3.3ジェネリックコンポーネントのサポートを強化、改善defineProps型推論により、TypeScriptの体験が大幅に向上

継続的改善期（2023年 - 現在）

時期バージョン重要な機能
2023-12Vue 3.4テンプレートパーサーを書き直し（パフォーマンス約2倍向上）、リアクティブシステムを最適化（無効な計算のトリガーを削減）、defineModelマクロが正式に安定化（v-model 双方向バインディングを簡素化）
2024-09Vue 3.5リアクティブPropsの分割代入が正式に安定（toRefなしで分割代入してもリアクティブを維持）、useTemplateRef新API、SSRのLazy Hydration（遅延ハイドレーション）
2025年（開発中）Vue 3.6Alien Signalsリアクティブシステムを統合（依存関係トラッキングのメモリ削減約14%）、Vapor ModeがAlphaに（仮想DOMを完全にスキップ、パッケージサイズが50KBから約6KBに削減、10万コンポーネントのマウント時間が約100ms）

Vapor ModeこれはVue3の未来において最も重要な技術方向です。コンパイル時の静的解析により、テンプレートを直接正確なネイティブDOM操作コードにコンパイルし、仮想DOMの生成とdiffプロセスを完全にバイパスします。既存の仮想DOMモードと共存でき、段階的な移行をサポートします。現在は対応しているのは<script setup>コンポジションAPIのみで、オプションAPIは適用されません。

Vue3 の三大フレームワークにおける位置づけ

Vue3、React、Angularは現在のフロントエンド開発における三大主流フレームワークであり、それぞれの位置づけを理解することは、より適切な技術選定に役立ちます。

比較の観点Vue3React 18+Angular 17+
位置づけプログレッシブフレームワークで、公式がルーターと状態管理を提供UIライブラリで、エコシステムはコミュニティ主導完全なフレームワークで、すべてに公式ソリューションがある
構文スタイル単一ファイルコンポーネント（.vue）、テンプレート構文は直感的JSX、JavaScript内でHTMLを記述コンポーネント + テンプレート + デコレータで、エンジニアリングの度合いが高い
学習曲線比較的緩やかで、テンプレート構文がHTMLに近い中程度で、JSXとHooksのメンタルモデルを理解する必要がある急で、概念が多い（モジュール、依存性注入、RxJS）
TypeScriptコアライブラリがTSで書き直され、サポートが良好良好だが、@types/react が必要デフォルトでTypeScript、深く統合
パフォーマンス優秀で、きめ細かいリアクティブ性により精密に更新良好で、React 19 Compiler がさらに最適化良好で、Signals メカニズムが継続的に改善
適用規模中小規模から大規模プロジェクトまで適しているあらゆる規模に対応し、超大型プロジェクトには成熟した事例がある大規模エンタープライズ向けプロジェクト向きで、チームの規律が求められる
中国市場シェア最高で、多くの企業が使用高比較的低い

国内のフロントエンドエコシステムでは、Vue3の利用率が最も高く、Element Plus、Ant Design Vueなど中国語ドキュメントが充実したコンポーネントライブラリにより、企業の導入ハードルが大幅に下がっています。もしあなたの目標が国内の就職市場であるなら、Vue3は優先的に習得する価値があるフレームワークの一つです。

Vue3 の限界

Vue3の境界を理解することで、より合理的な技術的判断ができるようになります。

限界具体的な内容対応の提案
Options APIとComposition APIの併存による意思決定コスト2つのAPIスタイルが共存するため、チームで統一規範を決める必要があり、そうしないとコードスタイルが一貫しない新規プロジェクトでは統一して使用<script setup> + Composition API
リアクティブデータの.valueによるメンタル負担refスクリプト内では必要.value、テンプレートでは自動的にアンラップされるため、初心者は混同しやすいVolarプラグインを使用すればIDEがヒントを表示します。習慣になれば悩むことはありません。
大規模アプリケーションの状態管理の複雑さPiniaの超大型・高並行シーンにおける状態管理サポートはReduxほど成熟していない超大型アプリケーションではPinia + モジュール化分割案を評価できる
サーバーサイドレンダリングのハイドレーションコストSSRページではハイドレーションが必要で、低スペック端末では初期化に時間がかかるVue 3.5でLazy Hydrationが導入され、Vue 3.6のVapor Modeがさらに改善する見込みです
国際化エコシステムの充実度Reactと比べ、Vueの英語コミュニティの活発さとStack Overflowのリソースはやや少ない公式ドキュメントは品質が非常に高く、中国語ドキュメントも完全なので、公式ドキュメントを優先的に参照しましょう
その他の拡張