目次

• 第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 のテスト

正誤表

FAQ

ダウンロード

お問い合わせ

書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。

Powered by メールフォーム 『オレンジフォーム』