目次

• Part 1：イントロダクション
• 1.1 JavaScriptフレームワークとは？
• 1.2 jQueryの問題点とJavaScriptフレームワーク
• 1.3 主なJavaScriptフレームワーク
• Part 2：はじめてのVue.js
• 2.1 Vue.jsのインストール方法
• 2.1.1 create-vueの準備とアプリの作成
• 2.2 サンプルアプリの内容を確認する
• 2.2.1 トップページの準備 - index.html
• 2.2.2 アプリを起動するためのエントリーポイント - main.js
• 2.2.3 アプリを構成するコンポーネント - App.vue
• 2.2.4 .vueファイルの構文
• 2.3 学習を進める前に
• 2.3.1 サンプルファイルの入手方法
• 2.3.2 サンプルファイルの利用方法
• 2.3.3 補足：学習／開発に便利なツール
• Part 3：Vueアプリの基本ルール
• 3.1 Vueアプリで「Hello, World」
• 3.2 リアクティブシステム
• 3.2.1 リアクティブシステムの例
• 3.2.2 複数値のリアクティブ化
• 3.3 算出プロパティとメソッド
• 3.3.1 算出プロパティ
• 3.3.2 メソッド
• 3.3.3 算出プロパティとメソッドの違い
• Part 4：ディレクティブとデータバインディング
• 4.1 ディレクティブによるデータアクセス - v-text
• 4.2 {{…}}式を無効化する - v-pre
• 4.3 文字列をHTMLとして埋め込む - v-html
• 4.4 属性値にJavaScript式を埋め込む - v-bind
• 4.4.1 属性操作の基本
• 4.4.2 複数の属性をまとめて指定する
• 4.4.3 JavaScriptの式から属性名を決定する
• 4.5 値を一度だけバインドする - v-once
• 4.6 要素にスタイルプロパティを設定する - v-bind:style
• 4.6.1 スタイルバインディングの基本
• 4.6.2 複数のスタイル情報を適用する
• 4.6.3 ベンダープレフィックスを自動補完する
• 4.7 要素にスタイルクラスを設定する - v-bind:class
• 4.7.1 クラスバインディングの基本
• 4.7.2 v-bind:classのさまざまな設定方法
• 4.8 {{…}}式による画面のチラツキを防ぐ - v-cloak
• Part 5：イベント処理
• 5.1 イベントの基本
• 5.2 イベントオブジェクトを参照する
• 5.2.1 イベントオブジェクトの基本
• 5.2.2 イベントハンドラーに引数を渡す場合
• 5.3 定型的なイベント処理を宣言的に指定する - イベント修飾子
• 5.3.1 イベント修飾子の基本
• 5.3.2 イベント修飾子を利用する場合の注意点
• 5.4 キーボードからの入力を識別する - キー修飾子
• 5.4.1 キー修飾子の基本
• 5.4.2 システムキーとの組み合わせを検知する
• 5.5 マウスの特定のボタンを検知する - マウス修飾子
• Part 6：フォーム開発
• 6.1 フォーム開発の基本
• 6.2 さまざまなフォーム要素の例
• 6.2.1 ラジオボタン
• 6.2.2 チェックボックス（単一）
• 6.2.3 チェックボックス（複数）
• 6.2.4 選択ボックス
• 6.2.5 補足：オブジェクトをバインドする
• 6.2.6 ファイル入力ボックス
• 6.3 バインドの動作オプションを設定する - 修飾子
• 6.3.1 入力値を数値としてバインドする - number修飾子
• 6.3.2 入力値の前後の空白を除去する - trim修飾子
• 6.3.3 バインドのタイミングを遅延させる - lazy修飾子
• 6.4 双方向データバインディングのカスタマイズ
• Part 7：条件分岐とループ
• 7.1 式の真偽に応じて表示／非表示を切り替える - v-if
• 7.1.1 v-ifの基本
• 7.1.2 式がfalseの場合の表示を定義する - v-else
• 7.1.3 複数の分岐を表現する - v-else-if
• 7.2 式の真偽に応じて表示／非表示を切り替える - v-show
• 7.3 配列／オブジェクトを繰り返し処理する - v-for
• 7.3.1 配列から要素を順に取得する
• 7.3.2 インデックス番号を取得する
• 7.3.3 オブジェクトのプロパティを順に処理する
• 7.3.4 数値を列挙したい場合
• 7.4 v-forによるループ処理の注意点
• 7.4.1 配列の絞り込みには算出プロパティを利用する
• 7.4.2 異なる要素のセットを繰り返し出力する - <template>要素
• Part 8：コンポーネント連携
• 8.1 コンポーネント連携の種類
• 8.2 コンポーネントへのパラメーターの引き渡し - プロパティ
• 8.2.1 プロパティの基本
• 8.2.2 プロパティ値の型を制限する
• 8.2.3 検証ルールのさまざまな表現方法
• 8.2.4 プロパティ利用の注意点
• 8.3 子コンポーネントから親コンポーネントへの伝達 - カスタムイベント
• 8.3.1 カウンターアプリの例
• 8.3.2 incrementイベントの実装
• 8.3.3 カスタムイベントの監視
• 8.3.4 カスタムイベントの検証
• 8.4 コンポーネント配下のコンテンツをテンプレートに反映させる - スロット
• 8.4.1 スロットの基本
• 8.4.2 複数のスロットを利用する
• 8.5 子孫コンポーネントへの値の引き渡し - Provide／Inject
• 8.5.1 値をProvideする
• 8.5.2 値をInjectする
• 8.5.3 Provide値の操作
• 8.5.4 補足：共通コードの分離
• Part 9：組み込みコンポーネント
• 9.1 コンポーネントを動的に切り替える - <component>要素
• 9.1.1 動的コンポーネントの基本
• 9.1.2 コンポーネントの状態を維持する - <KeepAlive>要素
• 9.2 アニメーション機能を実装する - <Transition>要素
• 9.2.1 アニメーションの基本
• 9.2.2 <transition>要素の主な属性
• 9.2.3 複数要素を対象とするアニメーション
• 9.3 テンプレート配下のコンテンツを任意の場所に反映させる - <Teleport>要素
• 9.4 非同期処理の待ちメッセージを表示する - <Suspense>要素
• Part 10：ディレクティブ／プラグイン
• 10.1 ディレクティブの自作
• 10.1.1 ディレクティブの基本
• 10.1.2 親コンポーネントの監視
• 10.1.3 引数付きのディレクティブ
• 10.1.4 イベント処理を伴うディレクティブ
• 10.2 プラグイン
• 10.2.1 プラグインの基本
• 10.2.2 動作オプションの追加
• Part 11：ルーティング
• 11.1 ルーターの基本
• 11.1.1 ルーティング情報の定義
• 11.1.2 ルーターの有効化
• 11.1.3 トップページのテンプレート
• 11.1.4 補足：プログラムからページ遷移
• 11.2 パスの一部をパラメータ―として引き渡す - ルートパラメーター
• 11.2.1 ルートパラメーターの基本
• 11.2.2 ルートの優先順位
• 11.2.3 ルートパラメーターの記法
• 11.3 複数のビュー領域を設置する
• 11.4 入れ子のビューを設置する
• Part 12：Pinia
• 12.1 Piniaの組み込み
• 12.2 Piniaによるカウンターアプリ
• 12.3 Piniaストアの活用
• 12.3.1 ステート値を加工／演算する - ゲッター
• 12.3.2 アクションによる操作を監視する - アクションサブスクリプション
• 12.3.3 Piniaストアを拡張する - プラグイン
• 12.3.4 補足：アクションサブスクリプションのプラグイン化
• Part 13：ユニットテスト
• 13.1 ユニットテストの基本
• 13.1.1 テストコードを確認する
• 13.1.2 テストを実行する
• 13.1.3 テスト共通のコードを切り出す
• 13.2 ユニットテストのさまざまな手法
• 13.2.1 プロパティのテスト
• 13.2.2 入れ子になったコンポーネントのテスト
• 13.2.3 イベントのテスト
• 13.2.4 カスタムイベントのテスト
• 13.2.5 Provide／Injectのテスト

正誤表

FAQ

現在、FAQはありません。

ダウンロード

お問い合わせ

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

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