Vue.js 入門

高速軽快な Web アプリケーションを、プログレッシブフレームワーク Vue.js でつくりあげる。Vue.js を基礎からわかりやすく解説。実践で使いこなすための設計力・実装力を身につける。

Vue.js をこれから学ぶ Web エンジニアが、基本の文法からコンポーネント、ルーティング、状態管理、そして中規模 / 大規模のアプリケーション開発までを 1 冊で通して学ぶための入門書です。『Vue.js 入門 基礎から実践アプリケーション開発まで』は川口 和也、喜多 啓介、野田 陽平、手島 拓也、片山 真也の 5 名による共著で、技術評論社から 2018 年 10 月に刊行されました (NDL の書誌による。版元の発売日は 2018 年 9 月 22 日)。版元は著者らを Vue.js のコントリビューターと紹介しています。著者プロフィールによると、川口 和也は刊行時点で Vue.js のコアチームメンバであり、Vue.js 日本ユーザーグループの代表で、本書の内容全般の監修も務めています。

全 10 章と Appendix 3 本、基本から大規模開発までの構成

1 章「プログレッシブフレームワーク Vue.js」は、Web フロントエンド開発が複雑になってきた経緯と Vue.js の設計思想を整理し、宣言的レンダリングからビルドシステム、クライアントとサーバーのデータ永続化までを段階的な領域として示します。2 章「Vue.js の基本」でテンプレート構文、フィルター、算出プロパティ、ディレクティブ、ライフサイクルフック、メソッドを押さえ、3 章「コンポーネントの基礎」でコンポーネント間の通信と設計へ進みます。4 章は Vue Router、5 章はトランジション、スロット、カスタムディレクティブ、描画関数、ミックスインといった高度な機能、6 章は単一ファイルコンポーネント、7 章は Vuex を扱います。8 章から 10 章は「中規模・大規模向けのアプリケーション開発」を開発環境のセットアップ、設計、実装の 3 章に分けた続きものです。巻末は Appendix A が jQuery からの移行、Appendix B が Storybook と TypeScript を取り上げる開発ツール、Appendix C が Nuxt.js です。

リアクティブシステムと仮想 DOM、Vue.js を支える仕組み

Vue.js の書きやすさは、データを書き換えると画面が追従するという約束事に支えられています。フレームワークはデータの読み取りを追跡して、どの描画がどのデータに依存しているかを記録し、変更が起きたときに必要な部分だけを描き直します。描き直しは、メモリ上に組み立てた画面の構造を前回と比べて差分だけを実際の画面へ反映する 仮想 DOM の仕組みを通ります。本書は 1 章の「Vue.js を支える技術」でコンポーネントシステム、リアクティブシステム、レンダリングシステムの 3 つを取り上げ、リアクティブシステムの内側と仮想 DOM の処理の流れをコラムで補っています。個々の API の使い方を覚える前に、仕組みの全体像を最初に置く並びと読めます。

Vue Router と Vuex から中規模 / 大規模開発の設計と実装へ

画面遷移のたびにサーバーから HTML を受け取る作りと違い、シングルページアプリケーションでは URL の変化に合わせてブラウザー側で部品を差し替える 画面の切り替えの仕組み と、複数の画面で共有するデータを 1 か所のストアに集める 状態管理 が設計の要になります。4 章は前者を Vue Router によるサンプルアプリケーションの実装で扱い、7 章は後者を Vuex のコンセプトからタスク管理アプリケーションの状態管理、ストアのモジュール分割、Vue Router との連携まで扱います。8 章から 10 章はその応用です。Vue CLI による開発環境の構築とテスト環境、フロントエンドとバックエンドの連携を整えたうえで、コンポーネント設計や状態モデリング、ルーティング設計を決め、実装の章で E2E テスト、エラーハンドリング、ビルドとデプロイ、パフォーマンスの測定と改善までを通します。版元の概要にある、大規模開発を想定したアプリケーション開発を体験できるという案内は、この 3 章を指すと読めます。

jQuery からの移行に向く読者と、2018 年刊という時点

版元が挙げる読者は、Vue.js に興味のある Web エンジニア、Vue.js を本番で使いたいが課題があるエンジニア、Vue.js を動かしてみたい Web デザイナーやコーダーです。Appendix A はイベントリスナー、表示の切り替え、要素の挿入と削除、フォームの扱いなど、jQuery で書いていた機能を Vue.js でどう書くかを並べており、既存のサイトに少しずつ取り入れたい人の足場になります。

一方で、刊行は 2018 年であり、書かれているのは刊行時点の Vue.js と Vue CLI、Vuex を前提にした書き方です。Vue.js 3.0 は 2020 年 9 月 18 日に正式リリースされ、大規模な利用での課題に向けた新しい API 群として Composition API が加わりましたが、本書の目次にこの項目はありません。3.0 以降の書き方をはじめから学びたい人は、公式ドキュメントと組み合わせるか、別の資料を主にするほうが目的に合います。

jQuery 中心のサイトから Vue.js へ段階的に移りたい人や、2018 年前後に組まれた Vue.js のアプリケーションを引き継いで設計の意図を読み解きたい人にとって、仕組みの説明から大規模開発の実装までを Vue.js のコントリビューターを含む著者陣が 1 冊で通している本書は、手元に置いて章ごとに参照できる入門書です。