Vue 3 フロントエンド開発の教科書(ヴュースリーフロントエンドカイハツノキョウカショ)
- 著者:
- WINGSプロジェクト 齊藤 新三/山田 祥寛(ウィングスプロジェクト サイトウ シンゾウ/ヤマダ ヨシヒロ)
- 出版社:
- 技術評論社
- 出版日:
- 2022年09月28日頃
- ISBN:
- 9784297130725
- 在庫:
- 在庫あり
なぜ注目されているか
書籍紹介
人気の Web フロントエンドフレームワーク「 Vue.js 」がバージョンアップして「 Vue 3 」となり、 TypeScript の標準採用、新機能 Composition API 、 Vite 、 Pinia の搭載など、大幅に機能が更新・強化されました。それに伴い、 Vue 3 では、従来の Options API を利用したコンポーネント開発とは異なる開発手法が必要となります。本書では、 Composition API によるコンポーネント開発や Pinia による状態管理、 Vue Router による SPA 開発、非同期処理やユニットテストなどを新機能を駆使して解説しており、 Vue 3 によるフロントエンド開発手法が 1 冊ですべて身に付く内容になっています。
■導入編
●第 1 章 フロントエンド開発の潮流と Vue
1.1 JavaScript の変遷とフロントエンド開発の登場
1.2 フロントエンドフレームワークと Vue
●第 2 章 Vite と Vue プロジェクト
2.1 Vue プロジェクト作成の準備
2.2 Vue プロジェクトの作成と実行
2.3 Vue プロジェクト作成の質問と Vite
●第 3 章 Vue プログラミングの基本
3.1 Vue のコンポーネントと基本構文
3.2 リアクティブシステム
3.3 リアクティブデータ用意のバリエーション
3.4 Vue プロジェクトの構成と動作原理
■基本編
●第 4 章 データとイベントのディレクティブ
4.1 データバインディングのディレクティブ
4.2 イベントのディレクティブ
●第 5 章 双方向データバインディングとその他のディレクティブ
5.1 双方向データバインディング
5.2 その他のデータバインディングのディレクティブ
●第 6 章 制御のディレクティブ
6.1 条件分岐のディレクティブ
6.2 ループのディレクティブ
6.3 リスト操作
●第 7 章 スクリプトブロックのバリエーション
7.1 ウォッチャー
7.2 ライフサイクルフック
7.3 script setup の本当の姿
7.4 Options API
●第 8 章 コンポーネント間連携
8.1 子コンポーネントの利用
8.2 コンポーネントの独立性と CSS の扱い
8.3 親から子へのコンポーネント間通信
8.4 Props の応用
8.5 子から親へのコンポーネント間通信
8.6 Provide と Inject
●第 9 章 子コンポーネント利用のバリエーション
9.1 子コンポーネントをカスタマイズする Slot
9.2 複数の Slot を実現する名前付き Slot
9.3 データの受け渡しを逆転させるスコープ付き Slot
9.4 動的コンポーネント
●第 10 章 Vue Router
10.1 シングルページアプリケーション
10.2 Vue Router の基本
10.3 ルートパラメータ
10.4 スクリプトブロックでのルーティング制御
10.5 Vue Router のその他の機能
●第 11 章 Pinia
11.1 Pinia の基本
11.2 引数を使う一歩進んだ Pinia の利用方法
11.3 アクションの応用
■応用編
●第 12 章 非同期処理
12.1 非同期処理の基本
12.2 IndexedDB
12.3 Web アクセス
●第 13 章 ユニットテスト
13.1 ユニットテストと Vitest
13.2 コンポーネントのテストの基本
13.3 コンポーネントのテストの応用
13.4 コンポーネント間通信のテスト
技書の森解説
Vue.js はバージョン 3 で Composition API やリアクティビティシステムの刷新が行われ、設計の考え方が大きく変わりました。本書はその Vue 3 を前提に、コンポーネント設計・状態管理・ルーティングといったフロントエンド開発の基本要素を一冊に収めた教科書です。著者の齊藤新三氏は Java や Android の技術書でも知られ、フレームワークの「使い方」だけでなく「なぜその仕組みになっているか」を丁寧に説明する姿勢が特徴です。
HTML ・ CSS ・ JavaScript の基礎がある読者を対象としており、 Vue を初めて触る人がプロジェクト構築からシングルファイルコンポーネントの作成、 Props / Emits によるデータ受け渡し、 Vue Router や Pinia (状態管理) の導入までを順を追って体験できます。 Options API と Composition API の両方に触れているため、既存コードの読解にも対応できる構成です。
フロントエンドの世界はツールチェーンの変化が速いため、ビルド環境のバージョンは読む時点で差異が出る可能性があります。ただし Vue 3 のコンポーネントモデルやリアクティビティの設計思想そのものは安定しており、本書で得た理解はツール側の更新に振り回されにくい土台になります。
言及 Qiita 記事 (5 件)
この本に興味がある方におすすめ
この本に関連
関連記事
セキュリティ本ガイド - Web 開発者が読むべき技術書の選び方
Web セキュリティの基礎から実践まで学べる技術書の選び方マトリクスと、読了後にやるべき 3 つのアクションを紹介します。
OS・低レイヤー本ガイド - コンピュータの仕組みを学ぶ技術書の選び方
OS、コンパイラ、ネットワークなど低レイヤーを学べる技術書の 4 ジャンルと、どこから始めるべきかの指針、賞味期限の見極め方を紹介します。
ソフトウェア開発の歴史を変えた 5 冊の技術書
アルゴリズムの学問化からコードの可読性革命まで、ソフトウェア開発の方向性を決定づけた 5 冊の技術書を、時代背景とエピソードとともに紹介します。
関連用語
React
コンポーネントベースの UI ライブラリで、宣言的な記法と仮想 DOM で効率的な UI 構築を実現する
SPA ルーティングとは - React/Vue/Angular でのページ遷移の仕組み
SPA ルーティングは URL とコンポーネント表示を同期させページ遷移なしで画面を切り替える仕組み。History API・Hash モード・SSR との関係を解説
Storybook
UI コンポーネントを独立して開発・テスト・ドキュメント化するツール
デザインシステム
UI コンポーネント、デザイントークン、ガイドラインを体系化し、一貫した UI を実現する仕組み
VPC エンドポイント
VPC 内から AWS サービスにインターネットを経由せずにプライベートにアクセスする仕組み
制御の反転 (IoC) とは - DI との関係とフレームワーク設計の原則
制御の反転はフレームワークがアプリケーションコードを呼び出す設計原則。依存性注入 (DI) との関係・Hollywood 原則・Spring/NestJS での実例を解説