基礎から学ぶ Vue.js 【目次】
JavaScriptフレームワークの「Vue.js」の使い方を学ぶために「基礎から学ぶ Vue.js」という本を読んでみます。
- 目次
- 出版情報
- 著者紹介
- 寸評
目次
CHAPTER 1 Vue.jsとフレームワークの基礎知識
01 Vue.jsについて
●実際にVue.jsを採用した現場の声
●なぜVue.jsなのか？
●フレームワークとは？
02 Vue.jsのキーコンセプト
●親しみやすいテンプレート
●データバインディング
●「v-」からはじまるディレクティブ
●コンポーネント指向の画面構築
03 豊富なリソースを活用しよう
●Element
●Onsen UI
04 Vue.jsのインストール
●vue.jsファイルを読み込む
●学習用のファイル
●Vueアプリケーションの作成
[POINT] 始める前からエラーが出てしまった場合
05 Vue.jsの基本機能
●テキストのバインディング
●繰り返しの描画
●イべントの利用
●フォーム入力との同期
●条件分岐
●トランジション＆ア二メーション
06 オプションの構成を見てみよう
●基本的なオプションの構成
●el - マウントする要素
●data - データ
●computed - 算出プロパティ
●created - ライフサイクルフック
●methods - メソッド
[COLUMN] いつ、どこに、「new Vue()」したらよいの？
□まとめ
CHAPTER 2 データの登録と更新
07 基本のデータバインディング
●リアクティブデータって何？
●リアクティブなデータの定義
08 テキストと属性のデータバインディング
●テキストのデータバインディング
●属性のデータバインディング
[POINT] データの内容の確認
●データの更新
●クリックで力ウンターを増やそう
[COLUMN] thisは今、何を指している？
●クラスとスタイルのデータバインディング
●複数の属性のデータバインディング
●SVGのデータバインディング
[POINT] よくわからないけどエラーが起きた！
09 テンプレートにおける条件分岐
●v-ifとv-showの違いと使い分け方
●<template>タグによるv-ifグループ化
●v-else-ifおよびv-elseによるグループ化
10 リストデータの表示と更新
●要素を繰り返し描画する
[POINT] オブジェクトが処理される順序（公式ガイドより）
●キーの役割
[POINT] 不変でユ二ークなキーを設定しよう
●繰り返し描画しながら、さまざまな条件を適用する
●リストの更新
[POINT] 配列インデックスを使って操作してはいけないケース
[COLUMN] Vue.setについて
●ユ二ークキーを持たない配列
●オプションにデータを持たないv-for
●文字列に対するv-for
●外部からデータを取得する
11 DOMを直接参照する$elと$refs
●$elの使い方
●$refsの使い方
●$elや$refsは一時的な変更！
12 テンプレート制御ディレクティブ
●v-pre
●v-once
●v-text
●v-html
[POINT] 「v-html」「テンプレート」は信頼できるコンテンツに
●v-cloak
[COLUMN] 仮想DDMって何？
□まとめ
CHAPTER 3 イべントとフォーム入力の受け取り
13 イべントハンドリング
●メソッドイべントハンドラ
●インラインメソッドハンドラ
●使用可能なイべント
●フォーム入力の取得
●イべント修飾子
●キー修飾子
●システム修飾子
14 フォーム入力バインディング
●v-modelの使い方
●Vue.jsの双方向データバインディング
●v-modelで受け取るデータの型
[POINT] v-modelを使うときは属性の値は使われない
●復数行テキスト
●チェックボックス
●ラジオボタン
●セレクトボックス
●画像ファイル
●その他の入力タイプ
●修飾子
15 マウント要素外のイべントと操作
●スクロールイべントの取得
●スムーススクロールの実装
[COLUMN] Vue.js以外からのイべントの受け取り
□まとめ
CHAPTER 4 データの監視と加工
16 算出プロパティで処理を含むデータを作成する
●算出プロパティの使い方
●算出プロパティを組み合わせて使用しよう
●ゲッターとセッター
●算出プロパティのキャッシュ機能
●リストの絞り込みに利用しよう
●ソート機能を追加しよう
17 ウォッチャでデータを監視して処理を自動化する
●ウォッチャの使い方
●一度だけ動作するウォッチャ
●実行頻度の制御
●複数の値を監視する
[POINT] オブジェクト型の古い値との比較方法
●フォームを監視してAPIからデータを取得しよう
18 フィルタでテキストの変換処理を行う
●フィルタの使い方
●フィルタに引数を持たせる
●複数のフィルタをつなげて使用する
19 力スタムディレクティブでデータを監視しながらDOMを操作する
●力スタムディレクティブの使い方
●使用可能なフック
●動画の再生を操作する例
●前の状態と比較して処理を行う
20 nextTickで更新後のDDMにアクセスする
●nextTickの使い方
●更新後のDOMの高さを取得しよう
□まとめ
CHAPTER 5 コンポーネントでUI部品を作る
21 コンポーネントとは
22 コンポーネントの定義方法
●コンポーネントの登録
[POINT] コンポーネントを定義をするタイミング
●コンポーネントのオプション
●コンポーネントインスタンス
23 コンポーネント間の通信
●親子コンポーネント
●親子間のデータフロー
●親から子
●子から親
[COLUMN] $emitで渡したデータの変化
●非親子コンポーネント
●子コンポーネントを参照する「$refs」
●コンポーネントの属性のスコープ
24 スロットを使ったコンポーネントの力スタマイズ
●デフオルトスロット
●名前付きスロット
●スコープ付きスロット
25 コンポーネントの双方向データバインディング
●コンポーネントのv-model
●.syncこよる双方向データバインディング
26 テンプレートの定義方法
●テンプレートの種類
●テンプレートがDOMと認識されるケース
27 その他の機能やオプション
●関数型コンポーネント
●動的コンポーネント
●共通処理を登録するMixin
●コンポーネントのライフサイクル
●keep-aliveで状態を維持する
[COLUMN] コンポーネントの依存について
□まとめ
CHAPTER 6 トランジションとア二メーション
28 トランジションとは
●動作デモについて
●基本的なトランジションの使い方
●スタイルを定義して動かしてみよう
●トランジションクラス名とクラスのプレフイックス
●初期描画時にもトランジションを行う
29 単一要素トランジション
●単一要素トランジションで使用するトランジションクラス
●EnterとLeaveで別々のスタイルを定義する
●複数の要素をグループ化する
●EnterとLeaveのタイミングを変更する
●キーの変化によるトランジションの発動
30 リストトランジション
●リストトランジションで使用するトランジションクラス
●移動トランジション
●LeaveとMoveは同時に発生することがある
31 SVGのトランジション
32 トランジションフック
●使用できるトランジションフック
●Vue.js側でCSS操作を行わないようにする
□まとめ
CHAPTER 7 より大規模なアプリケーション開発
33 アプリケーションを拡張しよう
34 Vue CLIとは
●ソースコードを分けて管理
●webpackとは
[COLUMN] なぜ抽象化が必要なの?
35 単一ファイルコンポーネントとは
●スコープ付きCSS（Scoped CSS）
●外部ファイルの読み込み
●他のマークアップ言語やスタイルシート言語の使用
●本書におけるコーディングスタイル
36 ES2015モジュールの書き方
●モジュールを定義する
●モジュールを使用する
[COLUMN] 単一ファイルコンポーネントの正体
37 Node.Jsの導入
●npmとは
●Babelとは
38 Vue CLIの導入
●新しいプロジェクトの作成
●フォルダとファイルの構成
●開発サーバーを起動する
●ホットリロード
●プロジェクトをビルドする
●開発時のAPIのパスの統一やクロスドメイン対策
39 Vue.jsプラグイン
●Vue.jsプラグインの使い方
●プラグインを自作してみよう
40 ES2015で書いてみよう
●変数宣言の書き方
●関数とメソッドの書き方
●テンプレートリテラル
●オブジェクトプロパティのショートハンド
●分割代入
●スプレッド演算子
●配列メソッド
●Promise
□まとめ
CHAPTER 8 Vuexでアプリケーションの状態を管理する
41 Vuexとは
●Vuexを導入するメリット
●Vuexのインストール
42 シンプルなストア構造
●ストアをVueアプリケーションに登録する
●Vuex内のインスタンスの参照方法
43 コアコンセプト
●ステート（state）
●ゲッター（getter）
●ミューテーション（mutations）
●アクション（actions）
●Vuexのルール
[COLUMN] アクションで非同期処理をするのはなぜ？
44 コンポーネントでストアを使用しよう
●メッセージを使用する
●メッセージを更新する
[COLUMN] Vuexは初期段階で検討しよう
●ステートやゲッタ一にv-modelを使用する
●コンポーネントとストアをバインドするへルパー
45 モジュールで大きくなったストアを分割する
●モジュールの使い方
●同一のミューテーションタイプ
●ネームスペース
●モジュールのネスト
●ネームスペース付きモジュールから外部へのアクセス
●モジュールをファイルごとに分ける
●モジュールの再利用
46 その他の機能やオプション
●ストアの状態を監視する
●Strictモードで開発する
●Vuexでホットリロードを使用する
[COLUMN] コンポーネントとどう切り分けたらよい？
□まとめ
CHAPTER 9 Vue RouterでSPAを構築する
47 Vue Routerとは
●シングルページアプリケーション
●Vue Routerのインストール
●組み込みコンポーネント
48 シンプルなSPA構造
●URLにハッシュを付けない
●ルーティング用プロパティ
49 ルートの定義とオプション
●名前付きのルート
●パラメータ
●クエリー
●メタフィールド
●リダイレクト
50 ナビゲーションの作成
●テンプレートによるナビゲーション
●プログラムによるナビゲーション
51 パラメータ付きの動的ルートからコンテンツを作成しよう
[POINT] ページコンポーネントの構成
●パターンマッチのルーティング
●パラメータをpropsとしてコンポーネントに渡す
●コンテンツを表示する
52 ネストされた複雑なページを作成しよう
●ネストされたルートの定義
●データの共有にはVuexを使用する
●親ルート用コンポーネントの定義
53 ナビゲーションガード
●ナビゲーションガードの引数
[POINT] ナビゲーションガードのトリガについて
●ルート単位のガード
●グローバルのガード
●コンポーネントのガード
●完全なナビゲーション解決フロー
54 ページの遷移にエフェクトを適用する
●簡単なトランジション
●非同期読み込みを含むトランジション
55 その他の機能やオプション
●遷移前のデータの読み込み
●コンポーネントの非同期読み込み
●ルートのアクセス制限
[POINT] ソースコードに大事な情報を書かない
●スクロールの振る舞いを操作する
[COLUMN] SPAの注意点
□まとめ
●索引
出版情報
基礎から学ぶ Vue.js - 株式会社C&R研究所
http://www.c-r.com/book/detail/1230
サポートページ
サンプルコードなどの掲載
正誤表
https://cr-vue.mio3io.com/guide/#誤記について
著者紹介
mio
群馬県出身
会社や自宅では犬猫に囲まれつつ、フリーランス生活、勉強会講師など。
寸評
表紙のニャンコが印象的ですｗ
中身をパラパラっと読みましたが、図解で分かりやすいと思います。
Vue.jsの公式ドキュメントは、文字の説明でいまいち分かりづらいですが、本書は親切丁寧に説明してくれているので読みやすいです。
（公式ドキュメントよりも分かりづらかったら買う意味ないけど、本書ならOK）
著者さんのTwitterを拝見したら、よく売れて重版決定！とのこと。
（おめでとうございますｗ）
誤記いくつか見つかっているので、今日中にまとめなければ。
— mio🐾Vue.js本発売中 (@mio3io) June 13, 2018
次の版では、誤植も訂正されると思うので、これから買う予定の人は、急ぎでなければ新しい版が出るのを待って、購入したらいいかも？
まあ、現時点でもそんなに誤植は多くないみたいなので、気にならないと言えば気になりませんが。
JavaScriptのフレームワークは、Vue.jsの他にも、ReactやAngularなどいろいろあります。
とりあえず、Vue.jsは学習コストが小さいかんじなので、Vue.jsの使い方を勉強してみたいと思います。
Vue.jsの学習で得た知見を基にして、他のJSフレームワークも調査してみよう。
