この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:9
更新日時:2026-06-10 11:03:32
タイトル: Vue.js
SEOタイトル: Vue.js 入門 — フロントエンドフレームワーク完全ガイド
| この記事の要点 |
- Vue.js は Evan You が 2014 年に公開したプログレッシブな JavaScript フレームワーク
- 現行は Vue 3 (2020 年〜、Composition API + Vite ベース)。Vue 2 は 2023/12/31 EOL
- SFC (Single File Component) 1 ファイルに
主要コンセプト
| コンセプト | 説明 |
|---|
| リアクティブシステム | ref() / reactive() で値が変わると DOM 自動更新 |
| テンプレート構文 | {{ ... }} 補間、v-bind、v-on (@)、v-model、v-if、v-for |
| コンポーネント | UI を部品化。props で親から子へ、emit で子から親へ通信 |
| SFC | .vue 拡張子に template / script / style を集約 |
| Composition API | 関数的にロジックを組み立てる。
-
{{ title }}
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 へ
学習ロードマップ
- HTML / CSS / JavaScript ES2015+ の基本
- CDN で Hello World → リアクティブとイベント
- create-vue で SFC を書く
- Composition API +
|
|
