ISBN: 978-4-8156-1336-5
これからはじめるVue.js 3実践入門
| 著者 | 山田祥寛 |
|---|---|
| 出版社 | SBクリエイティブ |
| 価格 | 3,400円(税別) |
| 判型 | B5変判・2色 |
| ページ数 | 532ページ |
| 発売日 | 2022年3月19日 |
| シリーズ | これからはじめる実践入門 |
| 対象レベル | 中級 |
「Vue.js」のエッセンスを一冊に凝縮!
JavaScriptフレームワーク「Vue.js」について解説した入門書です。Vue.jsの中核である、ページを構成するUI部品「コンポーネント」をしっかりと解説し、さらに本格的なアプリ開発で必要となる要素までを網羅的に取り扱います。
サンプルコードは、サポートページよりダウンロード可能で、試しながら理解できます。
更新履歴
- FAQ情報:2023年8月22日 更新
- 正誤訂正:2024年11月29日 更新
目次
- 導入編
- Chapter1 イントロダクション
- 1-1 JavaScriptの歴史
- 1-1-1 初期の盛り上がりから「不遇の時代」へ
- 1-1-2 Ajax による JavaScript の復権
- 1-1-3 HTML5 の時代へ
- 1-2 jQueryからJavaScriptフレームワークへ
- 1-2-1 jQuery の時代
- 1-2-2 jQuery の限界と JavaScript フレームワーク
- 1-3 主なJavaScriptフレームワークとVue.js
- 1-3-1 フレームワークとは?
- 1-3-2 主な JavaScript フレームワーク
- 1-3-3 Vue.js の特徴
- Chapter2 Vue.jsの基本
- 2-1 Vue.jsを利用するための準備
- 2-1-1 Vue.js アプリの実行
- 2-2 Vue.js理解のための3つの柱
- 2-2-1 ディレクティブ
- 2-2-2 算出プロパティ
- 2-2-3 ライフサイクルフック
- 2-2-4 補足:メソッドの簡易構文とアロー関数
- 2-3 リアクティブデータ
- 2-3-1 リアクティブシステムの例
- 2-3-2 ビューの非同期更新を理解する
- 2-3-3 ウォッチャーによる明示的な監視
- 基本編
- Chapter3 ディレクティブ
- 3-1 イベント関連のディレクティブ
- 3-1-1 イベントの基本
- 3-1-2 Vue.js で利用できる主なイベント
- 3-1-3 イベントオブジェクト
- 3-2 フォーム関連のディレクティブ
- 3-2-1 双方向データバインディング
- 3-2-2 ラジオボタン
- 3-2-3 チェックボックス(単一)
- 3-2-4 チェックボックス(複数)
- 3-2-5 選択ボックス
- 3-2-6 ファイル入力ボックス
- 3-2-7 バインドの動作オプションを設定する
- 3-2-8 バインドのタイミングを遅延させる - .lazy 修飾子
- 3-2-9 双方向データバインドのカスタマイズ
- 3-3 制御関連のディレクティブ
- 3-3-1 式の真偽に応じて表示と非表示を切り替える - v-if
- 3-3-2 式の真偽に応じて表示/非表示を切り替える -v-show
- 3-3-3 配列やオブジェクトを繰り返し処理する - v-for
- 3-3-4 v-for によるループ処理の注意点
- 3-3-5 配列の変更を反映する - 変更メソッド
- 3-3-6 配列要素の追加/削除を効率的に行う
- 3-4 データバインディング関連のディレクティブ
- 3-4-1 属性に値をバインドする - v-bind
- 3-4-2 文字列を HTML として埋め込む - v-html
- 3-4-3 値を一度だけバインドする - v-once
- 3-4-4 要素にスタイルプロパティを設定する - v-bind:style
- 3-4-5 要素にスタイルクラスを設定する - v-bind:class
- 3-4-6 {{...}} 構文による画面のチラツキを防ぐ - v-cloak
- 3-5 より高度なイベント処理
- 3-5-1 定型的なイベント処理を宣言的に指定する - イベント修飾子
- 3-5-2 イベントの既定の動作をキャンセルする
- 3-5-3 一度だけしか実行されないハンドラーを登録する
- 3-5-4 イベントの伝播を抑制する
- 3-5-5 キーイベントでのキーを識別する - キー修飾子
- 3-5-6 システムキーとの組み合わせを検知する
- 3-5-7 マウスの特定のボタンを検知する - マウス修飾子
- Chapter4 コンポーネント(基本)
- 4-1 コンポーネントの基本
- 4-1-1 コンポーネントの定義
- 4-1-2 コンポーネントの呼び出し
- 4-1-3 グローバル登録とローカル登録
- 4-2 コンポーネント間の通信
- 4-2-1 コンポーネントのスコープ
- 4-2-2 親コンポーネント⇒子コンポーネントの伝達 - props オプション
- 4-2-3 プロパティ値の型を制限する
- 4-2-4 子コンポーネント⇒親コンポーネントの伝達 - $emit メソッド
- 4-2-5 親子間でのデータ授受を簡単化する - Provide / Inject
- 4-2-6 props / $emit や Provide / Inject を利用しない親子間通信
- 4-3 コンポーネント配下のコンテンツをテンプレートに反映させる ~ スロット
- 4-3-1 スロットのスコープ
- 4-3-2 複数のスロットを利用する
- 4-3-3 スロットから子コンポーネントの情報を引用する
- Chapter5 コンポーネント(応用)
- 5-1 組み込みコンポーネント
- 5-1-1 コンポーネントを動的に切り替える - <component> 要素
- 5-1-2 タブパネルを生成する
- 5-1-3 テンプレート配下のコンテンツを任意の場所に移動する
- 5-1-4 非同期リクエスト時の待ち受けメッセージを表示する
- 5-2 v-modelによる双方向データバインディング
- 5-2-1 コンポーネントでの v-model の利用例
- 5-2-2 v-model の紐付け先を変更する
- 5-2-3 カスタム修飾子の実装
- 5-3 アニメーション機能
- 5-3-1 アニメーションの基本
- 5-3-2 キーフレームによるアニメーション制御
- 5-3-3 アニメーションの制御
- 5-3-4 リストトランジション
- 5-4 コンポーネントのその他の話題
- 5-4-1 コンポーネントのエラー処理
- 5-4-2 JavaScript 標準のカスタム要素を併用する
- 5-4-3 テンプレートの記法
- 5-4-4 関数型コンポーネント
- Chapter6 部品化技術
- 6-1 コンポーネントの新記法「Composition API」[3.0]
- 6-1-1 なぜ、Composition API ?
- 6-1-2 Composition API の基本
- 6-1-3 reactive メソッドによる複数値のリアクティブ化
- 6-1-4 アンラップの例外
- 6-1-5 算出コンポーネントの定義 - computed メソッド
- 6-1-6 ウォッチ式の定義 - watch / watchEffect メソッド
- 6-1-7 ライフサイクルフック
- 6-1-8 Provide / Inject の定義
- 6-1-9 共通コードの分離
- 6-2 ディレクティブの自作
- 6-2-1 ディレクティブの基本
- 6-2-2 属性値の変化を検出する
- 6-2-3 修飾子付きのディレクティブを定義する
- 6-2-4 引数付きのディレクティブを定義する
- 6-2-5 イベント処理を伴うディレクティブ
- 6-2-6 例:marked ライブラリをラップする
- 6-3 プラグインの利用と自作
- 6-3-1 典型的な UI を実装する - ElementPlus
- 6-3-2 国際化対応ページを実装する - Vue I18n
- 6-3-3 プラグインの自作
- 6-4 ミックスインの自作
- 6-4-1 ミックスインの基本
- 6-4-2 マージのルール
- 6-4-3 グローバルミックスイン
- 応用編
- Chapter7 Vue CLI
- 7-1 Vue CLIの基本
- 7-1-1 Vue CLI のインストール
- 7-1-2 プロジェクトの自動生成
- 7-1-3 Vue CLI の主なサブコマンド
- 7-2 単一ファイルコンポーネント
- 7-2-1 単一ファイルコンポーネントの基本
- 7-2-2 ES2015 のモジュール構文
- 7-2-3 Composition API のシンタックスシュガー - setup 属性
- 7-2-4 コンポーネントのローカルスタイル - Scoped CSS
- 7-2-5 スタイルシートをモジュール化する - CSS モジュール
- 7-2-6 altJS 言語の活用 - TypeScript
- 7-3 次世代のCLIツール「Vite」
- 7-3-1 プロジェクトの新規作成
- 7-3-2 プロジェクトテンプレートの活用
- Chapter8 ルーティング
- 8-1 ルーティングとは?
- 8-1-1 Vue Router の準備
- 8-2 ルーティングの基本
- 8-2-1 ルーティング情報の定義
- 8-2-2 ルーターの有効化
- 8-2-3 メインコンポーネント(App.vue)
- 8-3 ルーター経由で情報を渡す手法
- 8-3-1 パスの一部をパラメーターとして引き渡す - ルートパラメーター
- 8-3-2 ルートパラメーターのさまざまな表現
- 8-3-3 ルートパラメーターをプロパティとして受け渡す
- 8-4 マルチビュー、入れ子のビュー、ガードなど
- 8-4-1 強制的に別のページを表示する
- 8-4-2 複数のビュー領域を設置する
- 8-4-3 入れ子のビューを設置する
- 8-4-4 ルート遷移時に処理を差し挟む - ナビゲーションガード
- 8-4-5 ルーターによるリンクの制御
- 8-4-6 ルーティングにかかわるその他のテクニック
- Chapter9 Vuex
- 9-1 Vuexとは?
- 9-1-1 Vuex の準備
- 9-2 Vuexの基本
- 9-2-1 Vuex を利用したカウンターアプリ
- 9-3 Vuexストアを構成する要素
- 9-3-1 ステートの内容を加工&取得する - ゲッター
- 9-3-2 ストアの状態を操作する - ミューテーション
- 9-3-3 非同期処理を実装する - アクション
- 9-3-4 ストアの機能を拡張する - プラグイン
- 9-4 巨大なストアを分割管理する ~ モジュール
- 9-4-1 モジュールの定義
- 9-4-2 モジュールへのアクセス
- 9-4-3 名前空間を分離する
- 9-4-4 名前空間付きモジュールから他のモジュールへアクセスする
- 9-4-5 mapXxxxx ヘルパーによるストアのマッピング
- Chapter10 テスト
- 10-1 単体テスト
- 10-1-1 単体テストの準備
- 10-1-2 テストスクリプトの基本
- 10-1-3 コンポーネントのテスト
- 10-1-4 shallowMount メソッドと mount メソッド
- 10-1-5 算出プロパティのテスト
- 10-1-6 イベントを伴うテスト
- 10-1-7 カスタムイベントを伴うテスト
- 10-2 E2Eテスト
- 10-2-1 E2E テストの準備
- 10-2-2 テストコードの基本
- 10-2-3 E2E テストの実行
- 10-2-4 expect アサーション
- 10-2-5 ページオブジェクトによる操作
- Chapter11 応用アプリ
- 11-1 アプリの構造を概観する
- 11-1-1 ファイル関係図
- 11-1-2 利用しているサービス/ライブラリ
- 11-2 アプリの共通機能を読み解く
- 11-2-1 起動スクリプト
- 11-2-2 ルーティングの定義
- 11-2-3 Vuex ストアの定義
- 11-3 アプリの実装を理解する
- 11-3-1 メインメニュー(メインコンポーネント)
- 11-3-2 書籍情報の表示
- 11-3-3 レビュー情報の一覧表示
- 11-3-4 Google ブックス経由での書籍検索
- 11-3-5 レビュー登録フォーム
- Column
- ECMAScript とは?
- Vue.js アプリ開発を支援するブラウザー拡張「Vue.js devtools」
- 識別子の記法
- Vue.js をより深く学ぶための参考書籍
正誤表
| 該当頁 | 該当箇所 | 修正刷 |
|---|---|---|
| 訂正箇所 | 訂正事項 | 更新日 |
| p.38 | 本文下から3行目 | 4刷 |
| しかも、data / computed ではメソッドの簡易表現、methods /ライフサイクルフックではアロー関数 | しかも、methods/ライフサイクルフックではメソッドの簡易表現、data/computedではアロー関数 | 2024/11/29 |
| p.179 | リスト 5-5 tabs.html 6行目 | 2刷 |
| v-on:click.prepend | v-on:click.prevent | 2022/09/04 |
FAQ
こちらでも現バージョンで確認したところ、エラーが再現されました。
現時点ではエラーの原因がわからず、もしかしたら、バージョンアップに伴い、内部の仕様が変更になったのかもしれません。
以下のような情報もあるようです。
https://ageo-soft.info/programming_languages/javascript/6876/
解決に至らず、恐縮ですが、vue serveにつきましては、.vueファイルを素早く実行するためのものという扱いですので、学習にあたっては、通常どおりパッケージのインストールを行って、進めていただけますと幸いです。
現時点ではエラーの原因がわからず、もしかしたら、バージョンアップに伴い、内部の仕様が変更になったのかもしれません。
以下のような情報もあるようです。
https://ageo-soft.info/programming_languages/javascript/6876/
解決に至らず、恐縮ですが、vue serveにつきましては、.vueファイルを素早く実行するためのものという扱いですので、学習にあたっては、通常どおりパッケージのインストールを行って、進めていただけますと幸いです。
更新日: 2023.08.22
ダウンロード
お問い合わせ
書籍に関するご質問や誤りのご報告、ご意見・ご感想などをお寄せください。
お問い合わせの前にFAQ・正誤表をご確認ください。すでに掲載済みの内容については個別回答が難しい場合があります。