JavaScript勉強会

JavaScriptの学習日記

基礎から学ぶ Vue.js 【目次】

JavaScriptフレームワークの「Vue.js」の使い方を学ぶために「基礎から学ぶ Vue.js」という本を読んでみます。

 

基礎から学ぶ 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トランジション

  ●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

 

サポートページ

サンプルコードなどの掲載

 

cr-vue.mio3io.com

 

github.com

 

正誤表

https://cr-vue.mio3io.com/guide/#誤記について

 

著者紹介

mio

群馬県出身

株式会社チャーム ウェブデザイナー・ウェブエンジニア。

会社や自宅では犬猫に囲まれつつ、フリーランス生活、勉強会講師など。

 

twitter.com

 

mio3io.com

 

qiita.com

 

chibinowa.net

 

寸評

表紙のニャンコが印象的ですw

 

中身をパラパラっと読みましたが、図解で分かりやすいと思います。

Vue.jsの公式ドキュメントは、文字の説明でいまいち分かりづらいですが、本書は親切丁寧に説明してくれているので読みやすいです。

(公式ドキュメントよりも分かりづらかったら買う意味ないけど、本書ならOK)

 

jp.vuejs.org

 

著者さんのTwitterを拝見したら、よく売れて重版決定!とのこと。

(おめでとうございますw)

 

 

次の版では、誤植も訂正されると思うので、これから買う予定の人は、急ぎでなければ新しい版が出るのを待って、購入したらいいかも?

まあ、現時点でもそんなに誤植は多くないみたいなので、気にならないと言えば気になりませんが。

 

JavaScriptフレームワークは、Vue.jsの他にも、ReactやAngularなどいろいろあります。

とりあえず、Vue.jsは学習コストが小さいかんじなので、Vue.jsの使い方を勉強してみたいと思います。

Vue.jsの学習で得た知見を基にして、他のJSフレームワークも調査してみよう。