第3回まで無料

Vue.js 入門コース

Vite での環境構築から、テンプレート構文・ref とリアクティビティ・props と emit・Composition API・Vue Router・Pinia・フォームとバリデーション・TypeScript・テストまで。全30レッスンで ToDo アプリを仕上げてビルドし、最後は React との違いを整理して、どちらを選ぶかを自分で判断できるところまで進みます。コードとテストの出力は、すべて Vue 3.5.13 と Vitest 3 で実際に動かしたものです。

レッスン 1 からはじめる 全コースを解放する

カリキュラム

全30レッスンを6つの章に分けています。第1章から順に進めるのがおすすめですが、 気になるところだけ拾い読みしてもかまいません。 ※ .vue ファイル（単一ファイルコンポーネント）はブラウザ内で実行できないため、第1回で作る Vite のプロジェクトで試してください。前提は JavaScript の基本です。

Chapter 1 — Vue を始める（第1〜5回）

Vite でプロジェクトを作り、テンプレート構文・v-if とイベント・ref とリアクティビティを押さえます。最後は .vue ファイル（単一ファイルコンポーネント）で部品を 1 つ作り、親から使い回します。

1

Vite で最小の Vue アプリを作る

Vite で Vue 3 のプロジェクトを作り、ref でカウンターを動かす。値が変わると画面が追従するリアクティビティの入口を、Vitest のテストで確かめるところまで。

Free
2

テンプレート構文（補間と v-bind）

{{ }} の補間、v-bind（:）での属性バインド、:class のオブジェクト構文、テンプレートに書ける式。: の付け忘れで文字列になる落とし穴まで。

Free
3

v-if で出し分け、@click でイベントを受ける

v-if / v-else で表示を出し分け、v-on（@）でクリックを受けて開閉のトグルを作る。v-if は要素ごと DOM から消えることをテストで確かめ、v-show との使い分けまで。

Free
4

ref とリアクティビティ（なぜ .value が要るのか）

ref で包んだ値と、ただの変数を並べて比べる。ただの変数を変えても再描画は起きないことをテストで確かめ、script では .value、テンプレートでは不要という書き分けの理由まで。

🔒 ベーシック
5

単一ファイルコンポーネント（.vue の 3 ブロック）

script setup・template・style scoped の 3 ブロックで 1 つの部品を書き、親から import して使い回す。.vue をビルドする設定、パスカルケースの命名、scoped が届く範囲まで。

🔒 ベーシック

Chapter 2 — コンポーネントを組む（第6〜10回）

props で親から子へ値を渡し、emit で子から親へ知らせ、スロットで中身を差し込みます。v-for と key でリストを描き、最後は v-model で入力と状態を結びます。

6

props で親から子へデータを渡す

defineProps で型・必須・既定値を宣言し、親から子へ値を渡す。文字列はそのまま、数値は : で渡す理由と、props を子で書き換えてはいけない理由まで。

🔒 ベーシック
7

emit で子から親へイベントを上げる

defineEmits で宣言し、emit('like') で親に知らせる。状態は親に持ち、子は表示とイベントだけに薄く保つ。emitted() でイベントの発火をテストするところまで。

🔒 ベーシック
8

スロットで中身を差し込める部品を作る

名前つきスロットと既定スロットで、枠だけ用意して中身は使う側が決める部品を作る。#title での差し込み、既定の中身、props との使い分けまで。

🔒 ベーシック
9

v-for でリストを描き、key を付ける

v-for で配列を一覧に描き、安定した id を key に付ける。先頭の削除が画面に反映されることをテストで確かめ、index を key にしてはいけない理由まで。

🔒 ベーシック
10

v-model で入力と状態を結ぶ

テキスト入力とチェックボックスを v-model で ref に結び、入力がそのままプレビューに映ることを setValue で確かめる。v-model の中身、:value と混ぜない理由、数値として受け取る方法まで。

🔒 ベーシック

Chapter 3 — Composition API（第11〜16回）

reactive・computed・watch・ライフサイクルフックで、Composition API の道具をそろえます。最後はロジックをコンポーザブルに切り出し、リアクティビティが切れる落とし穴を確かめます。

11

reactive でオブジェクトを扱う（ref との使い分け）

reactive でオブジェクトをまるごとリアクティブにし、.value なしで書く。フォームのようなまとまりに向く理由と、再代入・分割代入でつながりが切れる注意、ref との使い分けまで。

🔒 ベーシック
12

computed で算出プロパティを作る

状態から導く値を computed に出し、依存が変わったときだけ再計算させる。小計と税込を重ねて追従を確かめ、メソッドとの違い（キャッシュ）と、中で状態を変えてはいけない理由まで。

🔒 ベーシック
13

watch で変化を監視して副作用を行う

watch で値の変化に反応し、新旧の値を受け取ってログを残す。computed との使い分け、immediate・deep・watchEffect の書き方、何でも watch にしない理由まで。

🔒 ベーシック
14

ライフサイクル（onMounted と onUnmounted）

onMounted で DOM に載った直後に処理を始め、onUnmounted で後始末する。状態の変化と clearInterval の呼び出しをテストで確かめ、後始末を忘れたときに起きることまで。

🔒 ベーシック
15

コンポーザブルを自作する（use〜 関数）

カウンターのロジックを useCounter という関数にまとめ、呼ぶたびに独立した状態ができることを確かめる。コンポーネント無しでテストできる利点と、Pinia との使い分けまで。

🔒 ベーシック
16

リアクティビティの落とし穴（分割代入と toRefs）

reactive を分割代入すると Proxy から外れて追従しなくなる理由と、toRefs でつながりを保つ方法。コンポーザブルで return toRefs(state) とする定番と、props の分割代入まで。

🔒 ベーシック

Chapter 4 — ルーティングと状態管理（第17〜22回）

Vue Router でページを分け、動的ルートとナビゲーションガードを使います。Pinia でストアを作って状態を共有し、最後は非同期のデータ取得を扱います。

17

Vue Router でページを切り替える

routes に URL とコンポーネントの対応表を書き、router-link で遷移して router-view に描く。createMemoryHistory を使ったテストと、history モードの選び方まで。

🔒 ベーシック
18

動的ルートと useRoute でパラメータを読む

/users/:id の動的セグメントで、1 つのコンポーネントを ID 違いで使い回し、useRoute().params.id で値を読む。使い回しで onMounted が再実行されない注意と、props: true まで。

🔒 ベーシック
19

ナビゲーションガードでページを守る

ルートに meta で印を付け、router.beforeEach で遷移の前に割り込んで、未ログインなら /login へ送る。ログイン判定を外から渡してテストする方法と、無限リダイレクトの注意まで。

🔒 ベーシック
20

Pinia でストアを作る

defineStore で setup 形式のストアを作り、離れたコンポーネントから同じ状態を使う。画面越しとストア単体の両方をテストし、storeToRefs での取り出しと、何でもストアに入れない理由まで。

🔒 ベーシック
21

Pinia の getter と action（カートを作る）

setup 形式のストアで、state は ref、getter は computed、action は function と書き分ける。カートの点数と合計金額を getter に導かせ、UI 無しでテストするところまで。

🔒 ベーシック
22

非同期データ取得（ローディング・エラー・成功）

fetch でデータを取るときに、ローディング・エラー・成功の 3 状態を持ち、try / catch / finally と v-if / v-else-if / v-else で出し分ける。fetch をモックして両方をテストし、競合状態の注意まで。

🔒 ベーシック

Chapter 5 — 実務で使う（第23〜27回）

フォームの修飾子とバリデーション、TypeScript との併用、コンポーネントのテストを押さえます。最後は商品リストを作って、ここまでの道具を組み合わせます。

23

v-model の修飾子（.trim・.number・.lazy）

v-model に .trim と .number を付けて、入力を受け取る前に整える。前後の空白が取れて number 型になることをテストで確かめ、.lazy と空欄の扱い、フォームを reactive でまとめる話まで。

🔒 ベーシック
24

バリデーション（ルールを純粋関数に切り出す）

検証ルールを UI から切り離した純粋関数にし、computed でエラーと送信可否を導いて :disabled に結ぶ。画面とルール単体の二段でテストし、touched やライブラリの検討まで。

🔒 ベーシック
25

TypeScript と使う（型つきの props）

script setup lang="ts" と defineProps の型引数で、props に型を付ける。誤った型を vue-tsc が型チェックで検出すること、Vitest は型を消して動かすだけという違い、withDefaults と ref の型推論まで。

🔒 ベーシック
26

コンポーネントのテスト（振る舞いを確かめる）

Stepper を題材に、Vitest と @vue/test-utils で「クリック → 表示・ボタンの状態」を確かめる。mount・get・trigger・attributes などの基本の道具と、内部の変数ではなく振る舞いをテストする理由まで。

🔒 ベーシック
27

【実践】商品リストを作る（絞り込みと並べ替え）

カテゴリで絞り込み、価格で並べ替える商品一覧を作る。ロジックを純粋関数に切り出し、select の v-model と computed で画面に結んで、画面と関数の二段構えでテストする。

🔒 ベーシック

Chapter 6 — 作って公開する（第28〜30回）

ToDo アプリを仕上げ、本番用にビルドして公開します。最後は React との違いを整理して、どちらを選ぶかを自分で判断できるようにします。

28

【実践】Pinia で ToDo アプリを作る

追加・完了・削除と残り件数を持つ ToDo アプリを作る。状態とロジックを Pinia のストアに寄せ、画面は @submit.prevent と action の呼び出しだけに薄く保つ。

🔒 ベーシック
29

ビルドとデプロイ（dist を静的ホスティングへ）

npm run build で dist/ に静的ファイルを出し、preview で確かめて静的ホスティングに置く。import.meta.env で動作モードを読み、SPA の URL 直打ちと VITE_ で始まる環境変数の注意まで。

🔒 ベーシック
30

React との違いと、どちらを選ぶか

useState と ref、useMemo と computed、useEffect と watch のように、React と Vue の対応を表で整理する。依存の追跡・再レンダリング・テンプレート・公式の厚さの違いと、選び方の基準まで。

🔒 ベーシック

全30レッスンを終えたら、次は型でコンポーネントを守る TypeScript へ。メンバーシップで全コースが解放されます。