ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
Vue.js とは
Vue.js はユーザーインターフェース構築のための JavaScript フレームワークです。HTML のテンプレート構文をベースに、リアクティブなデータバインディング、コンポーネント指向、SFC (単一ファイルコンポーネント) を提供します。
| 項目 | 内容 |
|---|---|
| 初版 | 2014 年 (Evan You) |
| 現行版 | Vue 3.x (2020〜) |
| ライセンス | MIT |
| 公式サイト | https://ja.vuejs.org |
| GitHub Stars | 約 210k (2025 時点) |
| 主要採用企業 | GitLab / Nintendo / Adobe (Portfolio) / Alibaba |
最小サンプル
{{ message }}
主要コンセプト
| コンセプト | 説明 |
|---|---|
| リアクティブシステム | ref() / reactive() で値が変わると DOM 自動更新 |
| テンプレート構文 | {{ ... }} 補間、v-bind、v-on (@)、v-model、v-if、v-for |
| コンポーネント | UI を部品化。props で親から子へ、emit で子から親へ通信 |
| SFC | .vue 拡張子に template / script / style を集約 |
| Composition API | 関数的にロジックを組み立てる。 が現代の標準 |
| computed / watch | 派生値の自動再計算、副作用の監視 |
| ライフサイクル | onMounted / onUnmounted / onUpdated 等 |
Single File Component の構造
{{ 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 +
- Vue Router で SPA、Pinia で状態管理
- Nuxt 3 で SSR / SSG
- Vitest でテスト、Vue DevTools でデバッグ
FAQ
Q: Vue は廃れる?
A: 2025 年時点で GitHub stars 210k、Nuxt は急成長、State of JS でも上位。エンタープライズ採用 (GitLab 等) も継続。
Q: React か Vue か
A: 求人数は React > Vue。学習しやすさは Vue > React。日本国内の中規模 SaaS で Vue 採用が多い。
Q: Vue 2 プロジェクトの移行
A: 公式の Vue 2.7 (Naruto) で Composition API を使い、その後 Vue 3 へ。vue-demi も有効。
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページ
- インストール(ファイルのダウンロード)
- npmを使用したプロジェクトの作成(mac)
- for 繰り返し処理
- ifの条件分岐とtemplateを用いたグループ化
- on:click クリック時のイベント処理
- modelとdata フォーム入力値とDOMへの即時反映
- computed(算出プロパティ)と使い方とdataとの違い
- ライフサイクルフック(created / mounted / updated / destroyedの使い方)
- $nextTickの使い方(ライフサイクルフック)
- メソッドの定義方法
- エラー一覧
- ルーティング設定
- aリンクの貼り方と動的URLの作成
- Mixinを利用した共通処理の記述方法
- v-bindによるデータ連携
- ヘッダー/フッターの共通コンポーネント
- ナビゲーションの現在ページをハイライトする方法
- 画面サイズの取得方法
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- Laravel キャッシュクリア完全ガイド(cache:clear / config:clear / 2026-05-18 07:42:07
- プロジェクトの作成と削除 2026-05-18 07:42:07
- インストール直後にNetbeansが反応しない 2026-05-18 07:42:07
- 動画やチャンネルの検索 2026-05-18 07:42:07
- APIキー取得方法 2026-05-18 07:42:07
- チャンネル情報の取得 2026-05-18 07:42:07
- API 入門 — Web API(REST / GraphQL / gRPC / 2026-05-18 07:42:07
- インストール(eclipseプラグイン) 2026-05-18 07:42:07
- Laravel「Dotenv values containing spaces must be surrounded 2026-05-18 07:42:07
- エラー一覧 2026-05-18 07:42:07
- curl: (51) SSL: certificate subject name '~' does not match 2026-05-18 07:42:07
- インストール方法(Windows版) 2026-05-18 07:42:07
- JSONから配列に変換 2026-05-18 07:42:07
- 処理を一定時間待つ 2026-05-18 07:42:07
- A non well formed numeric value encountered 2026-05-18 07:42:07
コメントを削除してもよろしいでしょうか?