Vue.js 学習ロードマップ

目標: Vue.js 3のモダンな開発手法を実務レベルでマスターする。Composition API + TypeScript + モダンエコシステム（Vite / Pinia / Vue Router 4）で自分が開発できるようにする。

前提: Vue.jsビギナー。TypeScriptの心得はあるが、Vueの基礎知識（Options API含め）はない。ゼロからしっかり学ぶ。

公式ドキュメント: https://vuejs.org/ （Vue 3.5系、日本語版: https://ja.vuejs.org/）

---

Phase 1: 基礎 — Vue 3のパラダイム理解

Vue 3の根幹概念をゼロから押さえる。

ステータス	ドキュメント	URL	ノート
✅	Introduction（Vueとは・プログレッシブFW・SFC・API Styles）	https://vuejs.org/guide/introduction.html	Introduction - 基礎概念
✅	Quick Start（プロジェクト作成・Vite）	https://vuejs.org/guide/quick-start.html	Quick Start - プロジェクト作成と環境構築
✅	Creating an Application	https://vuejs.org/guide/essentials/application.html	Creating an Application - アプリの起動フロー
✅	Template Syntax	https://vuejs.org/guide/essentials/template-syntax.html	Template Syntax - テンプレート構文
✅	Reactivity Fundamentals	https://vuejs.org/guide/essentials/reactivity-fundamentals.html	Reactivity Fundamentals - リアクティビティの基礎
✅	Computed Properties	https://vuejs.org/guide/essentials/computed.html	Computed Properties - 派生値とキャッシュ
✅	Class and Style Bindings	https://vuejs.org/guide/essentials/class-and-style.html	Class and Style Bindings - 状態に応じた見た目の制御
✅	Conditional Rendering	https://vuejs.org/guide/essentials/conditional.html	Conditional Rendering - 条件による描画制御
✅	List Rendering	https://vuejs.org/guide/essentials/list.html	List Rendering - 配列とオブジェクトの反復描画
✅	Event Handling	https://vuejs.org/guide/essentials/event-handling.html	Event Handling - イベント処理と modifier
✅	Form Input Bindings	https://vuejs.org/guide/essentials/forms.html	Form Input Bindings - v-model とフォーム状態同期
✅	Lifecycle Hooks	https://vuejs.org/guide/essentials/lifecycle.html	Lifecycle Hooks - コンポーネントの時間軸と副作用配置
✅	Watchers	https://vuejs.org/guide/essentials/watchers.html	Watchers - state変化に反応する副作用管理
✅	Template Refs	https://vuejs.org/guide/essentials/template-refs.html	Template Refs - DOM参照と子コンポーネント参照
✅	Component Basics	https://vuejs.org/guide/essentials/component-basics.html	Component Basics - 親子コンポーネント通信の基礎

---

Phase 2: コンポーネント深掘り

実務で最も使うコンポーネント設計の理解。Props/Emits/Slotsなどの核概念。

ステータス	ドキュメント	URL	ノート
✅	Registration	https://vuejs.org/guide/components/registration.html	Component Registration - グローバル登録とローカル登録
✅	Props	https://vuejs.org/guide/components/props.html	Props - 親子コンポーネント間の入力契約
✅	Events	https://vuejs.org/guide/components/events.html	Events - 子から親への通知契約
✅	Component v-model	https://vuejs.org/guide/components/v-model.html	Component v-model - 親子双方向バインディングの契約
✅	Fallthrough Attributes	https://vuejs.org/guide/components/attrs.html	Fallthrough Attributes - コンポーネント外部属性の着地点
✅	Slots	https://vuejs.org/guide/components/slots.html	Slots - 親が描画責務を差し込むコンポーネント拡張ポイント
✅	Provide / Inject	https://vuejs.org/guide/components/provide-inject.html	Inject - 深い子孫へ文脈依存を直接渡す仕組み
✅	Async Components	https://vuejs.org/guide/components/async.html	Async Components - 必要時にコンポーネントを遅延ロードする

---

Phase 3: 再利用性 — Composables

Composition APIの真価。ロジックの再利用パターン。

ステータス	ドキュメント	URL	ノート
✅	Composables	https://vuejs.org/guide/reusability/composables.html	Composables - 状態を持つロジックの再利用
✅	Custom Directives	https://vuejs.org/guide/reusability/custom-directives.html	Custom Directives - 低レベルDOM操作の再利用
✅	Plugins	https://vuejs.org/guide/reusability/plugins.html	Plugins - アプリ全体への機能注入

---

Phase 4: スケールアップ — エコシステム

実務プロジェクトに必要なツール群。マネジメント層として知っておくべき全体像。

ステータス	ドキュメント	URL	ノート
✅	Single-File Components (SFC)	https://vuejs.org/guide/scaling-up/sfc.html	Single-File Components - Vueコンポーネントの標準単位
✅	Tooling (Vite / IDE / DevTools)	https://vuejs.org/guide/scaling-up/tooling.html	Tooling - Vue開発環境とツールチェーン
✅	Routing (Vue Router)	https://vuejs.org/guide/scaling-up/routing.html	Routing - URLを状態として扱う画面遷移基盤
✅	State Management (Pinia)	https://vuejs.org/guide/scaling-up/state-management.html	State Management - 共有状態の設計とPiniaが必要になる理由
✅	Testing (Vitest)	https://vuejs.org/guide/scaling-up/testing.html	Testing - Vueアプリの品質を守る3層戦略
✅	Server-Side Rendering (SSR)	https://vuejs.org/guide/scaling-up/ssr.html	Server-Side Rendering (SSR) - 二相実行モデルとHydrationの制約

---

Phase 5: TypeScript統合

マネジメント層としてTypeScript前提のモダン開発フローを理解する。

ステータス	ドキュメント	URL	ノート
✅	TypeScript Overview	https://vuejs.org/guide/typescript/overview.html	Using Vue with TypeScript - 型付き開発基盤の全体像
✅	TS with Composition API	https://vuejs.org/guide/typescript/composition-api.html	TypeScript with Composition API - 推論中心の型設計