BookJavaScriptVue.js > 基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

 基礎から学ぶ Vue.js
mio
シーアンドアール研究所
2018-05-29
¥ 3,694

目次

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の注意点

□まとめ

出版社

■サポートページ(サンプルコードなどの掲載)

著者

●mio
群馬県出身
株式会社チャーム ウェブデザイナー・ウェブエンジニア
会社や自宅では犬猫に囲まれつつ、フリーランス活動、勉強会の講師など。

■Webサイト

学習メモ

頁+行章節項目日付

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-05-18 (土) 23:59:32 (96d)