Webデザインの現場で使えるVue.jsの教科書

Chapter 1　スタートアップ　〜なぜVue.js が必要なのか？〜
Chapter 2　Vue.jsのためのJavaScriptの基礎
Chapter 3　Vue.js デザインのキホン
Chapter 4　簡単なUIを作ってみよう
Chapter 5　現場で使えるUIデザインレシピ集

Chapter 1　スタートアップ　〜なぜVue.js が必要なのか？〜
　1-1 UI/UX を高めるVue.js の強み
　　1　UI/UX の簡単なおさらい
　　2　そもそも Vue.js とはなにか？
　　3　素早いフィードバックが UX の向上に寄与
　　4　導入が容易で高性能
　　5　Vue.js を使うとなにができるのか？
　1-2 代表的なJS フレームワークReact との違いは？
　　1　React とは多くの類似点がある
　　2　Vue.jsはHTML をテンプレートとして使える
　　3　短時間で習得できる Vue.js のメリット
　1-3 はじめの一歩を踏み出そう！　〜 Hello Vue.js!! 〜

Chapter 2　Vue.jsのためのJavaScriptの基礎
2-1 デベロッパーツールでおみくじアプリを動かそう
　　1　おみくじアプリを開いてみよう
　　2　おみくじアプリの動作を変更してみよう
　2-2 JavaScript で計算してみよう
　　1　算術演算子
　　2　比較演算子
　　3　論理演算子
　　Column　JavaScript のtrue とfalse について
　2-3 処理の基本「条件分岐（if）」と「繰り返し（for）」をおさえよう
　　1　条件分岐（if）
　　2　繰り返し処理（for）
　　Column　forEach について

　2-4 処理をまとめる便利な「関数」を学ぼう
　　1　関数の定義はこうする
　　2　関数の引数について
　　3　アロー関数　〜短い構文で処理を記述〜
　　Column　Ecmascriptとは？

　2-5 HTML 要素を特定する「セレクター」を学ぼう
　　1　要素セレクター　〜タグ名をもとに該当するHTML要素を取得〜
　　2　ID セレクター　〜 ID 属性をもとに該当のHTML要素を取得〜
　　3　クラスセレクター　〜class 属性をもとに該当のHTML要素を取得〜
　　4　要素の絞り込みの方法
　　Column　参考URL

　2-6 動作のきっかけとなる「イベント」を学ぼう
　　1　画面操作で発生する「イベント」
　　2　イベントの基本
　　3　各種イベントを学ぶ
　　4　イベントのバブリング（伝播）とは？

Chapter 3　Vue.js デザインのキホン
　3-1 はじめに　〜 Vue.jsの特徴をおさえよう〜
　　1　Vue.jsを使える状態にしよう
　　2　リアクティブとは？　〜複雑な処理なしで即座に反応できる〜
　　3　Progressive Framework（プログレッシブ・フレームワーク）とは？

　3-2 Vue.jsのキホン
　　1　Vue.js を利用するには？
　　2　テンプレートへのテキスト展開
　　Column　methods とcomputed について
　　Column　ディレクティブとは
　　3　属性値のテンプレートへの展開
　　4　スタイル（class と style）のテンプレートへの展開
　　5　テンプレートの制御（条件分岐と繰り返し）
　　6　イベント制御について
　　Column　Vue.js のthis

　3-3 ライフサイクルフック　〜変化に応じて処理を組み込もう〜

　3-4 入力フォーム　〜「双方向バインディング」で開発を効率化しよう〜
　　1　v-model の使い方
　　2　テキストボックスのバインディング
　　3　テキストエリアのバインディング
　　4　チェックボックスのバインディング
　　5　ラジオボタンのバインディング
　　6　セレクトボックスのバインディング
　　7　「修飾子」について
　　8　ウォッチャ　〜項目間の関連性チェックを実施〜

　3-5 トランジション　〜アニメーションを容易に実現する機能を使おう〜
　　1　トランジションとは？
　　2　カスタムクラスによるトランジション
　　3　JavaScript フックによるトランジション
　　4　CSS アニメーション
　　5　初期描画時のトランジション
　　6　要素間のトランジション
　　7　リストトランジション
　　8　ライブラリ連携について

Chapter 4　簡単なUIを作ってみよう
　4-1 おみくじアプリをVue.js に置き換えよう
　　1　Vue.jsの読み込みとプロパティの定義
　　2　ボタンクリックイベントの指定

　4-2 入力フォームを使いやすくしよう
　　1　コードの解説と表示例
　　2　フィルターを実装する

　4-3 商品一覧を表示し、ソート・フィルター処理をしよう
　　1　ソート・フィルターについて
　　2　商品データを定義する
　　3　data オプションを定義する
　　4　算出プロパティを定義する
　　5　sort() 関数について
　　6　メソッドを定義する
　　7　HTML の完成
　　8　フィルターを実装する

　4-4 2択方式の「診断コンテンツ」を作ろう
　　1　アプリの概要
　　2　診断コンテンツのHTML
　　3　診断コンテンツのCSS（トランジション）
　　4　dataオプションを定義する
　　5　算出プロパティを定義する
　　6　shift() メソッドについて
　　7　メソッドを定義する

　4-5 「もっと見る」で、大量のコンテンツを追加表示させてみよう
　　1　処理の概要
　　2　定数を定義する
　　3　「もっと見る」のHTML
　　4　dateオプションを定義する
　　5　メソッドを定義する
　　6　Array.concat() メソッドについて
　　7　Array.slice() メソッドについて
　　8　mounted ライフサイクルについて
　　9　「もっと見る」のCSS

Chapter 5　現場で使えるUIデザインレシピ集
　5-1 ショッピングカート　〜数量を変更すると価格が変動するフォームを作ろう〜
　　1　カート機能に必要な要件
　　2　アイコンを準備する
　　3　商品データを定義する
　　4　一覧とカートの HTML と CSS を記述
　　5　ボタンクリックでカートに追加できるようにする
　　6　カートをコンポーネント化する
　　7　コンポーネント間の通信を実現する

　5-2 LightBox　〜モーダルウィンドウで拡大画像を表示するUI を作ろう〜
　　1　LightBox に必要な要件
　　2　一覧をコーディングする
　　3　トランジションで気持ちのよいインタラクションを実現する

　5-3 ソート・フィルターのカスタマイズ　〜サイドメニューとアニメーションを追加しよう〜
　　1　ソート・フィルターの要件
　　2　商品名を絞り込む
　　3　価格を絞り込む
　　4　色を絞り込む
　　5　ソート順を切り替える
　　6　コンテンツ一覧を表示する
　　7　コンテンツリストの並べ替えにアニメーションをつける

　5-4 アコーディオンパネル　〜パネルがスライド表示されるUI を作ろう〜
　　1　アコーディオンパネルの概要
　　2　slot について
　　3　名前付きスロットの動作確認
　　4　コンポーネント化する
　　5　基本の HTML
　　6　開閉用の JavaScript を記述する
　　7　開閉のアニメーションを設定する

　5-5 入力フォーム・バリデーション　〜色々なパターンを作ろう〜
　　1　入力フォームの概要
　　2　エラーコンポーネントを定義する
　　3　基本のHTML
　　4　郵便番号検索ができるようにする
　　5　フォームの追加・削除
　　6　バリデーションを定義する

　5-6 インクリメンタルサーチ　〜文字入力ごとに検索結果を絞り込む仕組みを作ろう〜
　　1　市区町村データを準備する
　　2　ローカル環境でエラーが発生する場合

　5-7 タブ切り替え　〜タップに応じ文章が展開されるUI を作ろう〜
　　1　基本の HTML
　　2　クリックで表示／非表示を切り替える
　　3　動的コンポーネントを使った場合
　　4　API を使った場合

　5-8 モーダルウィンドウ　〜他のウィンドウ操作を受け付けないUI を作ろう〜
　　1　表示・非表示の動作を作成する
　　2　モーダルコンポーネントを作成する
　　3　CSS を設定する

　5-9 カルーセルパネル　〜画像を左右にスライドさせるUI を作ろう〜
　　1　カルーセルのベースを作成する
　　2　コンポーネント内の data オプションについて
　　3　スライドアニメーションをつける
　　4　カルーセルパネルを自動的にスライドさせる

索引