学習ロードマップ

Nuxt.js 入門

Vue 3 の基礎を固め、Composition API と Vite/Pinia を経て Nuxt で SSR/SSG を使い分けられる状態まで 5 冊で進む。

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

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

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

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

SCROLL TO BEGIN

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

- HTML/CSS と JavaScript の基本は書けるが、Vue や Nuxt を体系的に学んだことがないフロントエンド初級者 - jQuery や素の DOM 操作から、コンポーネント指向の書き方へ移行したいエンジニア - Nuxt を使って SSR/SSG サイトを組みたいが、Vue 3 の Composition API に不安がある中級者

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

対象読者

HTML/CSS と JavaScript の基本は書けるが、Vue や Nuxt を体系的に学んだことがないフロントエンド初級者
jQuery や素の DOM 操作から、コンポーネント指向の書き方へ移行したいエンジニア
Nuxt を使って SSR/SSG サイトを組みたいが、Vue 3 の Composition API に不安がある中級者

5 冊で到達する状態

Vue 3 の単一ファイルコンポーネント・リアクティビティ・ディレクティブを説明しながら書ける
Options API と Composition API を状況に応じて選べ、ref / reactive / computed の違いを言語化できる
Vite / Pinia / Vue Router を組み合わせた SPA を、自力でゼロから立ち上げられる
Nuxt のディレクトリ規約・ルーティング・データ取得・レンダリングモードを理解し、SSR と SSG を用途で選べる
Vue エコシステム全体のマップを持ち、Nuxt プロジェクトで出てくる用語に迷子にならない

進め方のヒント

1〜2 冊目で Vue の語彙を揃え、3 冊目で Composition API 時代の書き方に一度アップデートする
手を動かすときは、各章のサンプルを写経しつつ「自分の題材」に差し替えると定着が早い
Nuxt に入る前に Vue Router とデータ取得の感覚を持っておくと、Nuxt のファイルベースルーティングが素直に読める

01
ステップ 01 JS からの橋渡しで用語マップを描く
02
ステップ 02 Vue 3 の骨格を最短で通読
03
ステップ 03 Composition API と Vite で実践入門
04
ステップ 04 Vite/Pinia まで含む Vue 3 教科書
05
ステップ 05 設計と実践アプリで仕上げる

第 1 章

JS からの橋渡しで用語マップを描く

JS からの橋渡しで用語マップを描く

JavaScript の復習と Vue / Nuxt / TypeScript などの関連語の位置づけを先に掴むための入口。周辺用語の地図を作ってから Vue 本編に入る。
この章の 1 冊 これからはじめる人のJavaScript/Vue.jsの教科書
たにぐちまこと / マイナビ出版 / 2020

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

Vue.js の文法とコンポーネントを、初心者向けに一気通貫で学べる入門書。ロードマップの土台として、手を動かす最初の一冊に据える。
この章の 1 冊 Vue.js 3 超入門
掌田津耶乃 / 秀和システム / 2020

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

Vue 3 のエッセンスを豊富なサンプルで整理し直す実践入門。Options API との違いを踏まえ、現行プロジェクトで通用する書き方へ切り替える。
この章の 1 冊 これからはじめるVue.js 3実践入門
山田祥寛 / SBクリエイティブ / 2022

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

Composition API / Vite / Pinia / Vue Router を体系的に扱う教科書。SPA を自走で組み上げられるよう、エコシステム全体を標準セットとして押さえる。
この章の 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 の組み合わせで実務水準まで習得したいフロントエンドエンジニア
本の詳細を見る →
設計と実践アプリで仕上げる

基礎から実践アプリ開発までを扱う定番書。Vue の設計・実装力を詰めたうえで Nuxt に進み、SSR/SSG 選択の判断軸を作る到達点として置く。
この章の 1 冊 Vue．js入門 : 基礎から実践アプリケーション開発まで
川口和也/喜多啓介 / 技術評論社 / 2018

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