書籍詳細（これからはじめるVue.js実践入門）

これからはじめるVue.js実践入門 書影

ISBN: 978-4-8156-0182-9

これからはじめるVue.js実践入門

vue.js javascript フレームワーク java
サポート終了
著者山田祥寛
出版社SBクリエイティブ
価格3,380円（税別）
判型B5変判・2色
ページ数468ページ
発売日2019年8月22日
シリーズ これからはじめる実践入門
対象レベル中級
Amazonで購入
B!

改訂版が刊行されています。詳細はこちらをご覧ください。

「Vue.js」のエッセンスを一冊に凝縮！

JavaScriptフレームワーク「Vue.js」について、丁寧に解説した入門書です。
Vue.jsの中核である、ページを構成するUI部品「コンポーネント」をしっかりと解説し、さらに本格的なアプリ開発で必要となる要素までを網羅的に取り扱います。
豊富なサンプルコードは、サポートページよりダウンロード可能。
実際に手を動かして、楽しみながら学んでみてください。
これからはじめるVue.js実践入門 ロゴ

更新履歴

  • FAQ情報：2022年1月16日 更新
  • 正誤訂正：2021年11月11日 更新

目次

  • ■導入編
  • 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 の特徴
  • 導入ハードル、学習コストが低い
  • アプリの段階的（Progressive）な成長に対応できる
  • コンポーネント指向である
  • ドキュメントやライブラリが充実している
  • ＜COLUMN＞ ECMAScript とは？
  • Chapter2 Vue.js の基本
  • 2-1 Vue.js を利用するための準備
  • 2-1-1 Vue.js アプリの実行
  • 補足：オフライン環境で Vue.js を実行する
  • 2-2 Vue.js 理解のための3つの柱
  • 2-2-1 ディレクティブ
  • 文字列をテンプレートに埋め込む～v-text
  • {{ }}構文を無効化する～v-pre
  • 属性値にJavaScript式を埋め込む～v-bind
  • 2-2-2 算出プロパティ
  • 算出プロパティの基本
  • メソッドによるロジックの切り出し
  • 算出プロパティとメソッドの相違点
  • 2-2-3 ライフサイクルフック
  • ライフサイクルフックの具体的な例
  • 2-3 リアクティブデータ
  • 2-3-1 リアクティブシステムの例
  • 2-3-2 リアクティブシステムの制約
  • 2-3-3 ビューの非同期更新を理解する
  • 2-3-4 ウォッチャーによる明示的な監視
  • ウォッチャーの具体的な例
  • 補足：ウォッチャーのさまざまな定義方法
  • ＜COLUMN＞ 識別子の記法
  • ■基本編
  • Chapter3 ディレクティブ
  • 3-1 イベント関連のディレクティブ
  • 3-1-1 イベントの基本
  • 別解：イベント処理の記法
  • 3-1-2 Vue.js で利用できる主なイベント
  • マウスの出入りに応じて画像を切り替える
  • 補足：mouseenter／mouseleaveとmouseover ／ mouseout の相違点
  • 画像が読み込めない場合にダミー画像を表示する
  • 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 バインドの動作オプションを設定する
  • 入力値を数値としてバインドする～.number修飾子
  • 入力値の前後の空白を除去する～.trim修飾子
  • 3-2-8 バインドのタイミングを遅延させる～ .lazy 修飾子
  • 3-2-9 双方向データバインドのカスタマイズ
  • 3-3 制御関連のディレクティブ
  • 3-3-1 式の真偽に応じて表示と非表示を切り替える～ v-if
  • 式がfalseの場合の表示を定義する
  • 複数の分岐を表現する
  • 注意：要素の再利用による問題
  • 3-3-2 式の真偽に応じて表示／非表示を切り替える～ v-show
  • 3-3-3 配列やオブジェクトを繰り返し処理する～ v-for
  • 配列から要素を順に取得する
  • インデックス番号を取得する
  • オブジェクトのプロパティを順に処理する
  • 数値を列挙したい場合
  • 3-3-4 v-for によるループ処理の注意点
  • 配列の絞り込みには算出プロパティを利用する
  • 異なる要素のセットを繰り返し出力する～<template>要素
  • 3-3-5 配列の変更を反映する～変更メソッド
  • 3-3-6 配列要素の追加／削除を効率的に行う
  • 3-4 データバインディング関連のディレクティブ
  • 3-4-1 属性に値をバインドする～ v-bind
  • 複数の属性をまとめて指定する
  • 要素オブジェクトのプロパティを設定する
  • JavaScript式から属性値を決定する
  • 3-4-2 文字列をHTMLとして埋め込む～ v-html
  • 3-4-3 値を一度だけバインドする～ v-once
  • 3-4-4 要素にスタイルプロパティを設定する～ v-bind:style
  • 複数のスタイル情報を適用する
  • ベンダープレフィックスを自動補完する
  • 3-4-5 要素にスタイルクラスを設定する～ v-bind:class
  • 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 マウスの特定のボタンを検知する～マウス修飾子
  • ＜COLUMN＞ Vue.js アプリ開発を支援するブラウザー拡張「Vue.js devtools」
  • Chapter4 コンポーネント（基本）
  • 4-1 コンポーネントの基本
  • 4-1-1 コンポーネントの定義
  • 4-1-2 コンポーネントの呼び出し
  • 4-1-3 グローバル登録とローカル登録
  • 4-2 コンポーネント間の通信
  • 4-2-1 コンポーネントのスコープ
  • 4-2-2 親コンポーネント　子コンポーネントの伝達～ props オプション
  • 例：プロパティで受け取った値を更新する
  • 補足：props定義されていない属性が渡された場合
  • 4-2-3 プロパティ値の型を制限する
  • 検証ルールのさまざまな表現方法
  • 4-2-4 子コンポーネント　親コンポーネントの伝達～ $emit メソッド
  • カスタムイベントの例
  • 補足：ブラウザーネイティブなイベントを監視する
  • 4-2-5 propsや$emitを利用しない親子間通信
  • 4-3 コンポーネント配下のコンテンツをテンプレートに反映させる～スロット
  • 4-3-1 スロットのスコープ
  • 4-3-2 複数のスロットを利用する
  • 補足：v-slotのさまざまな構文
  • 4-3-3 スロットから子コンポーネントの情報を引用する～スコープ付きスロット
  • defaultスロットの省略構文
  • ＜COLUMN＞ Vue.js をより深く学ぶための参考書籍
  • Chapter5 コンポーネント（応用）
  • 5-1 動的コンポーネント
  • 5-1-1 動的コンポーネントの基本
  • 5-1-2 タブパネルを生成する
  • 補足：要素の属性
  • 5-2 v-model による双方向データバインディング
  • 5-2-1 コンポーネントでのv-model の利用例
  • 別解：算出プロパティによる出し入れ
  • 5-2-2 v-model の紐付け先を変更する～ model オプション
  • 5-2-3 複数のプロパティを双方向バインディングする～ .sync 修飾子
  • 5-3 アニメーション機能
  • 5-3-1 アニメーションの基本
  • 例：フェードイン／フェードアウトの実装
  • 5-3-2 キーフレームによるアニメーション制御
  • 5-3-3 アニメーションの制御
  • 初回表示でのアニメーション
  • 複数の要素を排他的に表示する
  • key属性をトリガーとしたアニメーション
  • Enter、Leaveのタイミングを制御する
  • 複数のアニメーションを同居させる
  • トランジションクラスを置き換える
  • JavaScript によるアニメーションの制御
  • 5-3-4 リストトランジション
  • 項目移動時のアニメーションを実装する
  • v-moveによるソート時のアニメーション
  • 5-4 コンポーネントのその他の話題
  • 5-4-1 テンプレートの記法
  • x-template
  • インラインテンプレート
  • renderオプション
  • 5-4-2 関数型コンポーネント～ functional オプション
  • Chapter6 部品化技術
  • 6-1 ディレクティブの自作
  • 6-1-1 ディレクティブの基本
  • 6-1-2 属性値の変化を検出する
  • 補足：bindとupdateをまとめて定義する
  • 値の変化をより厳密に検知する
  • 6-1-3 修飾子付きのディレクティブを定義する
  • 6-1-4 引数付きのディレクティブを定義する
  • 補足：属性値、引数、修飾子の使い分け
  • 6-1-5 イベント処理を伴うディレクティブ
  • 6-1-6 markedライブラリをラップする
  • 6-2 フィルターの自作
  • 6-2-1 フィルターの基本
  • 例：改行文字を <br> 要素に変換する
  • 6-2-2 パラメーター付きのフィルターを定義する
  • 6-2-3 複数のフィルターを連結する
  • 6-3 プラグインの利用と自作
  • 6-3-1 検証プラグインの利用～ VeeValidate
  • 補足：VeeValidate のカスタマイズ
  • 6-3-2 典型的なUI を実装する～ Element
  • 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 の主なサブコマンド
  • プラグインを追加する～vue addコマンド
  • .vueファイルを素早く実行する～vue serveコマンド
  • Vue CLIプロジェクトをGUI管理する～vue uiコマンド
  • 7-2 単一ファイルコンポーネント
  • 7-2-1 単一ファイルコンポーネントの基本
  • テンプレートの定義～<template>要素
  • コンポーネントの定義～<script>要素
  • スタイルの定義～<style>要素
  • 7-2-2 ES20XX のモジュール
  • モジュールの定義
  • モジュールの利用
  • App.vue、HelloWorld.vueを読み解く
  • 7-2-3 コンポーネントのローカルスタイル～ Scoped CSS
  • Scoped CSSの基本
  • 7-2-4 main.js を読み解く
  • 7-3 TypeScript
  • 7-3-1 TypeScript の導入
  • 7-3-2 TypeScript プロジェクトのフォルダー構造
  • 7-3-3 TypeScript 形式のコンポーネント
  • 7-3-4 コンポーネントの主な構成要素
  • メソッド（methodsオプション）
  • 算出プロパティ（computedオプション）
  • カスタムイベント
  • ディレクティブ、フィルターなど
  • ウォッチャー
  • Chapter8 ルーティング
  • 8-1 ルーティングとは？
  • 8-1-1 Vue Router の準備
  • 8-2 ルーティングの基本
  • 8-2-1 ルーティング情報の定義
  • 補足：コンポーネントの非同期ロード
  • ルートの有効化
  • 8-2-2 メインコンポーネント（App.vue）
  • 補足：プログラムからページ遷移
  • 8-3 ルーター経由で情報を渡す手法
  • 8-3-1 パスの一部をパラメーターとして引き渡す～ルートパラメーター
  • 補足：$routeオブジェクトで取得できる情報
  • 8-3-2 ルートパラメーターのさまざまな表現
  • 任意のパラメーター
  • 可変長のパラメーター
  • 値の形式をチェック
  • 8-3-3 ルートパラメーターをプロパティとして受け渡す
  • 補足：パラメーターの型変換
  • 8-4 マルチビュー、入れ子のビュー、ガードなど
  • 8-4-1 複数のビュー領域を設置する
  • 8-4-2 入れ子のビューを設置する
  • 8-4-3 ルート遷移時に処理を差し挟む ～ ナビゲーションガード
  • 8-4-4 ルーターによるリンクの制御
  • active-class属性
  • exact属性
  • replace属性
  • append属性
  • tag属性
  • event属性
  • 8-4-5 ルーティングにかかわるその他のテクニック
  • ルートパラメーター変化にかかわる注意点
  • ルーティング時にアニメーションを適用する
  • ルーティング時のスクロールを制御する
  • ルート単位の認証
  • Chapter9 Vuex
  • 9-1 Vuex とは？
  • 9-1-1 Vuex の準備
  • 9-2 Vuex の基本
  • 9-2-1 Vuex を利用したカウンターアプリ
  • 補足：mapStateヘルパー
  • 9-3 Vuex ストアを構成する要素
  • 9-3-1 ステートの内容を加工＆取得する～ゲッター
  • コンポーネントからゲッターを参照する
  • 補足：ゲッターのキャッシュルール
  • 9-3-2 ストアの状態を操作する～ミューテーション
  • 呼び出し時に引数を渡す
  • オブジェクト形式でのcommitメソッド呼び出し
  • Vuexストアでの双方向バインディング
  • ミューテーション型を定数化する
  • ミューテーションの呼び出しを簡単化する
  • 9-3-3 非同期処理を実装する～アクション
  • コンポーネントからアクションを呼び出す
  • 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 コンポーネントのテスト
  • setPropsメソッド
  • 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 アサーション
  • Chapter11 応用アプリ
  • 11-1 アプリの構造を概観する
  • 11-1-1 ファイル関係図
  • 11-1-2 利用しているサービス、ライブラリ
  • Google Books API
  • Element
  • vuex-persistedstate
  • 11-2 アプリの共通機能を読み解く
  • 11-2-1 起動スクリプト
  • 補足：Vueメンバー追加の際の注意点
  • 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 レビュー登録フォーム

正誤表

該当頁 該当箇所 修正刷
訂正箇所 訂正事項 更新日
p.41 構文の下 4行目、5行目 2刷
Vue.remove Vue.delete 2020/01/22
p.41 脚注18 2刷
remove delete 2020/01/22
p.77 リスト3-32 model_file.js 8行目～ 2刷
　methods: {
　　onchange: function() {
　　　let fl = this.$refs.upfile.files[0];
　　　...中略...
　　　.then(function (text) {
　　　　this.message = text;
　　　})
　　　...中略...
　　}
　}		 　methods: {
　　onchange: function() {
　　　let that = this;
　　　let fl = this.$refs.upfile.files[0];
　　　...中略...
　　　.then(function (text) {
　　　　that.message = text;
　　　})
　　　...中略...
　　}
　}		 2020/02/16
p.96 リスト 3-53　for_obj.html 3刷
　<ul v-for="(value, key, i) in book">
　　<li>{{ key }} ：{{ value }}</li>
　</ul>		 　<ul>
　　<li v-for="(value, key, i) in book">{{ key }} ：{{ value }}</li>
　</ul>		 2020/07/11
p.136 本文1行目の下のサンプルコード -
ng-model="name" v-model="name" 2020/11/11
p.160 リスト4-12 2行目 2刷
onclick() { onclick:function() { 2020/04/02
p.182 リスト5-5 tabs.html 6行目 2刷
v-on:click.prepend v-on:click.prevent 2020/04/07
p.208 リスト5-25 1行目 2刷
<script src="//cdnjs.cloudflare.com/..."> <script src="https://cdnjs.cloudflare.com/..."> 2020/04/02
p.307 図8-2 2刷
コントポーネント コンポーネント 2019/11/06
p.391 表10-6 1行目 メソッド名 -
attributeEquals attributeContains 2021/11/11

FAQ

サンプルを実行するためにはmarkedライブラリのインポート部分を以下のように書き換えてください。

修正前
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js "> </script>

修正後
<script src="https://cdn.jsdelivr.net/npm/marked@3.0.8 "> </script>

更新日: 2022.01.16

書籍中のサンプルはバージョン2系を前提に作成されているため、サンプルを実行するためにはVeeValidateプラグインのインポート部分を以下のように書き換えてください。

＜対象ファイル＞
chap06フォルダ内の「validate.html」「validate_custom.html」「validate_message.html」

＜修正内容＞
修正前
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/vee-validate.js "> </script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@latest/dist/locale/ja.js "> </script>

修正後
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.2.15/dist/vee-validate.js "> </script>
<script src="https://cdn.jsdelivr.net/npm/vee-validate@2.2.15/dist/locale/ja.js "> </script>

更新日: 2019.11.15

お問い合わせ

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

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