プログラミング★さがして！

Book > JavaScript > 基礎から学ぶ 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