概要

人気のWebフロントエンドフレームワーク「Vue.js」がバージョンアップして「Vue 3」となり，TypeScriptの標準採用，新機能Composition API，Vite，Piniaの搭載など，大幅に機能が更新・強化されました。それに伴い，Vue 3では，従来のOptions APIを利用したコンポーネント開発とは異なる開発手法が必要となります。本書では，Composition APIによるコンポーネント開発やPiniaによる状態管理，Vue RouterによるSPA開発，非同期処理やユニットテストなどを新機能を駆使して解説しており，Vue 3によるフロントエンド開発手法が1冊ですべて身に付く内容になっています。

こんな方におすすめ

• Composition APIによるVue 3の開発方法を学びたい人

目次

導入編

第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　コンポーネント間通信のテスト

サポート

現在サポート情報はありません。