学習ロードマップ

Vue.js 入門

テンプレート構文から Composition API・Pinia まで、Vue 3 で SPA を単独で組み上げられる状態に到達するための 5 冊。

これからはじめる人のJavaScript/Vue.jsの教科書

これからはじめるVue.js 3実践入門

Vue 3　フロントエンド開発の教科書

Vue．js入門 : 基礎から実践アプリケーション開発まで

SCROLL TO BEGIN

このロードマップが扱うもの

- HTML/CSS と素の JavaScript は書けるが、SPA フレームワークを体系的に触った経験がないエンジニア - jQuery や Options API 時代の Vue.js で止まっており、Vue 3 / Composition API に乗り換えたい実務者 - React ではなく Vue を第一選択にしたいフロントエンド初中級者

このロードマップの全体像

対象読者

HTML/CSS と素の JavaScript は書けるが、SPA フレームワークを体系的に触った経験がないエンジニア
jQuery や Options API 時代の Vue.js で止まっており、Vue 3 / Composition API に乗り換えたい実務者
React ではなく Vue を第一選択にしたいフロントエンド初中級者

5 冊で到達する状態

テンプレート構文・ディレクティブ・コンポーネント分割を自力で設計できる
Options API と Composition API を状況に応じて選び分け、ref / reactive / computed / watch を読み書きできる
Vue Router でのルーティングと Pinia によるストア設計を、小規模 SPA で一通り組める
Vite ベースのプロジェクトを立ち上げ、SFC・ビルド・デプロイまでの流れを説明できる
<script setup> や TypeScript 併用など、現場で使われる書き方の引き出しを持てる

進め方のヒント

1 冊目で JavaScript 側の基礎を埋め、Vue に入ってから文法でつまずかない土台を作る
2-3 冊目は写経だけで終わらせず、Todo / メモアプリなど小さな SPA を 1 本完走させる
4 冊目で Composition API / Pinia / Vite の最新スタックに橋渡しし、5 冊目で設計と実装力を深める

01
ステップ 01 JS から Vue まで橋渡しする導入書
02
ステップ 02 Vue 3 の最短ルート入門書
03
ステップ 03 サンプル駆動で学ぶ実践入門
04
ステップ 04 Composition API と Vite/Pinia の教科書
05
ステップ 05 設計と実装力を深める応用書

第 1 章

JS から Vue まで橋渡しする導入書

JS から Vue まで橋渡しする導入書

JavaScript の基礎を固めつつ Vue.js に入る構成。言語そのものへの不安を残したまま SPA 学習に進まないための地ならしとして最初に置く。
この章の 1 冊 これからはじめる人のJavaScript/Vue.jsの教科書
たにぐちまこと / マイナビ出版 / 2020

JavaScript・TypeScript・Vue.
この本で身につくこと
- ECMAScript 2015 構文(アロー関数・クラス・モジュール・Promise)を使った現代的な JavaScript の書き方
- イベントリスナー・非同期通信・Cookie といった実務頻出 API の基本的な扱い方
- TypeScript の型宣言・インターフェイス・クラス宣言の初歩的な読み書き
- Vue.js のディレクティブ・コンポーネント・ミックスインを組み合わせた UI 構築
想定読者: HTMLとCSSの基礎は押さえており、これからJavaScriptとフロントエンドフレームワークを同時に学びたい入門者
本の詳細を見る →
Vue 3 の最短ルート入門書

JavaScript 入門を終えた読者がテンプレート構文とコンポーネントの勘所を短時間で掴む 1 冊。まず動く Vue アプリを書ける状態を作る。
この章の 1 冊 Vue.js 3 超入門
掌田津耶乃 / 秀和システム / 2020

JavaScript 既習者が Vue 3 の基礎を手順ごとに習得する
この本で身につくこと
- Vue 3 のテンプレート構文・ディレクティブ・リアクティビティの基本を動かしながら理解する
- 単一ファイルコンポーネント(SFC)の構造と props / emits によるコンポーネント間データ連携
- Composition API の基礎的な使い方と Options API との使い分けの判断軸
- 外部サービス(REST API 等)との連携パターンを簡単なサンプルアプリで体験する
想定読者: JavaScript 入門書を読み終えたばかりで Vue.js の経験がない学習者。既存の入門書で挫折した経験を持ち、丁寧な手順解説を求めている人。
本の詳細を見る →
サンプル駆動で学ぶ実践入門

豊富なサンプルで Vue.js のエッセンスを手を動かしながら確認する段階。既存ページへの後乗せ導入も視野に入れ、適用パターンの引き出しを増やす。
この章の 1 冊 これからはじめるVue.js 3実践入門
山田祥寛 / SBクリエイティブ / 2022

Vue.
この本で身につくこと
- Vue.js 3 のリアクティブデータ・ディレクティブ・コンポーネントという 3 つの柱を体系的に説明できる
- 単一ファイルコンポーネント(SFC)を使った Vue CLI プロジェクト構成を組める
- props / emit / slot によるコンポーネント間通信を設計できる
- Vue Router を使ったマルチビュー・入れ子ビュー・ナビゲーションガードを実装できる
想定読者: HTML と JavaScript の基礎があり、フロントエンドフレームワークをはじめて学ぼうとしている Web 開発者
本の詳細を見る →
Composition API と Vite/Pinia の教科書

Vue 3 の TypeScript 標準化・Composition API・Pinia・Vite を通しで扱う骨格本。ここで現代スタックに切り替え、実務プロジェクト構成を言語化する。
この章の 1 冊 Vue 3　フロントエンド開発の教科書
WINGSプロジェクト　齊藤新三/山田祥寛 / 技術評論社 / 2022

Vue 3 を Composition API と TypeScript 前提で体系的に習得する教科書
この本で身につくこと
- `<script setup>` と Composition API を用いたコンポーネント設計の基本パターンを身につけられる
- `ref` と `reactive` の違いを踏まえて、状態をどの粒度で持つか判断できる
- Vue Router による SPA ルーティングと、ナビゲーションガードを組み合わせた画面遷移を実装できる
- Pinia を用いた状態管理で、コンポーネント間のデータ共有とストア設計を進められる
想定読者: HTML/CSS/JavaScript の基礎があり、Vue 3 を Composition API と TypeScript の組み合わせで実務水準まで習得したいフロントエンドエンジニア
本の詳細を見る →
設計と実装力を深める応用書

基礎から実践アプリケーション開発までを通して設計力を養う 1 冊。ルーティング・状態管理・テストを含む中規模 SPA を自走で組める水準まで引き上げる。
この章の 1 冊 Vue．js入門 : 基礎から実践アプリケーション開発まで
川口和也/喜多啓介 / 技術評論社 / 2018

Vue.
この本で身につくこと
- リアクティブデータバインディング・ディレクティブ・ライフサイクルフックなど Vue.js の基礎概念を実装レベルで理解できる
- Vue Router を用いた SPA 構築とユーザー認証を含むルーティング設計ができる
- Vuex によるアプリケーション全体のステート管理を、ミューテーション・アクション・ゲッターの使い分けを含めて実装できる
- Vue CLI と単一ファイルコンポーネント(SFC)で本番想定の開発環境を構築できる
想定読者: HTML/CSS・JavaScript の基礎はあるが Vue.js は未経験のフロントエンド入門者、またはバックエンドエンジニアでモダンフロントエンドを自習したい人
本の詳細を見る →