WINGS(Www INtegrated Guide on Server-architecture)
Www INtegrated Guide on Server-architecture :
   ホーム お問い合わせ サーバーサイド環境構築設定 つぶやき ブックマーク レンタルサーバー 総合FAQ/訂正&ダウンロード このエントリーをはてなブックマークに追加        
  • 刊行書籍情報  [書籍マップ
  • オンライン公開 技術記事
  • シリーズ別書籍リスト
  • 「WINGS News」登録/解除
  • WINGSプロジェクト紹介
  • WINGSプロジェクトメンバ募集





【カテゴリ】 JavaScript


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

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

WINGSプロジェクト 齊藤 新三/著
山田祥寛/監修
株式会社 技術評論社/発行
定価 3,960円
B5変版・ 432ページ・ 1色
ISBN 978-4-297-13072-5
発刊日: 2022年9月28日

[Amazon.co.jpからオンライン購入する]

   FAQ 本書訂正 アンケート ダウンロード

本書の特徴

TypeScript×Composition APIによる次世代Vueの開発手法がわかる!

人気のWebフロントエンドフレームワーク「Vue.js」の解説書です。
「Vue 3」では、TypeScriptを標準言語に採用、新機能Composition API、Vite、Piniaも搭載され、大幅に機能が更新・強化されました。本書では、Composition APIによるコンポーネント開発やPiniaによる状態管理、非同期処理やユニットテストなど、新機能を駆使して解説しています。

まとめて読んで 更にスキルアップのこんな書籍

・TypeScriptプログラミングを始めるなら
ゼロからわかる TypeScript入門」(技術評論社)
・Options APIについても知りたい方に
これからはじめるVue.js 3実践入門」(SBクリエイティブ)
・JavaScript開発必須の知識を身につけよう
JavaScript逆引きレシピ 第2版」(翔泳社)
分野・レベル別マップ

本書について取り上げていただいたブログさま

・無限大な夢のあと - noimpslmtbrkさま
【書評】Vue3 フロントエンド開発の教科書 ( @yyamada )(2022年10月26日)
・東大現代文戦略共有チーム(’22) - SuvaDharmaさま
[レビュー]Vue3 フロントエンド開発の教科書(2022年10月24日)
・while(isプログラマ) - amano225さま
書評『Vue 3 フロントエンド開発の教科書』TypeScript×Composition APIで開発するならこの1冊!(2022年9月25日)

  Contents


第1章 フロントエンド開発の潮流とVue
1.1 JavaScriptの変遷とフロントエンド開発の登場
 1.1.1 JavaScript の登場と不遇の時代
 1.1.2 JavaScript の復活と Web2.0
 1.1.3 jQuery の登場とフロントエンド開発
 1.1.4 ECMAScript への準拠による JavaScript の飛躍
 1.1.5 HTML5 の登場
 1.1.6 JavaScript の書き方を変えた ES2015 の登場
 1.1.7 JavaScript の実行環境をブラウザから切り離した Node.js
 1.1.8 時代の寵児となった JavaScript
 1.1.9 TypeScript の登場
1.2 フロントエンドフレームワークとVue
 1.2.1 ライブラリの限界とフレームワークの登場
 1.2.2 Vue の登場とその特徴
 1.2.3 プログレッシブフレームワークとしての Vue
 1.2.4 Vue 3 のリリース

第2章 ViteとVueプロジェクト
2.1 Vueプロジェクト作成の準備
 2.1.1 Vue プログラミングに必要なツール
 2.1.2 Visual Studio Code のインストール
 2.1.3 Vue 用の拡張機能のインストール
 2.1.4 Node.js のインストール
2.2 Vueプロジェクトの作成と実行
 2.2.1 Vue プロジェクトの作成の手順
 2.2.2 Vue プロジェクトの作成コマンド
 2.2.3 Vue プロジェクトへの依存ライブラリの追加コマンド
 2.2.4 Vue プロジェクトの実行コマンド
2.3 Vueプロジェクト作成の質問とVite
 2.3.1 Vue プロジェクト作成時の質問
 2.3.2 ESLint と Prettier
 2.3.3 新しい Vue プロジェクト実行環境

第3章 Vueプログラミングの基本
3.1 Vueのコンポーネントと基本構文
 3.1.1 コンポーネントとは
 3.1.2 単一コンポーネントファイルとは
 3.1.3 単一コンポーネントファイル記述の基本
 3.1.4 データを表示するマスタッシュ構文
 3.1.5 テンプレートに表示させる変数を定義する ref()
3.2 リアクティブシステム
 3.2.1 ref() の働き
 3.2.2 リアクティブ変数の値の変更方法
3.3 リアクティブデータ用意のバリエーション
 3.3.1 計算結果をリアクティブにする computed()
 3.3.2 オブジェクトをまとめてリアクティブにする reactive()
3.4 Vueプロジェクトの構成と動作原理
 3.4.1 Vue プロジェクトのファイル構成
 3.4.2 デプロイ用ファイル一式が格納された dist フォルダ
 3.4.3 public フォルダと index.html
 3.4.4 Vue プロジェクトの動作原理

第4章 データとイベントのディレクティブ
4.1 データバインディングのディレクティブ
 4.1.1 ディレクティブとは
 4.1.2 属性にデータバインドする v-bind
 4.1.3 属性値のない属性へのバインド
 4.1.4 バインドする属性をテンプレート変数として指定
 4.1.5 複数の属性にまとめてバインドする方法
 4.1.6 style 属性へのバインディング
 4.1.7 class 属性へのバインディング
4.2 イベントのディレクティブ
 4.2.1 イベントリスナを設定するディレクティブ v-on
 4.2.2 v-on のイベント
 4.2.3 メソッドの引数としてイベントオブジェクトを受け取る
 4.2.4 イベントオブジェクト以外を引数とするイベントハンドラメソッド
 4.2.5 イベントオブジェクトとその他の引数を併用するイベントハンドラメソッド
 4.2.6 v-on の修飾子
 4.2.7 クリックイベントとキーイベントの修飾子

第5章 双方向データバインディングとその他のディレクティブ
5.1 双方向データバインディング
 5.1.1 双方向データバインディングを実現する v-model
 5.1.2 片方向のデータバインディング
 5.1.3 v-bind と v-on:input の組み合わせ
 5.1.4 文字列入力以外のコントロールでの v-model
 5.1.5 v-model の修飾子
5.2 その他のデータバインディングのディレクティブ
 5.2.1 HTML 文字列をそのまま表示する v-html
 5.2.2 静的コンテンツとして表示させる v-pre
 5.2.3 データバインドを一度だけ行う v-once
 5.2.4 レンダリング終了までマスタッシュ構文を非表示にする v-cloak

第6章 制御のディレクティブ
6.1 条件分岐のディレクティブ
 6.1.1 条件分岐ディレクティブの基本 v-if
 6.1.2 条件分岐ディレクティブをフルセットで利用した場合
 6.1.3 ディレクティブ記述のためのタグ template
 6.1.4 v-if と似て非なる v-show
6.2 ループのディレクティブ
 6.2.1 ループのディレクティブである v-for
 6.2.2 連想配列のループ
 6.2.3 Map のループ
 6.2.4 オブジェクトのループ
 6.2.5 オブジェクトの配列のループ
 6.2.6 Map とオブジェクトの組み合わせのループ
 6.2.7 カウンタ変数を利用したループ
6.3 リスト操作
 6.3.1 ループ対象データの絞り込み
 6.3.2 配列のデータ操作
 6.3.3 Map のデータ操作
 6.3.4 オブジェクト内のデータ変更
 6.3.5 リストデータ内のオブジェクトの変更

第7章 スクリプトブロックのバリエーション
7.1 ウォッチャー
 7.1.1 算出プロパティの役割
 7.1.2 リアクティブ変数の変化を監視する watchEffect()
 7.1.3 監視対象を明示する watch()
 7.1.4 即時実行の watch()
 7.1.5 watch() における変更前後の値の利用
7.2 ライフサイクルフック
 7.2.1 ライフサイクルとは
 7.2.2 ライフサイクルフックの具体例
 7.2.3 Vue のライフサイクル
 7.2.4 Vue のライフサイクルフック
 7.2.5 デバッグ用のライフサイクルフック
 7.2.6 ライフサイクルフックのまとめ
7.3 script setupの本当の姿
 7.3.1 defineComponent と setup
 7.3.2 setup と reactive と toRefs
7.4 Options API
 7.4.1 Options API とは
 7.4.2 Options API の基本構文
 7.4.3 Options API でのライフサイクルフック
 7.4.4 Options API でのウォッチャー
 7.4.5 Composition API の利点

第8章 コンポーネント間連携
8.1 子コンポーネントの利用
 8.1.1 再度、コンポーネントとは
 8.1.2 コンポーネントの作り方
 8.1.3 子コンポーネントの利用方法
8.2 コンポーネントの独立性とCSSの扱い
 8.2.1 処理が含まれたコンポーネントを埋め込む
 8.2.2 コンポーネント内の処理はコンポーネント内で完結
 8.2.3 スタイルブロックを独立させる scoped 属性
 8.2.4 Scoped CSS のカラクリ
8.3 親から子へのコンポーネント間通信
 8.3.1 親からデータをもらう Props
 8.3.2 親から Props にデータを渡す方法
 8.3.3 親のテンプレート変数を Props に渡す方法
 8.3.4 v-for と Props との組み合わせ
8.4 Props の応用
 8.4.1 スクリプトブロックでの Props の値の利用
 8.4.2 Props の値の利用の注意点
 8.4.3 Props のデフォルト値
8.5 子から親へのコンポーネント間通信
 8.5.1 子から親への通信はイベント処理
 8.5.2 親コンポーネントにデータを渡す方法
 8.5.3 v-model による子から親への通信
8.6 ProvideとInject
 8.6.1 コンポーネント間通信のまとめと問題提起
 8.6.2 サンプルプロジェクトの作成
 8.6.3 Provide の利用方法
 8.6.4 Inject の利用方法
 8.6.5 孫コンポーネントでも Inject は同様

第9章 子コンポーネント利用のバリエーション
9.1 子コンポーネントをカスタマイズするSlot
 9.1.1 Slot とは
 9.1.2 Slot の基本的な記述方法
 9.1.3 Slot のフォールバックコンテンツ
 9.1.4 テンプレート変数の所属先
 9.1.5 親でのレンダリング結果の Slot
9.2 複数のSlotを実現する名前付きSlot
 9.2.1 slot タグの追加
 9.2.2 名前付き Slot
 9.2.3 名前付き Slot に HTML 要素を渡す v-slot
9.3 データの受け渡しを逆転させるスコープ付きSlot
 9.3.1 スコープ付き Slot とは
 9.3.2 子から親へデータを渡す Slot Props
 9.3.3 Slot Props の受け取り方法
9.4 動的コンポーネント
 9.4.1 動的コンポーネントとは
 9.4.2 component タグと v-bind:is
 9.4.3 KeepAlive の役割
 9.4.4 コンポーネントの待機

第10章 Vue Router
10.1 シングルページアプリケーション
 10.1.1 ルーティングとは
 10.1.2 サーバサイド Web アプリケーションでの処理の流れ
 10.1.3 シングルページアプリケーションとは
10.2 Vue Router の基本
 10.2.1 Vue Router のプロジェクト
 10.2.2 画面用コンポーネントを入れる views フォルダ
 10.2.3 ルーティング表示領域の設定
 10.2.4 ルーティング設定の基本構文
 10.2.5 コンポーネントの動的インポート設定
 10.2.6 ルーティングリンクの設定
10.3 ルートパラメータ
 10.3.1 ルートパラメータの設定
 10.3.2 ルートパラメータの埋め込み
 10.3.3 ルートパラメータを Props として取得
10.4 スクリプトブロックでのルーティング制御
 10.4.1 会員情報追加画面の作成
 10.4.2 ルーティングを制御する Router オブジェクト
 10.4.3 Router オブジェクトの他のメソッド
10.5 Vue Routerのその他の機能
 10.5.1 スクリプトブロックでのルーティング情報の取得
 10.5.2 さまざまなルートパラメータ
 10.5.3 ネストされたルーティング
 10.5.4 マルチビュー
 10.5.5 ナビゲーションガード
 10.5.6 リダイレクト

第11章 Pinia
11.1 Piniaの基本
 11.1.1 Provide/Inject の問題点と Pinia
 11.1.2 Pinia プロジェクトの作成
 11.1.3 ストアファイル内記述の基本構造
 11.1.4 ステートとそのインターフェース
 11.1.5 ゲッタとアクション
 11.1.6 コンポーネントからのストア利用
 11.1.7 コンポーネントからのステートとゲッタの利用
 11.1.8 コンポーネントからのアクションの利用
11.2 引数を使う一歩進んだPiniaの利用方法
 11.2.1 プロジェクトの作成とファイルの複製
 11.2.2 Provide の代わりの初期リストの用意
 11.2.3 Inject の代わりにリストデータをストアから取得
 11.2.4 引数付きのゲッタの利用
 11.2.5 引数付きのゲッタの定義
 11.2.6 引数付きのアクションの利用
11.3 アクションの応用
 11.3.1 外部連携もアクションの役割
 11.3.2 セッションストレージからデータの取得
 11.3.3 セッションストレージを操作する sessionStorage オブジェクト
 11.3.4 MemberList.vue の変更
 11.3.5 Map オブジェクトをセッションストレージに格納する方法

第12章 非同期処理
12.1 非同期処理の基本
 12.1.1 IndexedDB と非同期処理
 12.1.2 同期処理と非同期処理の基本
 12.1.3 非同期処理の基本となる async と Promise
 12.1.4 async 関数で Promise を new してリターンする構文
12.2 IndexedDB
 12.2.1 IndexedDB を利用したプロジェクトの準備
 12.2.2 データベースオブジェクト取得処理
 12.2.3 オブジェクトストアの生成処理
 12.2.4 onupgradeneeded プロパティの役割
 12.2.5 データベースオブジェクトの再利用
 12.2.6 「データ取得中」表示の追加
 12.2.7 非同期処理を同期処理のように扱える await
 12.2.8 IndexedDB からデータを取得する処理
 12.2.9 IndexedDB へのデータ登録処理
 12.2.10 async アクション関数のコンポーネントでの利用
12.3 Webアクセス
 12.3.1 サンプルプロジェクトの概要と Web API の準備
 12.3.2 Current Weather Data の利用方法
 12.3.3 プロジェクトと第 1 画面の作成
 12.3.4 Web アクセス以外のコードの作成
 12.3.5 Web アクセスコードの記述
 12.3.6 Web アクセスの基本は fetch() 関数
 12.3.7 fetch() 関数は async 関数
 12.3.8 レスポンスデータの取得は Response のメソッドを利用
 12.3.9 fetch() を使いやすくしたライブラリの Axios

第13章 ユニットテスト
13.1 ユニットテストとVitest
 13.1.1 ユニットテストとは
 13.1.2 ユニットテスト対応プロジェクトの作成と Vitest
 13.1.3 ユニットテストの作成と実行
 13.1.4 テストスイートとテストケースの定義
 13.1.5 テスト可否の基本は入出力の一致
 13.1.6 テストを継続実行できるコマンド
 13.1.7 テストケースの追加
13.2 コンポーネントのテストの基本
 13.2.1 コンポーネントテスト専用ライブラリ
 13.2.2 コンポーネントテストの入出力
 13.2.3 コンポーネントテストはマウントから
 13.2.4 Vitest のオプション設定
 13.2.5 VueWrapper のメソッド
13.3 コンポーネントのテストの応用
 13.3.1 要素取得のための属性
 13.3.2 入力値の変更
 13.3.3 要素が存在するかどうかのテスト
 13.3.4 イベントの発生
13.4 コンポーネント間通信のテスト
 13.4.1 コンポーネント間通信テストの例
 13.4.2 Props を渡す方法
 13.4.3 Emit 実行の検証
 13.4.4 子コンポーネントのスタブ利用
 13.4.5 子コンポーネントからの Emit のテスト

本ページへのリンクには、このロゴをご利用ください。


著作権情報個人情報保護について広告掲載についてRSSフィードについて
出版社の方々へ会社概要スタッフ紹介サイトマップ  
書籍/記事に関するご質問/お問い合わせは「WINGSお問い合わせフォーム」をご利用ください。
Copyright(c) 1998-2024,Yamada Yoshihiro.  All Right Reserved.