| 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 +
ページの作成
親となるページを選択してください。
ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例： 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例： 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！
同階層のページ
-
Vue.js
-
React
-
Express
2026-05-17 15:24:25
T
456
作成日時
2019-06-29 17:08:57
更新日時
2026-05-17 15:24:25
バージョン
9
閲覧数
456
コメントを削除してもよろしいでしょうか？
|