Vue.js 3 超入門

本書は Vue.js の入門者向け書籍で「Vue.js&Nuxt.js 超入門」の改訂版となります。新たに Vue3 に対応し、内容は前の版から大幅に書き直しています。また初心者向けであることを踏まえ、引き続き JavaScript ベースで説明を行います。対象読者は JavaScript の入門書を読み終えた層で、Vue.js の経験がない層です。既存の入門書などで挫折した人でもついていけるように、手取り足取り教える内容です。

『Vue.js 3 超入門』 (掌田 津耶乃 著、秀和システム、2020 年 12 月刊) は、JavaScript の入門書を読み終えていて Vue.js をまだ使ったことがない人に向けて、Vue 3 の使い方とアプリ作成のこつを、実際にプログラムを動かしながら学ぶ入門書です。楽天ブックスの書誌に載る紹介文によれば、本書は『Vue.js&Nuxt.js 超入門』の改訂版にあたり、Vue 3 に対応して前の版から内容を大幅に書き直したうえで、初心者向けであることを踏まえて引き続き JavaScript ベースで説明しています。版元の紹介文は、既存の入門書で挫折した人も読み手に含め、巻末に未経験者向けの「JavaScript 超入門」を収録したと案内しています。

全 6 章と巻末付録の構成、セットアップから Firebase 連携まで

版元の目次は Chapter1 から Chapter6 までの 6 章と、巻末の Addendum で構成されています。第 1 章「Vue を使ってみよう!」は Vue 3 の概要と、script タグ 1 つで読み込む方法から始め、Node.js と Vue CLI によるプロジェクト作成、もう 1 つの生成ツールとしての Vite、GUI ツール、Visual Studio Code の準備までを扱います。第 2 章「Vue3 の基本をマスターしよう!」で基本的な仕組みと v 属性を学び、第 3 章「コンポーネントを使おう!」ではコンポーネントの基本からプロジェクトによる開発へ進み、計算アプリケーションを作ります。第 4 章「コンポーネントを更に掘り下げる!」はレンダリングと JSX、プロパティ、イベント、スロット、トランジションとアニメーションを取り上げます。第 5 章「Vue3 を更にパワーアップしよう!」は Composition API、Vue Router によるルーティング管理、Vuex による状態管理を扱ってメモアプリを作り、第 6 章「外部サービスを利用しよう!」では axios による外部サイトへのアクセス、Firebase と REST API、Realtime Database と Firebase SDK を使ってミニ伝言板を作ります。巻末の「JavaScript 超入門!」は、値と変数、制御構文、配列、関数、アロー関数からオブジェクトとクラスまでを短くおさらいする内容です。

Vue 3 で画面が自動で書き換わる仕組みと 2 つの書き方

Vue.js のようなフレームワークを使う利点は、データを書き換えると、そのデータを使っている画面の部分が自動で更新される点にあります。素の JavaScript では、値が変わるたびに該当する要素を探して書き換える処理を自分で書く必要があり、画面が複雑になるほど更新漏れが起きやすくなります。Vue はテンプレートを描画用の関数に変換し、仮想 DOM の差分から実際の DOM へ必要な変更だけを反映します。第 4 章の render や h 関数の節は、この描画の仕組みに一段近い書き方を知る手がかりになります。また Vue 3 では、オプションごとにデータや処理を分けて書く従来の書き方に加えて、関連する処理をまとめて書ける Composition API が使えるようになりました。版元の目次では第 1 章に「Vue ver.2 と Vue3 は別のもの!」という項目があり、Vue 2 向けの情報と混同しないことが入門の最初の注意点になります。そのうえで画面の切り替えを URL と対応づける ルーティング や、複数の画面で共有するデータの扱いまで学べば、小さな Web アプリを一通り組み立てられる構成です。

2020 年 12 月刊行の道具立てと、刊行後に変わった点

本書の手順は 2020 年 12 月時点の環境に基づいています。Vue CLI の公式サイトは、2026 年 10 月時点で Vue CLI が保守のみの段階にあると案内し、新しいプロジェクトには create-vue で Vite ベースの構成を作るよう勧めています。アプリ全体で共有するデータの 状態管理 についても、Vuex の公式サイトは公式の状態管理ライブラリが Pinia に変わったと案内しています。本書は第 1 章で Vite にも触れていますが、Vue CLI と Vuex を中心に進む部分は、読みながら公式ドキュメントで差分を確かめる前提で使うのが安全です。また説明は JavaScript ベースで、TypeScript で Vue を書きたい人や、目次に章の無い Nuxt.js を学びたい人には目的が合いません。

一方で、JavaScript の文法は一通り学んだもののフレームワークの入門書でつまずいた人にとって、script タグ 1 つで動かすところから始め、コンポーネント、ルーティング、状態管理、外部サービスとの連携まで、作るアプリを変えながら段階的に進める本書は、Vue の考え方を手を動かして身につける最初の 1 冊として選びやすい構成です。仕組みを理解したうえで刊行後の道具に乗り換える前提なら、学んだ考え方はそのまま生かせます。