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





【カテゴリ】 JavaScript


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

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

山田祥寛/著
SBクリエイティブ株式会社/発行
定価 3,380円(+税)
B5変版・ 468ページ・ 2色
ISBN 978-4-8156-0182-9
発刊日: 2019年8月22日

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

[お知らせ] 2020/07/11、配布サンプルを修正。旧バージョンをご利用の方はお手数ですが、再ダウンロードしてください。

   FAQ 本書訂正 アンケート ダウンロード出版社サイト

本書の特徴

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

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

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

・ECMAScript をサクッと学びたい方へ
速習 ECMAScript 2019」(WINGSプロジェクト)
・JavaScriptを利用するWebプログラマ向けの逆引き集
JavaScript逆引きレシピ 第2版」(翔泳社)
・JavaScriptの基本知識をきちんと押さえよう
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで」(技術評論社)
分野・レベル別マップ

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

・note - にわけんさま
【本の紹介】これからはじめるVue.js実践入門(2019年9月30日)
・CodeZine - CodeZine編集部さま
【新刊紹介】『これからはじめるVue.js実践入門』、今一番人気のJavaScriptフレームワークの入門書(2019年9月19日)

  Contents


■導入編
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 レビュー登録フォーム

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


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