Skip to main content

Vue ガイド

Vue でカウンターを作ると、count.value++ と書くだけで画面の数字が変わります。この手軽さの裏側では、値の読み書きを追跡する仕組みが動いています。仕組みを知らないまま書き進めても動くものは作れますが、「なぜ再代入するとリアクティブでなくなるのか」「なぜ分割代入すると壊れるのか」で止まります。

このガイドは、Vue 3.5 の API を 設計意図から説明することを狙いにしています。書き方の一覧ではなく、その書き方が選ばれた理由と、崩したときに何が壊れるかを扱います。

このガイドについて​

扱うのは Composition API と script setup です。Options API は既存コードを読むときに必要になりますが、新規に書く対象としては扱いません。コード例はすべて TypeScript で、型がどこまで効くかも論点に含めます。

全体を通じて次の方針で書きます。

  • script setup と TypeScript で書く。Options API は既存コードを読むときに触れるだけで、新規に書く対象としては扱わない
  • 状態の宣言は ref() を第一候補にする。これは公式ドキュメントが推奨として明記している方針で、2 章で出典を示します
  • 再利用する単位は Composable に切り出す
  • 状態管理には Pinia を使う
  • サーバー側の描画が必要な場合に Nuxt 4 を扱う
  • Vue 2 系の記述は載せない。2023 年末にサポートが終了しています

対象読者​

  • JavaScript で DOM を操作した経験があり、フレームワークの入口を探している人
  • Vue を書いているが、リアクティビティの挙動でつまずいたことがある人
  • React の経験があり、Vue の設計思想との違いを知りたい人

各章は前の章を前提に進みますが、Vue Router 以降の章は独立して読めます。

前提知識​

必須度知識補足
必須HTML と CSS で画面を作った経験文法の暗記は要りません
必須JavaScript の基本文法分割代入、アロー関数、Promise の記法は説明せずに使います。ただし Vue の挙動を説明するうえで必要な場面では、値の受け渡しの仕組みに立ち入ります
推奨TypeScript の基本的な型注釈コード例は TypeScript ですが、複雑な型は使いません
不要Vue 2 の経験Vue 2 は 2023 年末にサポートが終了しており、本ガイドでは扱いません

技術スタック​

対象バージョン位置づけ
Vue3.5本体。3.6 は候補版のため基準にしません
TypeScript5 系以降型注釈と vue-tsc による検査
Vite8開発サーバーとビルド
Vue Router5画面遷移
Pinia4状態管理
Nuxt4サーバー側の描画とファイルベースのルーティング

章立て​

全 20 章を 6 つの部に分けています。

第 1 部 Vue の基礎​

章扱うこと
01 環境構築と SFCcreate-vue でのプロジェクト作成と、単一ファイルコンポーネントの 3 ブロック構成
02 リアクティビティref と reactive の使い分け。再代入と分割代入が壊れる理由
03 テンプレート構文とディレクティブ属性のバインディング、条件分岐、リスト描画。key が必要な理由
04 イベントとフォーム入力イベント修飾子と v-model。括弧の有無で何が変わるか
05 算出プロパティとウォッチャーcomputed のキャッシュと watch の副作用。どちらを選ぶかの判断

第 2 部 Composition API​

章扱うこと
06 script setup とコンポーネントの契約defineProps と defineEmits で親子の境界を型として宣言する
07 ライフサイクルフックの実行順序と、どの処理をどこに置くか
08 Composablesロジックを関数へ切り出す。戻り値と引数の形、後片付けの預け先
09 Composable とサーバー描画SSR で壊れる書き方。状態を共有するときの落とし穴

第 3 部 コンポーネントの組み立て​

章扱うこと
10 コンポーネント間の v-modeldefineModel で双方向の受け渡しを組む
11 スロット描画の一部を親に委ねる。スコープ付きスロットでデータを渡す
12 provide / inject とカスタムディレクティブ階層を飛ばした受け渡しと、DOM を直接触る手段
13 Teleport と Suspense描画先を移す仕組みと、非同期の待ち状態を宣言的に扱う仕組み

第 4 部 画面遷移と表現​

章扱うこと
14 トランジション出入りのアニメーション。クラスが付く順序と JavaScript フック
15 Vue Router の基本ルート定義、プログラムからの遷移、動的ルート、入れ子のルート
16 ナビゲーションガードと最適化遷移の割り込み、スクロール制御、遅延読み込み

第 5 部 状態とデータ​

章扱うこと
17 Piniaストアの定義と分割。storeToRefs が必要になる理由
18 HTTP 通信とデータ取得取得処理の置き場所と、環境変数の扱い

第 6 部 Nuxt と実践​

章扱うこと
19 Nuxtファイルベースのルーティング、useFetch、サーバー API
20 実践: 認証とデプロイログイン処理の組み立てと、トークンの置き場所。ビルド成果物の配置

各章の構成​

すべての章を同じ形で構成します。

節書くこと
この章で学ぶことその章を読み終えたときにできるようになること
本文仕組みの説明と判断の手順。図と表とコード例を使います
まとめその章の要点
関連リファレンス深掘り先の既存ガイドと、公式ドキュメントへのリンク
次に読む次の章と、関連する他の部の章への導線

既存ガイドとの関係​

このサイトには技術スタックごとのガイドがすでにあります。本ガイドは Vue というフレームワークの学習に絞り、言語仕様や CSS は各ガイドへ送ります。

連載Focus段階前提
JavaScript ガイド言語仕様入門なし
TypeScript ガイド言語仕様入門〜中級JavaScript 基礎
Vue ガイド (本ガイド)フレームワーク入門〜中級HTML/CSS と JavaScript 基礎
React ガイドフレームワーク入門〜中級HTML/CSS と JavaScript 基礎
Tailwind CSS ガイドCSS スタイリング入門〜中級HTML/CSS 基礎

React ガイドとは対象が並びます。どちらもコンポーネントを組み合わせて UI を作るライブラリですが、状態の持ち方が違います。React は状態の更新を関数の呼び出しとして表し、再描画の単位をコンポーネントに置きます。Vue は値そのものに追跡の仕組みを埋め込み、依存する箇所だけを更新します。この違いが key の扱いやメモ化の必要性に出てくるので、両方を読むと設計の選択肢が広がります。

読み方​

  • はじめて Vue を触る — 第 1 部から順に読み、コードを動かしながら進めてください
  • 書いているが仕組みに不安がある — 02 章と 05 章と 08 章だけでも読む価値があります
  • React から来た — 02 章でリアクティビティの違いを掴み、06 章で親子の契約の書き方を確認してください
  • 特定の機能を調べたい — 上の章立てから該当する章を直接開いてください

それでは 環境構築と SFC から始めましょう。