#author("2019-05-18T15:40:18+00:00","default:sagasite","sagasite")
[[Book]] > [[JavaScript]] > 基礎から学ぶ Vue.js
#author("2019-08-08T15:41:36+00:00","default:sagasite","sagasite")
[[Book]] ＞ [[JavaScript]] ＞ [[Vue.js]] ＞ 基礎から学ぶ Vue.js
#norelated
#contents
* 基礎から学ぶ Vue.js [#hacf4a2a]
#html{{
<table border="0" cellpadding="5"><tr><td valign="top"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4863542453/vertex9-22/" target="_blank"><img src="https://images-fe.ssl-images-amazon.com/images/I/51UVfJB%2B8sL._SL160_.jpg" border="0"></a></td><td> </td><td valign="top"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4863542453/vertex9-22/" target="_blank">基礎から学ぶ Vue.js</a><br>mio<br>シーアンドアール研究所<br>2018-05-29<br>￥ 3,694</td></tr></table>
}}
* 目次 [#a250d5b3]
** CHAPTER 1 Vue.jsとフレームワークの基礎知識 [#ee6e9c20]
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 データの登録と更新 [#tc40e2b3]
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 イべントとフォーム入力の受け取り [#i5cabb45]
13 イべントハンドリング
●メソッドイべントハンドラ
●インラインメソッドハンドラ
●使用可能なイべント
●フォーム入力の取得
●イべント修飾子
●キー修飾子
●システム修飾子
14 フォーム入力バインディング
●v-modelの使い方
●Vue.jsの双方向データバインディング
●v-modelで受け取るデータの型
[POINT] v-modelを使うときは属性の値は使われない
●復数行テキスト
●チェックボックス
●ラジオボタン
●セレクトボックス
●画像ファイル
●その他の入力タイプ
●修飾子
15 マウント要素外のイべントと操作
●スクロールイべントの取得
●スムーススクロールの実装
[COLUMN] Vue.js以外からのイべントの受け取り
□まとめ
** CHAPTER 4 データの監視と加工 [#h88e9563]
16 算出プロパティで処理を含むデータを作成する
●算出プロパティの使い方
●算出プロパティを組み合わせて使用しよう
●ゲッターとセッター
●算出プロパティのキャッシュ機能
●リストの絞り込みに利用しよう
●ソート機能を追加しよう
17 ウォッチャでデータを監視して処理を自動化する
●ウォッチャの使い方
●一度だけ動作するウォッチャ
●実行頻度の制御
●複数の値を監視する
[POINT] オブジェクト型の古い値との比較方法
●フォームを監視してAPIからデータを取得しよう
18 フィルタでテキストの変換処理を行う
●フィルタの使い方
●フィルタに引数を持たせる
●複数のフィルタをつなげて使用する
19 力スタムディレクティブでデータを監視しながらDOMを操作する
●力スタムディレクティブの使い方
●使用可能なフック
●動画の再生を操作する例
●前の状態と比較して処理を行う
20 nextTickで更新後のDDMにアクセスする
●nextTickの使い方
●更新後のDOMの高さを取得しよう
□まとめ
** CHAPTER 5 コンポーネントでUI部品を作る [#i71471b3]
21 コンポーネントとは
●コンポーネントは設計図
●コンポーネントの再利用
22 コンポーネントの定義方法
●コンポーネントの登録
[POINT] コンポーネントを定義をするタイミング
●コンポーネントのオプション
●コンポーネントインスタンス
23 コンポーネント間の通信
●親子コンポーネント
●親子間のデータフロー
●親から子
●子から親
[COLUMN] $emitで渡したデータの変化
●非親子コンポーネント
●子コンポーネントを参照する「$refs」
●コンポーネントの属性のスコープ
24 スロットを使ったコンポーネントの力スタマイズ
●デフオルトスロット
●名前付きスロット
●スコープ付きスロット
25 コンポーネントの双方向データバインディング
●コンポーネントのv-model
●.syncこよる双方向データバインディング
26 テンプレートの定義方法
●テンプレートの種類
●テンプレートがDOMと認識されるケース
27 その他の機能やオプション
●関数型コンポーネント
●動的コンポーネント
●共通処理を登録するMixin
●コンポーネントのライフサイクル
●keep-aliveで状態を維持する
[COLUMN] コンポーネントの依存について
□まとめ
** CHAPTER 6 トランジションとア二メーション [#d0fb17c5]
28 トランジションとは
●動作デモについて
●基本的なトランジションの使い方
●スタイルを定義して動かしてみよう
●トランジションクラス名とクラスのプレフイックス
●初期描画時にもトランジションを行う
29 単一要素トランジション
●単一要素トランジションで使用するトランジションクラス
●EnterとLeaveで別々のスタイルを定義する
●複数の要素をグループ化する
●EnterとLeaveのタイミングを変更する
●キーの変化によるトランジションの発動
30 リストトランジション
●リストトランジションで使用するトランジションクラス
●移動トランジション
●LeaveとMoveは同時に発生することがある
31 SVGのトランジション
●SVGをトランジションで切り替えよう
32 トランジションフック
●使用できるトランジションフック
●Vue.js側でCSS操作を行わないようにする
□まとめ
** CHAPTER 7 より大規模なアプリケーション開発 [#w97671cd]
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でアプリケーションの状態を管理する [#i36ce1a8]
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を構築する [#x0470930]
47 Vue Routerとは
●シングルページアプリケーション
●Vue Routerのインストール
●組み込みコンポーネント
48 シンプルなSPA構造
●URLにハッシュを付けない
●ルーティング用プロパティ
49 ルートの定義とオプション
●名前付きのルート
●パラメータ
●クエリー
●メタフィールド
●リダイレクト
50 ナビゲーションの作成
●テンプレートによるナビゲーション
●プログラムによるナビゲーション
51 パラメータ付きの動的ルートからコンテンツを作成しよう
[POINT] ページコンポーネントの構成
●パターンマッチのルーティング
●パラメータをpropsとしてコンポーネントに渡す
●コンテンツを表示する
52 ネストされた複雑なページを作成しよう
●ネストされたルートの定義
●データの共有にはVuexを使用する
●親ルート用コンポーネントの定義
53 ナビゲーションガード
●ナビゲーションガードの引数
[POINT] ナビゲーションガードのトリガについて
●ルート単位のガード
●グローバルのガード
●コンポーネントのガード
●完全なナビゲーション解決フロー
54 ページの遷移にエフェクトを適用する
●簡単なトランジション
●非同期読み込みを含むトランジション
55 その他の機能やオプション
●遷移前のデータの読み込み
●コンポーネントの非同期読み込み
●ルートのアクセス制限
[POINT] ソースコードに大事な情報を書かない
●スクロールの振る舞いを操作する
[COLUMN] SPAの注意点
□まとめ
* 出版社 [#tde29c37]
-基礎から学ぶ Vue.js｜株式会社 C&R研究所 http://www.c-r.com/book/detail/1230
■サポートページ（サンプルコードなどの掲載）
-基礎から学ぶ Vue.js https://cr-vue.mio3io.com/
-正誤表 | 基礎から学ぶ Vue.js https://cr-vue.mio3io.com/guide/#%E6%AD%A3%E8%AA%A4%E8%A1%A8
* 著者 [#n218a30d]
●mio
群馬県出身
株式会社チャーム ウェブデザイナー・ウェブエンジニア
会社や自宅では犬猫に囲まれつつ、フリーランス活動、勉強会の講師など。
■Webサイト
-https://mio3io.com/
-https://twitter.com/mio3io
-https://github.com/mio3io
-https://qiita.com/mio3io
* 学習メモ [#x1e392f2]
|頁+行|章節|項目|日付|h
//| [[書名_p_L]] | | | |
