書籍概要

Vue 3 フロントエンド開発の教科書

著者
発売日
更新日

概要

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

サポート

補足情報

（2023年8月24日更新）

第3章「3-2　リアクティブシステム」について

本書の発売後，Vue 3のコンポーネントのレンダリング仕様が変更されたため，Vue.js本体のバージョン3.2.45以降では，リスト3-3のコードが本書の記述通りに動作しなくなりました。そのため，最新のVue 3でリスト3-3を実行すると，「現在時刻」も「現在時刻(ref)」と同様に変更されるようになります。
リスト3-3のコードを本書の記述通りに動作させるには，バージョン3.2.44以前のVue.jsをインストールしてお試しください。

なお，変更されたのは「コンポーネントのレンダリング仕様」であり，ref()関数の役割や，リアクティブシステムの働き自体に変更はありませんので，3-2節内のref()関数に関する解説・記述についての修正はありません。

サンプルファイルや正誤表について

本書のサンプルのダウンロードや正誤表は，以下のサイトで公開しています。詳細は本書のviページをご参照ください。

https://wings.msn.to/index.php/-/A-03/978-4-297-13072-5

商品一覧