※ 当ブログ「日々是事始め（コレコト）」はプロモーションを含みます。
Vue 3 を学び始めたとき、私がいちばん困ったのは「何から手をつければいいのか分からない」ことでした。リアクティブ、Composition API、Vue Router、Pinia、REST API、Swagger、Vuetify……単語は次々に出てくるのに、つながりが見えてこない。結局あちこちのページをつまみ食いして、毎回「これは Vue の話なのか、ライブラリの話なのか」で迷子になっていました。
このページは、そのときの自分に渡したかった「学ぶ順番の地図」です。単なる入門ではなく、最終的に業務アプリ（CRUD）を作れる状態をゴールに、基礎 → コンポーネント → API連携 → UI（Vuetify）→ 完成、という一本道で並べ直しました。各記事はこのページから順にたどれます。
※ 学習用に調べた内容を、個人的にわかりやすい形でまとめています。文章や図は AI の補助を受けながら作成しています。誤りに気づいたら都度直していきます。
このロードマップのゴール
最終的に、次のような小さな業務アプリ（題材はタスク管理）を自分で組み立てられる状態を目指します。
- 一覧・詳細・登録・編集・削除（CRUD）の画面がある
- ログイン状態を持ち、画面間で共有する
- REST API と HTTP で通信し、JSON を画面に表示する
- OpenAPI（Swagger）から TypeScript の API クライアントを生成する
- Vuetify で見た目を整え、入力チェックと API エラー表示まで行う
ポイントは、「画面は状態の結果である」という考え方を最初に腹落ちさせることです。ここを飛ばして Vuetify や API 連携に進むと、不具合が「Vue の問題なのか・UIライブラリの問題なのか・API の問題なのか」を切り分けられなくなります（私はこれで何度もハマりました）。
全体像（5つのステップ）
| ステップ | 学ぶこと | ゴール |
|---|---|---|
| ① 基礎 | Vueとは / リアクティブ / SFC / script setup | 状態が変われば画面が変わる仕組みを理解する |
| ② コンポーネント | 設計 / props・emits・slots / Router / Pinia / composables | 画面を部品に分け、状態とロジックを整理する |
| ③ API連携 | REST API / Swagger・OpenAPI / コード生成 / 設計 | 型安全にバックエンドとつなぐ |
| ④ UI | Vuetify導入 / フォーム・バリデーション | 実用的な画面に仕上げる |
| ⑤ 完成 | CRUDアプリ | ①〜④を1つのアプリにまとめる |
① 基礎クラスタ
まずは「Vue がそもそも何をしてくれるのか」と、その核であるリアクティブを理解します。ここが一番大事な土台です。
② コンポーネント・状態管理クラスタ
画面を小さな部品に分け、親子のデータの受け渡し、ページ遷移、画面をまたぐ状態の共有、ロジックの再利用を学びます。
③ REST API・OpenAPI連携クラスタ
フロント（Vue）とバックエンド（REST API）の境界を理解し、OpenAPI（Swagger）から型安全な API クライアントを生成して呼び出す流れを学びます。実装寄りで、個人ブログでも検索で勝負しやすい領域です。
④ UI（Vuetify）クラスタ
見た目を整える UI ライブラリ Vuetify は、あえて最後に入れます。先に状態と API を固めてから被せると、切り分けが楽になります。
⑤ 完成編
①〜④を1つにまとめ、REST API + OpenAPI + Vuetify でタスク管理アプリ（CRUD）を組み立てます。
学ぶ順番のコツ（つまずいた人へ）
- Vuetify は最初に入れない。UI で見た目が崩れると、Vue の問題かCSSの問題か区別できなくなります。
- Pinia を最初から使わない。1画面で完結する状態は
ref/reactiveで十分。共有が必要になってから Pinia を足します。 - 生成した API クライアントを
.vueから直接呼ばない。repository / composable で包むと、API 仕様変更の影響を画面に波及させずに済みます。
もっと体系的に学ぶなら（書籍）
この記事はシリーズの一部です。TypeScript前提で Composition API・Pinia・Vue Router・テストまで一冊で体系的に学びたい方には、内容がそのまま重なる次の本がおすすめです。
PR
📕 紙の本
 | Vue 3 フロントエンド開発の教科書 [ WINGSプロジェクト 齊藤 新三 ] 価格:3960円 |
📱 電子書籍版
 | Vue 3 フロントエンド開発の教科書 【電子書籍】[ WINGSプロジェクト 齊藤新三【著】 ] 価格:3960円 |
検証環境（このシリーズのコードについて）
本シリーズのサンプルコードは、実際の Vite + Vue 3 プロジェクトに配置し、TypeScript の型チェック（vue-tsc）を通し、さらに実際のブラウザで画面が表示・描画されることを確認したうえで掲載しています（2026年7月時点）。確認に使った主なバージョンは次のとおりです。
- Vue 3.5 / TypeScript 6 / Vite 8（Node 22）
- Vue Router 5 / Pinia 3 / Vuetify 4
- @tanstack/vue-query 5 / axios 1 系
補足：サンプル中の @/... という import は、Vite の resolve.alias と tsconfig の paths で src を指すよう設定したエイリアスです（プロジェクト作成時に設定します）。
※ 型チェックとブラウザでの表示確認までを行っています（すべての操作を網羅した自動テストではありません）。また OpenAPI Generator / Orval については、生成物を想定した型に対してコードを検証しており、生成コマンドの実行結果そのものではありません。
PR
