Vue.js入門：プログレッシブなJavaScriptフレームワーク
Vue.js は、ユーザーインターフェースを構築するための プログレッシブな JavaScript フレームワーク です。このフレームワークを使用すると、宣言型でコンポーネントベースのアプローチを用いて、単純なフォームから複雑なエンタープライズレベルの SPA に至るまで、Web アプリケーションを効率的に開発することができます。
このチュートリアルは、HTML、CSS、JavaScriptの基礎知識を持つ初心者向けに作成されています。Vue 3の核心となる概念から始まり、中規模のECバックエンドシステムを独力で開発できるようになるまでを段階的に解説しています。学習の進め方は、W3SchoolsやNewbie Tutorialとは異なります。当チュートリアルでは、Vue 3 + Composition APIファーストのアプローチを採用し、実世界のECプロジェクト（5,000社の加盟店と30,000点のSKUを持つSaaSバックエンド）を実践的な演習として活用します。
1. 学習内容
- Vue.js とは何か？また、「プログレッシブ・フレームワーク」とは一体どういう意味なのか？
- Vue 3 と Vue 2 の主な違い（Vue 3 を学ぶべき理由）
- Composition API と Options API の比較と選択
- Vue 3のエコシステム：Vite、Vue Router、Pinia、Element Plusの役割
- 誰がVueを学ぶべきか、そして学んだ後は何ができるのか？
2. SaaSチームのフロントエンド技術選定の経緯
(1) 課題：5つのフレームワーク――どれを選ぶべきか？
フロントエンドのコードが20万行に及ぶ急成長中のSaaS企業で、テクニカルリードのアリスは2026年第1四半期、難しい決断を迫られることになる：
- React 18+：チームでは使い慣れているが、バンドルサイズは850KB、初回読み込み時間は3.2秒
- Vue 3：経験ゼロのチームながら、バンドルサイズは280KB、初回読み込み時間は0.9秒
- Angular 17：TypeScriptに対応しているが、習得には時間がかかる。初心者が使いこなせるようになるまでには、約2ヶ月かかる
- Svelte 4：コンパイル時の最適化が図られているが、エコシステムが小さく、求人市場も厳しい
- Solid.js：最高のパフォーマンスを発揮しますが、コミュニティの規模が5万人程度であるため、Stack Overflowで質問への回答を見つけることは難しいでしょう
プロダクトマネージャーのチャーリーはさらにプレッシャーをかける：
「管理ダッシュボードには3万点のSKUがあります。現在のReactアプリでは、フィルタリングに8秒かかります。また、新規開発者が最初の機能をリリースするまで3週間かかります。これら両方のパフォーマンスを、2026年第3四半期までに5倍に改善する必要があります。」
(2) Vue 3 での解決策
4週間の評価を経て、アリスはVue 3を選びました。その理由は次のとおりです：
TEXT
Bundle size: 850KB → 280KB (-67%)
Initial load: 3.2s → 0.9s (-72%)
Onboarding time: 3 weeks → 1 week (-67%)
Job market: growing 35% YoY
Vueの「段階的な」性質のおかげで、アリスは段階的にVueを取り入れることができます：
- 第1週：1ページをVue 3に置き換える（CDNスクリプトタグを使用、ビルド工程なし）
- 第4週：10ページをシングルファイルコンポーネントに移行する
- 第12週：ルーターとPiniaを使ったフルSPA
- 第24週：20万行を移行、ダウンタイムはゼロ
(3) 収益
Vue 3を導入してから6か月が経過した後、チームは以下の項目を測定しました：
- パフォーマンス：ダッシュボードのフィルタ処理時間 8秒 → 0.8秒（10倍高速化）
- 生産性：新機能のリリース期間を3週間から1週間に短縮
- 採用の質：面接した候補者5名のうち、4名がVueの経験を持っていた（Reactは2名）。
- バンドル：570KBの容量削減 = ページ読み込み速度が30%向上 = コンバージョン率が8%向上
3. Vueとは何か？
Vue（発音は /vjuː/、「view」と同様）は、ユーザーインターフェースを構築するためのプログレッシブなJavaScriptフレームワークです。2014年にEvan Youによって開発され、現在はVue.jsコアチームと世界中のコミュニティによってメンテナンスされています。
(1) 主要な定義 + Vue 3 アーキテクチャ図
graph TB
subgraph Vue3Ecology
V[Vue 3 Core<br/>@vue/runtime-core]
R[Vue Router 4<br/>Route Management]
P[Pinia<br/>State Management]
S[SSR/SSG<br/>Nuxt 3]
T[Vite<br/>Build Tools]
U[UI Component Library<br/>Element Plus/Naive UI]
end
V --> R
V --> P
V --> S
T --> V
U --> V
style V fill:#42b883,color:#fff
style R fill:#35495e,color:#fff
style P fill:#ffd02f
style S fill:#00dc82
style T fill:#646cff,color:#fff
(2) 5つの主な特徴
| 特徴 | 意味 | 比較 |
|---|---|---|
| プログレッシブ・フレームワーク | 軽量なライブラリから本格的なフレームワークまで、必要に応じて採用可能 | React は JSX を必要とする；Angular は包括的なツールセットを提供する |
| リアクティブデータ | データが変更されると、DOMを手動で操作することなく、UIが自動的に更新されます | jQueryでは手動での操作が必要です $(sel).text() |
| コンポーネントベース | UIが独立した再利用可能なコンポーネントに分解されている；シングルファイルコンポーネント（SFC） | HTMLタグは再利用できない；コンポーネントを組み合わせることができる |
| 宣言型レンダリング | 「どのように表示すべきか」を記述するものであり、「そのように表示させる方法」を記述するものではない | 命令型DOM操作 |
| 学習のハードルが低い | 始めるのに必要なのはHTML/CSS/JSの基礎知識だけで、TSは徐々に学んでいけばよい | Angularの場合は、まずデコレータとDIを学ぶ必要がある |
(3) Vueのユースケース
| シナリオ | 適性 | 説明 |
|---|---|---|
| 中小規模のSPA（Eコマース／CRM／管理画面） | ⭐⭐⭐⭐⭐ | 理想的なユースケース、Vueの一般的な活用例 |
| エンタープライズ向けアプリケーション | ⭐⭐⭐⭐ | Nuxt 3 およびマイクロフロントエンドアーキテクチャが必要 |
| モバイル H5 | ⭐⭐⭐⭐ | uni-app / Vant フレームワーク |
| デスクトップアプリ | ⭐⭐⭐ | Electron + Vue (中程度のソリューション) |
| 静的ブログ | ⭐⭐ | Astro / Nuxtの方が適している |
| 埋め込みウィジェット | ⭐⭐⭐⭐⭐ | ファイルサイズが極めて小さく、CDNから直接読み込まれる |
4. Vue 3 と Vue 2：主な違い
(1) 主な改善点の概要
| 次元 | Vue 2 | Vue 3 | 影響 |
|---|---|---|---|
| リアクティブシステム | Object.defineProperty | Proxy | パフォーマンスの向上、配列・Map・Setに対応 |
| APIのスタイル | Options APIを中核とする | Composition APIを優先 | ロジックの再利用がより柔軟 |
| TypeScript | 手動での設定が必要 | 完全なサポート | 型推論 ↑ |
| パッケージサイズ | 約33KB | 約20KB (gzip圧縮済み) | 読み込み ↑ |
| レンダリング速度 | 1倍 | 1.2～2倍 | パフォーマンス向上 |
| ツリーシェーキング | 未対応 | 完全対応 | 使用されていないコードはバンドルされない |
| フラグメント | シングルルート | マルチルートノード | より柔軟なテンプレート |
| テレポート | なし | 組み込み | 簡略化されたモーダル／ドロワー実装 |
| サスペンス | なし | 組み込み | 非同期コンポーネントのスムーズな処理 |
(2) なぜ Vue 3 が推奨されるのですか？
TEXT
✅ Vue 3 is the current major version (2020-09 Published, 2026 Stable 5+ years)
✅ Vue 2 As of 2023-12 EOL（End of Life），No longer maintained
✅ 90% New Project、100% The new ecosystem tools are all based on Vue 3
✅ Composition API is the Modern Writing Style Recommended by the Vue Team
✅ TypeScript Significant Improvement in Support，Team Code Quality ↑
❌ Vue 2 This is only necessary when maintaining legacy projects.
❌ Not studying Vue 3 = Missed Vue Ecology 95% Modern tools
5. Composition API 対 Options API
(1) 2つのAPIスタイルの比較
| 側面 | Options API | Composition API |
|---|---|---|
| 記述スタイル | データ／方法／計算結果のセクション | setup() 関数集 |
| ロジックの再利用 | ミックスイン（推奨されません） | コンポーザブル（推奨） |
| 型推論 | 概要 | 優れている（TS向けに特別に設計されている） |
| コードの整理方法 | オプションの種類ごとにグループ化 | ビジネスロジックごとにグループ化 |
| 習得の難易度 | 緩やか（初心者向け） | やや高い（ref/reactiveの理解が必要） |
| 適したサイズ | 小～中 | 中～大（すべてのサイズにおすすめ） |
(2) Options API の例
JS
// Options API - Group by option
export default {
data() {
return { count: 0, name: 'Alice' }
},
computed: {
doubleCount() {
return this.count * 2
}
},
methods: {
increment() {
this.count++
}
},
mounted() {
console.log('Component mounted')
}
}
(3) Composition API の例
JS
// Composition API - Logical Blocking
import { ref, computed, onMounted } from 'vue'
export default {
setup() {
const count = ref(0)
const name = ref('Alice')
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
onMounted(() => {
console.log('Component mounted')
})
return { count, name, doubleCount, increment }
}
}
(4) どちらを選べばいいですか？
| 提案 | シナリオ |
|---|---|
| 新規プロジェクトではComposition APIを使用しましょう | Vue 3プロジェクトにおける推奨の選択肢 |
| レガシープロジェクトの維持 | Options API の維持（既存のコードを壊さずに） |
| 多くの新規チームメンバー | Composition API は実は習得しやすい（「this」に関する混乱がない） |
| 複雑なビジネスロジック | コンポジションAPI（ビジネスロジックごとにコードを整理し、可読性を高める） |
6. Vue 3のエコシステム
Vue 3 は単なるフレームワークではなく、包括的なフロントエンド開発エコシステムです。
(1) 生態系の構成要素図
graph LR
subgraph Core
V[Vue 3 Core]
end
subgraph Official Recommendation
R[Vue Router 4]
P[Pinia]
T[Vite]
end
subgraph Community Ecosystem
E[Element Plus]
N[Naive UI]
U[UnoCSS]
I[Vue I18n]
end
V --> R
V --> P
V --> T
V --> E
V --> N
V --> U
V --> I
style V fill:#42b883,color:#fff
(2) 主要ツールのクイックリファレンス表
| ツール | 役割 | 習得すべき？ | 公式サイト |
|---|---|---|---|
| Vue 3 Core | フレームワーク本体 | ✅ 必修 | vuejs.org |
| Vite | ビルドツール、5倍高速 | ✅ 必修 | vitejs.dev |
| Vue Router 4 | ルーティング管理（SPAには不可欠） | ✅ 必修 | router.vuejs.org |
| Pinia | 状態管理（Vuexの代替） | ✅ 必修 | pinia.vuejs.org |
| Element Plus | デスクトップUIライブラリ | オプション | element-plus.org |
| Naive UI | デスクトップ用UIライブラリ | オプション | naiveui.com |
| Vue I18n | 国際化 | オプション | vue-i18n.intlify.dev |
| Nuxt 3 | SSR/SSG フレームワーク | オプション | nuxt.com |
| VueUse | 実用的なコンポーザブル・ライブラリ | オプション | vueuse.org |
(3) 包括的な学習パス
TEXT
Stage 1（This Tutorial Phase 1-3）：Vue 3 Core + Composition API
Stage 2 (This Tutorial Phase 4): Vue Router + Pinia + Advanced API
Stage 3（This Tutorial Phase 5）：Vite + Real Projects + Deployment
Advanced (Recommended Next Steps): Nuxt 3 SSR / Vitest Test / Performance Optimization
7. 完全な例：初めての Vue 3 アプリケーション
(1) ▶ サンプル：Hello Vue 3 カウンター（SFC—シングルファイルコンポーネント）
HTML
<!-- App.vue - First Vue 3 Applications -->
<template>
<div class="hello-vue">
<h1>{{ greeting }}</h1>
<p>You clicked the button <strong>{{ count }}</strong> times.</p>
<button @click="increment">Click me</button>
<p class="author">By {{ author }}, {{ currentYear }}</p>
</div>
</template>
<script setup>
// Composition API + <script setup> Syntax sugar
import { ref, computed } from 'vue'
const count = ref(0)
const author = ref('Alice')
// Computed Properties：Automatic Dependency Tracking
const currentYear = computed(() => new Date().getFullYear())
const greeting = computed(() => `Hello Vue 3! Welcome, ${author.value}!`)
// Methods
function increment() {
count.value++
}
</script>
<style scoped>
.hello-vue {
text-align: center;
padding: 2rem;
font-family: system-ui, sans-serif;
}
button {
background: #42b883;
color: white;
border: none;
padding: 0.5rem 1.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background: #35495e;
}
.author {
color: #666;
font-size: 0.9rem;
margin-top: 2rem;
}
</style>
出力（ボタンをクリックした後）：
TEXT
Hello Vue 3! Welcome, Alice!
You clicked the button 5 times.
[Click me]
By Alice, 2026
(2) ▶ サンプル：CDNの統合方法（HTML 5行で動作させる）
HTML
<!DOCTYPE html>
<html>
<head><title>Vue 3 Hello</title></head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<button @click="count++">Clicked {{ count }} times</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
return {
message: ref('Hello Vue 3!'),
count: ref(0)
}
}
}).mount('#app')
</script>
</body>
</html>
出力：HTML ファイルを開くと、ページに「Hello Vue 3!」という文字とボタンが表示されます。ボタンをクリックすると、数値が 1 増えます。
(3) ▶ サンプル：「Hello World」が5分で正常に実行される
BASH
# 1. Create a Project（Use create-vue Official Scaffolding）
npm create vue@latest my-vue-app
# Select: TypeScript? No, JSX? No, Router? No, Pinia? No, Vitest? No, E2E? No
cd my-vue-app
npm install
# 2. Start the development server
npm run dev
# → Local: http://localhost:5173/
# 3. Open in a browser，See Vue Default Welcome Page
(4) ▶ サンプル：進捗追跡チャート（5分／30分／1時間）
| フェーズ | 期間 | 完了基準 |
|---|---|---|
| 「Hello World」を動作させる | 5分 | ブラウザでVueのデフォルトページを表示する |
| コードを1行変更 | 10分 | 変数 App.vue の値を message に変更 |
| レスポンシブデータポイントを1つ追加 | 20分 | ref変数とテンプレート表示を追加 |
| インタラクションを1件追加 | 30分 | @click イベントとカウンターを追加 |
| Vercel へのデプロイ | 1 時間 | 公開 URL にアクセス可能 |
(5) ▶ サンプル：よくある5つの落とし穴（5分で回避する方法）
| 落とし穴 | 症状 | 解決策 |
|---|---|---|
「Forget」 .value |
count++ は機能しない |
JS では「ref」に count.value++ が必要 |
| テンプレートの自動展開 | テンプレート内に .value は不要 |
{{ count }} だけで十分 |
| オブジェクトからの応答が失われました | obj.name = 'x' 応答なし |
reactive() で囲む |
| 配列への直接代入 | arr[0] = 'x' が反応しない |
splice または push を使用してください |
| 非同期データ損失 | setTimeout による割り当てが応答しない | ref/reactive によって内部的に処理される |
❓ よくある質問
Q Vue 3とReact、どちらを選べばいいですか？
A 習得するまで継続して取り組める方を選んでください。どちらでもタスクの95％はこなせます。Vueは学習曲線が緩やかで、HTMLに近いテンプレート構文を採用しているため、初心者でも2週間で使いこなせるようになります。Reactはエコシステムがより充実していますが、JSXの思考モデルに慣れる必要があります。就職の見通しに関しては、どちらも需要が高いです。
Q Vue 3 を使うには TypeScript を学ぶ必要がありますか？
A いいえ、必須ではありません。Vue 3 は純粋な JavaScript を完全にサポートしています。ただし、エンタープライズレベルのプロジェクトに取り組む予定がある場合は、TypeScript を学ぶことを強くお勧めします。Vue 3 の Composition API で TypeScript を使用することはベストプラクティスとされており、型推論によってバグを 50% 削減できるとされています。
Q Vue 3のComposition APIは習得が難しいですか？
A Options APIよりは少し難しいです（refsやリアクティビティといった概念を理解する必要があるためですが）、一度習得すればより強力な機能を活用できます。まずはOptions APIから始めて基礎を固め、その後Composition APIに進んでスキルを次のレベルに引き上げることをお勧めします。
Q Vue 3はモバイルアプリの開発に適していますか？
A H5（uni-appフレームワークを使用）には利用できますが、ネイティブアプリについては、依然としてFlutterやReact Nativeをお勧めします。Vue 3の強みはWeb（デスクトップおよびH5）にあり、モバイルは二次的な選択肢です。
Q このチュートリアルを修了すれば、Vue関連の仕事に就くことはできますか？
A はい。このチュートリアルでは、Vue 3、Router、Pinia、Element Plus、Vite、TypeScriptを扱っており、これらはVue関連の求人情報の90％の要件を満たしています。残りのプロジェクト経験やアルゴリズム問題は、実務を通じて学ぶことができます。
Q Vue 2 のプロジェクトは引き続きメンテナンスできますか？
A メンテナンスは可能ですが、今後のアップデートは提供されません。Vue 2 は 2023 年 12 月にサポート終了（EOL）を迎えました。新規プロジェクトでは Vue 3 を使用してください。既存のプロジェクトをメンテナンスしている場合は、Vue 3 への移行を計画することをお勧めします。
Q Vue 3を採用している有名な企業にはどのようなところがありますか？
A GitLab、任天堂、Adobe Behance、アリババ（一部）、Xiaomi（一部）、BMW、NASAなどです。Vueの市場シェアは、中国、東南アジア、ヨーロッパで拡大し続けています。
📖 まとめ
- Vue.js は、2014年にエヴァン・ユーによって開発されたプログレッシブな JavaScript フレームワークです
- Vue 3は2020年9月にリリースされた現在のメジャーバージョンであり、2026年までに安定版として5年以上経過することになる。
- Vue 2は2023年12月にサポート終了（EOL）となりました。新規プロジェクトではVue 3を使用する必要があります。
- Vue 3の主な改善点：リアクティブプロキシ、コンポジションAPI、TypeScriptのファーストクラスサポート、ツリーシェイク
- Composition API は、Vue チームが推奨する最新のアプローチであり、ロジックの再利用においてより高い柔軟性を提供します。
- Vue 3 エコシステム：Vite（ビルド）＋ Vue Router 4（ルーティング）＋ Pinia（ステート）＋ Element Plus（UI）
- 段階的な導入：CDNとの統合から本格的なSPAまで、必要に応じて進化させていく
- 対象：中小規模のSPA（EC／CRM／管理システム）、中規模のエンタープライズアプリケーション
📝 練習問題
(1) 基礎問題（難易度：⭐）
vuejs.orgの公式ドキュメントを参照し、Vue 3の3つの主要な機能を挙げ、それぞれの機能を1文で説明してください。
(2) 上級問題（難易度：⭐⭐）
以下の点について、Vue 3 と React 18 を比較してください（表形式で）：
| ディメンション | ビュー 3 | React 18 |
|---|---|---|
| バンドルサイズ | ? | ? |
| 学習曲線 | ? | ? |
| 状態管理ライブラリ | ? | ? |
| ルーティングライブラリ | ? | ? |
| 国内市場シェア | ? | ? |
(3) チャレンジ問題（難易度：⭐⭐⭐）
身の回りの実際のプロジェクト（自分の会社、友人の会社、あるいはオープンソースプロジェクトなど）を3つ調べて、メモを取ってください：
- どのフロントエンドフレームワークを使用しましたか？
- なぜこのフレームワークを選んだのか？
- Vue 3 への移行にはどれくらいのコストがかかるでしょうか？
300文字の研究レポートを作成し、コメント欄に投稿してください。
