書籍：Vue.jsのツボとコツがゼッタイにわかる本

Vue.jsのツボとコツがゼッタイにわかる本

※ 前回記事：ジョブ理論
※ 書籍一覧

タイトル	Vue.jsのツボとコツがゼッタイにわかる本
著者	中田亨／著
出版者	東京 秀和システム
出版年	2019.3
形態事項	319p 24cm
シリーズ名	最初からそう教えてくれればいいのに!
ISBN	978-4-7980-5649-4
価格	(本体価格 \2700)
NDC10(NDC9)	007.645 (547.4833)
予約日	2021.04.20(火)
入手日	2021.05.17(月)

※ サポートページ：https://www.shuwasystem.co.jp/

1. Vue.jsとフレームワークの基礎

1-1. Vue.jsとは

・Vue.jsとは
・フレームワークとは？
・なぜフレームワークを使うのか？
・Vue.jsの特徴

1-2. Vue.jsを学ぶメリット

・UI構築はフロントエンドの役目になった
・DOMがウェブページとJavaScriptをつなぐ
・jQueryでは間に合わない
・データ駆動のVue.jsがDOM操作の問題を解決
・Vue.jsから利用できるUIコンポーネント

1-3. Vue.jsの概要

・Vue.jsの機能
・リアクティブシステムとデータバインディング
・条件付きレタリング
・リストバインディング

2. Vue.jsをはじめよう

2.1. Vue.jsのインストール

・Vue.js本体を入手しよう
・VUe.jsをアプリケーションに読み込もう

2-2. 基本のファイル構成

・一般的なアプリケーションの設計モデル
・Vue.jsアプリケーションの設計モデル
・Vue.jsアプリケーションのファイル構成
・Vue.jsアプリケーションの雛形

2-3. Vue.jsのオプション構成と役割

・オブジェクトとは？
・JavaScriptのオブジェクト表記
・Vueのオプション構成

2-4. レタリング(ページを描画する)

・テキストにバインドする
・属性にバインドする
・スタイル(style)属性にバインドする
・クラス(class)属性にバインドする
・リストデータをバインドする
・条件付きでバインドする

2-5. フィルター(描画用にデータを加工する)

・フィルターとは？
・グローバルスコープにフィルターを登録する
・ローカルスコープにフィルターを登録する
・複数のフィルターをつなげる

2-6. 算出プロパティ(再利用可能な核済みデータ)

・算出プロパティとは？
・算出プロパティはキャッシュされる

2-7. イベントハンドリング(ユーザーの操作を検知する)

・イベントとは？
・よく使われるイベント
・イベントハンドラの登録(v-onディレクティブ)
・コンポーネントの外側のイベントハンドリング
・イベントハンドラが受け取る引数

2-8. ウォッチャ(データの変更を監視する)

・ウォッチャとは？
・ウォッチャの登録(watchオプション)
・算出プロパティとウォッチャの使い分け
・ウォッチャで算出プロパティを監視する

2-9. フォーム入力バインディング(データと入力を同期する)

・双方向のデータバインド
・テキストボックス(改行できない入力欄)
・テキストエリア(改行できる入力欄)
・チェックボックス
・ラジオボタン(2つ以上の選択肢から1つを選ぶ)
・セレクトボックス(プルダウン方式の選択肢)
・カレンダー(日付の選択)
・応用例1(日付の選択範囲を制限する)
・応用例2(レンジ入力とカラー選択を同期する)
・制御をサポートする3つの修飾子

2-10. トランジション(表示の切り替えを滑らかにする)

・トランジションとは？
・CSSトランジション

3. Vue.jsで商品一覧を描画してみよう！

3-1. 商品一覧ページの仕様

・初期表示
・機能詳細

3-2. モックアップの作成

・HTMLとCSSで静的なページを作成する
・JavaScriptで絞り込み機能を作成する
・JavaScriptで並び替え機能を作成する

3-3. 商品データをアプリケーションに結び付ける

・Vue.jsを組み込む
・dataオプションにデータを定義する
・構文エラーがないか確認する

3-4. 商品データを描画する

・出力するHTMLのパターン
・テンプレート構文で置き換える
・うまくいなかい例
・金額の書式と商品名の改行

3-5. ユーザーの入力に応じて表示を切り替える

・フォームコントロールにデータバインドする
・絞り込み機能を実装する
・並び替え機能を実装する
・商品にキー(key)を指定する

4. Ajaxで商品データを外部ファイルから読み込もう！

4-1. AjaxとJSON形式

・Ajaxとは？
・JSONとは？

4-2. JavaScriptでAjaxを利用する

・JSONデータを準備する
・イベントハンドラを作成する
・XMLHttpRequestオブジェクトの使い方
・クロスドメイン制約への対応
・レスポンスを処理する

4-3. jQueryでAjaxを利用する

・jQueryとは？
・イベントハンドラを作成する
・JSONを取得する
・レスポンスを処理する

4-4. JSONPでクロスドメイン制約を回避する

・JSONPとは？
・JSONPをAjaxで非同期に読み込む

4-5. Vue.jsアプリケーションでAjaxを利用する

・商品リストをAjaxで読み込む
・通信エラー発生時の処理を追加する

5. Vue.jsで自動見積フォームを作ってみよう！

5-1. 自動見積フォームの作成

・フォームの仕様

5-2. モックアップの作成

・HTMLとCSSで静的なページを作成する
・JavaScriptで自動計算処理を実装する

5-3. フォームのプログラムにVue.jsを適用する(JavaScript)

・Vue.jsを組み込む準備
・dataオプションにプロパティを追加する
・算出プロパティを追加する
・プロパティの初期値を設定する
・フィルターを追加する

5-4. フォームのテンプレートにVue.jsを適用する(HTML)

・基本料金のデータバインド
・オプション料金のデータバインド
・合計金額のデータバインド
・コンポーネントの動作確認
・テンプレートが一瞬見えてしまうのはなぜ？

6. Vue.jsのコンポーネントをモジュール化してみよう！

6-1. コンポーネントの基本

・コンポーネントの定義方法
・データの受け渡し (親コンポーネントから子コンポーネント)
・データの受け渡し (子コンポーネントから親コンポーネント)
・コンポーネントのイベントハンドリング
・コンポーネントを繰り返し描画する (v-for)
・コンポーネントの配置場所に関する制限

6-2. 商品一覧をコンポーネント化する

・コンポーネントの親子関係を決める
・モジュールを分割する
・データの持たせ方を決める
・コンポーネントの動作仕様を決める
・ルートコンポーネントの作成
・フィルターの作成
・商品コンポーネントの作成
・ヘッダーコンポーネントの作成
・商品一覧コンポーネントの作成
・コンポーネントの完成

6-3. 単一ファイルコンポーネントとは？

・単一ファイルコンポーネントの例
・export defaultとは？
・scopedとは？

6-4. 開発環境「Vue CLI」を導入する

・Vue CLIとは？
・開発環境(Vue CLI)の導入
・Vue CLIの基本的な使い方
・デフォルトプリセットで作成したプロジェクトのモジュール構成

6-5. 商品一覧を単一ファイルコンポーネントで再構築する

※ 次回記事：ヒトデはクモよりなぜ強い

---

書籍, Vue.js