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

いま学んでおきたい JavaScript フレームワーク「Vue.js」のエッセンスを一冊に詰め込みました! 豊富なサンプルコードで試しながら理解できます! Vue.js (ビュージェイエス) は、Web アプリのビュー (見た目) の部分に特化したシンプルなフレームワークです。既存のアプリに後乗せで導入したり、徐々に適用範囲を拡大したりすることが手軽に行えます。シンプルな分、他のフレームワークと比べて学習コストが低く、HTML と JavaScript が一通りわかる人ならコードを理解するのも簡単です。本書では、Vue.js の中核である、ページを構成する UI 部品「コンポーネント」をしっかりと解説し、さらには本格的なアプリ開発で必要となる要素までを網羅的に取り扱います。丁寧な解説でよくわかる、入門書の決定版です!
Chapter1 イントロダクション 1-1 JavaScript の歴史 1-2 jQuery から JavaScript フレームワークへ 1-3 主な JavaScript フレームワークと Vue.jsChapter2 Vue.js の基本 2-1 Vue.js を利用するための準備 2-2 Vue.js 理解のための 3 つの柱 2-3 リアクティブデータ Chapter3 ディレクティブ 3-1 イベント関連のディレクティブ 3-2 フォーム関連のディレクティブ 3-3 制御関連のディレクティブ 3-4 データバインディング関連のディレクティブ 3-5 より高度なイベント処理 Chapter4 コンポーネント (基本) 4-1 コンポーネントの基本 4-2 コンポーネント間の通信 4-3 コンポーネント配下のコンテンツをテンプレートに反映させる 〜 スロット Chapter5 コンポーネント (応用) 5-1 動的コンポーネント 5-2 v-model による双方向データバインディング 5-3 アニメーション機能 5-4 コンポーネントのその他の話題 Chapter6 部品化技術 6-1 ディレクティブの自作 6-2 フィルターの自作 6-3 プラグインの利用と自作 6-4 ミックスイン Chapter7 Vue CLI7-1 Vue CLI の基本 7-2 単一ファイルコンポーネント 7-3 TypeScriptChapter8 ルーティング 8-1 ルーティングとは? 8-2 ルーティングの基本 8-3 ルーター経由で情報を渡す手法 8-4 マルチビュー、入れ子のビュー、ガードなど Chapter9 Vuex9-1 Vuex とは? 9-2 Vuex の基本 9-3 Vuex ストアを構成する要素 9-4 巨大なストアを分割管理する 〜 モジュール Chapter10 テスト 10-1 単体テスト 10-2 E2E テスト Chapter11 応用アプリ 11-1 アプリの構造を概観する 11-2 アプリの共通機能を読み解く 11-3 アプリの実装を理解する

Vue.js は Web アプリのビュー、つまり見た目の部分に特化したフレームワークで、既存のアプリに後乗せで導入したり、適用範囲を徐々に広げたりしやすい点が特徴です。『これからはじめる Vue.js 3 実践入門』 (山田祥寛 著、SB クリエイティブ、2022 年 3 月刊) は、その Vue.js のバージョン 3 系を対象に、ディレクティブとコンポーネントの基本から Composition API、ルーティング、Vuex、テストまでを豊富なサンプルコードで解説する B5 変型判の入門書です。版元は HTML と JavaScript が一通りわかる人を読者に想定しており、前作『これからはじめる Vue.js 実践入門』に続く一冊にあたります。

3 部 11 章の構成と Composition API の位置

構成は導入編、基本編、応用編の 3 部に分かれ、Chapter 1 から 11 まで続きます。導入編の Chapter 1 と 2 は JavaScript の歴史と jQuery からフレームワークへの流れ、Vue.js を使う準備、理解のための 3 つの柱、リアクティブデータを扱います。基本編は Chapter 3 のディレクティブ (イベント、フォーム、制御、データバインディングの各種)、Chapter 4 と 5 のコンポーネントの基本と応用 (コンポーネント間の通信、スロット、v-model による双方向データバインディング、アニメーション)、そして Chapter 6 の部品化技術で、ここに Vue 3 の新記法として Composition API の節と、ディレクティブ、プラグイン、ミックスインの自作が置かれます。応用編は Chapter 7 の Vue CLI と単一ファイルコンポーネント、次世代の CLI ツールとしての Vite、Chapter 8 のルーティング、Chapter 9 の Vuex、Chapter 10 の単体テストと E2E テスト、Chapter 11 の応用アプリで締めます。

リアクティブデータとコンポーネント、Vue.js を支える考え方

Vue.js の中心にあるのは、データが変わると画面が自動で追随するリアクティブなデータバインディングと、ページを UI 部品に切り分けるコンポーネントの 2 つの考え方です。jQuery の時代には DOM を直接書き換えるコードが状態と表示のずれを生みやすく、この問題を解くために、テンプレートを宣言的に書き、状態の変化を仕組み側が DOM に反映するフレームワークが広まりました。Vue.js はこの流儀をテンプレート構文とディレクティブで学びやすく実装した代表例で、本書が Chapter 3 でディレクティブ、Chapter 4 と 5 でコンポーネントに紙面を割く順序は、この中核をまず固める配置です。Vue 3 で加わった Composition API は、コンポーネントのロジックを機能単位でまとめて再利用しやすくする書き方で、従来の Options API と並存します。本書の目次上、Composition API は Chapter 6 の 1 節で新記法として扱われているため、この書き方を主体に学びたい人は配置を踏まえて選ぶ必要があります。

応用編で SPA を作りきる、ルーティングと Vuex とテスト

応用編は、部品を組み合わせて 1 つのアプリケーションとして動かす段階です。SPA ルーティング は 1 ページの中で画面を切り替える仕組みで、Chapter 8 ではルーター経由で情報を渡す手法や、マルチビュー、入れ子のビュー、ガードまで進みます。画面数が増えるとコンポーネント間で共有するデータの置き場所が問題になり、Chapter 9 の Vuex はそのための 状態管理 の仕組みです。Chapter 10 では単体テストと E2E テスト を扱い、Chapter 11 で応用アプリの構造、共通機能、実装を読み解きます。導入から応用まで一続きの本なので、断片的なチュートリアルを渡り歩くより、1 本の筋で動くアプリまで到達できる点がこの本の価値です。

HTML と JavaScript が前提、道具立ては 2022 年時点

版元が挙げる前提は HTML と JavaScript が一通りわかることで、他のフレームワークを知らなくても入れる水準の入門書です。JavaScript の基礎に不安があるなら、JavaScript と TypeScript の本の選び方 を先に確認して土台を作ってから戻るほうが効率的です。注意点は、Vue CLI、Vite、Vuex という道具立てが 2022 年 3 月時点のものである点で、フロントエンドの道具は入れ替わりが速いため、手元の環境で本書のコードを動かす際はバージョンの違いに注意が必要です。版元サイトには正誤情報も掲載されています。また目次上 TypeScript を主題にした章はないため、型設計を中心に学びたい人には別の本が合います。

JavaScript で画面を組んできてフレームワークを体系的に学ぶ 1 冊目を探している人、あるいは前作から Vue.js を追ってきて Vue 3 の新記法まで含めて知識を更新したい人にとって、導入から応用アプリまで一続きで学べる本書は投資に見合う入口です。