【2022年最新版】Vue.jsの勉強におすすめの本10選

Vue.js入門書の決定版! 初歩から実践までわかる!

Vue.jsを初歩から実践まで徹底的に解説。使いやすくかつ、プロダクションでも活躍するVue.jsをVue.jsコントリビューターの著者らが解説する一番わかりやすい入門書です。

小規模な適用例やjQueryからの移行サンプルに加え、大規模開発を想定したアプリケーション開発も体験できます。
Vue.jsはGitHubで2017年最も人気のあったJavaScriptフレームワークに選ばれるなど大注目の技術です。

1. プログレッシブフレームワークVue.js
   1. 現代のWebフロントエンド開発の複雑化
      1. Webの誕生とWebベースシステムへの発展
      2. Ajaxの登場
      3. HTML5，Node.js，ES2015，React以降の世界
      4. AltJSの登場
      5. 現在の課題とVue.js
   2. Vue.jsの特徴
      1. 学習コストが低い
      2. コンポーネント指向によるUIの構造化
      3. リアクティブなデータバインディング
   3. Vue.jsの設計思想
      1. フレームワークの複雑性
      2. 要求の変化に追随できるフレームワーク
   4. プログレッシブフレームワークの解決する段階的な領域
      1. 宣言的レンダリング（Declarative Rendering）
      2. コンポーネントシステム（Component System）
      3. クライアントサイドルーティング（Client-side Routing）
      4. 大規模向け状態管理（Large-scale State Management）
      5. ビルドシステム（Build System）
      6. クライアントサーバーデータ永続化（Client-server Data Persistence）
   5. Vue.jsを支える技術
      1. コンポーネントシステム
      2. リアクティブシステム
      3. リアクティブシステムの内側
      4. レンダリングシステム
      5. Vue.jsの仮想DOMの処理の流れ
   6. Vue.jsのエコシステム
   7. Vue.jsのはじめの一歩
      1. JSFiddleで実践
      2. Vue.jsのドキュメンテーション
      3. Vue.jsコミュニティ
      4. Vue.jsの対応ブラウザ
2. Vue.jsの基本
   1. Vue.jsでUIを構築する際の考え方
      1. 旧来のUI構築の問題点
      2. Vue.jsのUI構築
   2. Vue.jsの導入
      1. Vue.jsの高度な環境構築
   3. Vueオブジェクト
      1. コンストラクタ
      2. MVVMパターン
      3. コンポーネント
   4. Vueインスタンスのマウント
      1. Vueインスタンスの適用（el）
      2. メソッドによるマウント（$mountメソッド）
      3. Vue.jsを既存アプリケーションに導入する
   5. UIのデータ定義 (data)
      1. Vueインスタンスの確認
      2. データの変更を検知する
   6. テンプレート構文
      1. テキストへの展開
      2. 属性値の展開
      3. JavaScript式の展開
   7. フィルタ（filters）
      1. フィルタの連結
   8. 算出プロパティ（computed）
      1. thisによる参照
      2. サンプルアプリケーションでの実装
   9. ディレクティブ
      1. 条件付きレンダリング（v-if/v-show）
      2. クラスとスタイルのバインディング
      3. リストレンダリング（v-for）
      4. リストレンダリングパフォーマンス
      5. イベントハンドリング（v-on）
      6. フォーム入力バインディング（v-model）
      7. 修飾子による動作の変更
   10. ライフサイクルフック
       1. ライフサイクルフック一覧とフロー
       2. createdフック
       3. mountedフック
       4. beforeDestroyフック
   11. メソッド（methods）
       1. イベントオブジェクト
       2. 算出プロパティのキャッシュ機構
       3. サンプルでのメソッドの呼び出し
3. コンポーネントの基礎
   1. コンポーネントとは何か
      1. 全てはUIコンポーネントから構成される
      2. コンポーネント化のメリットと注意点
      3. Vue.jsのコンポーネントシステム
      4. Vue.jsのコンポーネントとWeb Components
   2. Vueコンポーネントの定義
      1. グローバルコンポーネントの定義
      2. コンストラクタベースの定義
      3. ReactのRender Props
      4. ローカルコンポーネントの定義
      5. テンプレートを構築するその他の手段
      6. コンポーネントの命名規則について
      7. コンポーネントのライフサイクル
      8. コンポーネントのデータ
      9. オブジェクトを指定した場合の警告
   3. コンポーネント間の通信
      1. 親コンポーネントから子コンポーネントへデータの伝播
      2. 子コンポーネントから親コンポーネントへの通信
      3. propsとイベントを用いない親子間のやりとり
      4. 親子以外のコンポーネントでデータをやりとりする
      5. 子から親のネイティブDOMイベントを取得したい場合 ― .native修飾子
      6. propsの値に関して双方向バインディングを実現したい場合 ― .sync修飾子
   4. コンポーネントの設計
      1. コンポーネントの分割方針
      2. コンポーネント自体の設計
      3. Atomic Design
      4. スロットコンテンツを活かしたヘッダーコンポーネントの作成
      5. ログインフォームコンポーネントの作成
      6. コンポーネント単位のテスト
4. Vue Routerを活用したアプリケーション開発
   1. Vue Routerによるシングルページアプリケーション
      1. シングルページアプリケーションとルーティング
      2. Vue Routerとは
   2. ルーティングの基礎
      1. ルーターのインストール
      2. ルーティング設計
   3. 実践的なルーティングのための機能
      1. URLパラメーターの扱いとパターンマッチング
      2. 名前付きルート
      3. router.pushを使った遷移
      4. フック関数
   4. サンプルアプリケーションの実装
      1. リストページの実装
      2. APIによるデータ通信
      3. 詳細ページの実装
      4. ユーザー登録ページの実装
      5. ログイン・ログアウトの実装
      6. サンプルアプリケーションの全体像
   5. Vue Routerの高度な機能
      1. RouterインスタンスとRouteオブジェクト
      2. ネストしたルーティング
      3. リダイレクト・エイリアス
      4. 履歴の管理
      5. Vue Routerを使った大規模なアプリケーションの実装
      6. Vue RouterとReact Router
5. Vue.jsの高度な機能
   1. トランジションアニメーション
      1. transitionラッパーコンポーネント
      2. トランジションクラス
      3. fadeトランジションの実装
      4. Vue Routerのトランジション
      5. カスタムトランジションクラス
      6. JavaScriptフック
   2. スロット
      1. 単一スロット
      2. 名前付きスロット
      3. スロットのスコープ
   3. カスタムディレクティブ
      1. コンポーネントやミックスインとの違い
      2. 作成するカスタムディレクティブの定義
      3. ディレクティブ定義オブジェクト
      4. フック関数の引数
      5. image-fallbackディレクティブの機能追加
      6. DOM操作を行うライブラリをラップする
   4. 描画関数
      1. 描画関数を用いないと書きづらい例
      2. 描画関数による効率化
      3. createElement関数
      4. h関数
      5. JSX
   5. ミックスイン
      1. ミックスインで機能を再利用する
      2. グローバルミックスイン
      3. ミックスインの命名規則
6. 単一ファイルコンポーネントによる開発
   1. ツールのインストール
      1. Vue CLI
   2. 単一ファイルコンポーネントとは
   3. 単一ファイルコンポーネントの仕様
      1. <template>ブロック
      2. <script>ブロック
      3. <style>ブロック
   4. 単一ファイルコンポーネントのビルド
   5. 単一ファイルコンポーネントの動作を体験する
      1. 動作を押さえる
   6. 単一ファイルコンポーネントの機能
      1. 外部ファイルのインポート
      2. スコープ付きCSS
      3. スコープ付きCSSのメリット
      4. CSSモジュール
      5. 他言語実装のサポート
      6. カスタムブロック
      7. カスタムブロックの定義
7. Vuexによるデータフローの設計・状態管理
   1. 複雑な状態管理
   2. データフローの設計
      1. 信頼できる唯一の情報源（Single Source of Truth）
      2. 「状態の取得・更新」のカプセル化
      3. 単方向データフロー
   3. Vuexによる状態管理
      1. Vuexのインストール
   4. Vuexのコンセプト
      1. ストア
      2. ステート
      3. ゲッター
      4. ミューテーション
      5. アクション
   5. タスク管理アプリケーションの状態管理
      1. アプリケーションの仕様と準備
      2. タスクの一覧表示
      3. タスクの新規作成と完了
      4. ラベル機能の実装
      5. ラベルのフィルタリング
      6. ローカルストレージへの保存と復元
      7. Vuexによるアプリケーションの考察
   6. ストアのモジュール分割
      1. namespacedオプションによる名前空間
   7. VuexストアとVueコンポーネント間の通信
      1. コンポーネントからストアにアクセスする
      2. ストアにアクセスするコンポーネントを必要最小限にする
   8. VuexとVue Routerの連携
8. 中規模・大規模向けのアプリケーション開発① 開発環境のセットアップ
   1. Vue.jsのプロジェクト構築の特徴
      1. Vue.jsで本格的な開発をするための心構え
   2. 本章で作成するアプリケーション
      1. アプリケーション仕様概要
      2. アプリケーションアーキテクチャ
      3. バックエンドの設計
   3. アプリケーションの開発環境構築
      1. 開発環境構築をサポートするVue CLI
      2. JavaScriptの環境構築とVue CLI
      3. vue init について
   4. Vue CLIによる開発環境の構築
      1. アプリケーションプロジェクトの作成
      2. プロジェクト構造
      3. タスクコマンド
      4. アプリケーションの起動確認
      5. アプリケーションの環境変数
   5. アプリケーションのビルド
      1. アセット処理
      2. リントツール
   6. テスト環境
      1. 単体テスト
      2. E2Eテスト
   7. フロントエンド・バックエンド連携
      1. APIのプロキシ
      2. バックエンドとのインテグレーション
   8. さらなる開発環境の強化
      1. Vue.jsコーディング環境の構築
      2. Vue.js公式ESLintプラグインの導入
      3. デバッグとプロファイリングの環境構築
      4. バックエンドAPIサーバーの環境構築
      5. 状態管理ライブラリの導入
      6. HTTPクライアントライブラリの導入
      7. 単体テストユーティリティの導入
      8. E2Eテストのコマンド登録
9. 中規模・大規模向けのアプリケーション開発② 設計
   1. コンポーネント設計
      1. Atomic Designによるコンポーネントの抽出
      2. Atoms
      3. Molecules
      4. Organisms
      5. Templates
   2. 単一ファイルコンポーネント化
      1. ディレクトリの構造化と各ファイルの配置
      2. コンポーネントのAPI
      3. KbnButtonコンポーネントのAPI
   3. 状態モデリングとデータフローの設計
      1. 状態モデリング
      2. データフロー
      3. データフロー周りの雛形コードのセットアップ
      4. アクションの雛形
   4. ルーティング設計
      1. ルートフロー
      2. ルート定義
10. 中規模・大規模向けのアプリケーション開発③ 実装
    1. 開発方針の整理
       1. アプリケーションの実装に入る前に
    2. コンポーネントの実装
       1. KbnButtonコンポーネント
       2. KbnLoginFormコンポーネント
       3. KbnLoginViewコンポーネント
    3. データフローの実装
       1. loginアクションハンドラ
       2. AUTH_LOGINミューテーションハンドラ
       3. Auth APIモジュール
    4. ルーティングの実装
       1. beforeEachガードフックを活用したナビゲーションガード
    5. 開発サーバーとデバッグ
       1. 開発サーバーによる開発
       2. Vue DevToolsによるデバッグ
    6. E2Eテスト
       1. E2Eテストの実装
       2. テストの実行
    7. アプリケーションのエラーハンドリング
       1. 子コンポーネントのエラーハンドリング
       2. グローバルなエラーハンドリング
    8. ビルドとデプロイ
       1. アプリケーションのビルド
       2. アプリケーションのデプロイ
       3. Vue.jsのバックエンド
    9. パフォーマンス測定・改善
       1. パフォーマンス測定の設定方法
       2. 測定できる処理
       3. レンダリングパフォーマンスの向上
       4. Vue CLIの対話的な選択時の注意点
       5. テンプレートコンパイラのオプションを利用する
11. jQueryからの移行
    1. 移行の判断
    2. jQueryで実装していた機能のVue.jsによる実装
       1. イベントリスナー
       2. 表示の切り替え
       3. 要素の挿入・削除
       4. 属性値の変更
       5. クラスの変更
       6. スタイルの変更
       7. フォーム（ユーザー入力）
12. 開発ツール
    1. Storybook
       1. 開発プロジェクトに導入する
       2. Storybookを動作させる
       3. ストーリーを実装する
       4. Storybookを公開する
    2. 静的型付き言語
       1. TypeScript
       2. TypeScriptの記述例
       3. セットアップ
       4. TypeScriptコンパイラ
       5. コンポーネントの実装
       6. 単一ファイルコンポーネント用の設定
       7. エディタ
       8. ライブラリの型定義
       9. TypeScriptの型定義がないとき
       10. Vue.jsとFlow
13. Nuxt.js
    1. Nuxt.jsとは
    2. Nuxt.jsの特徴
       1. サーバーサイドレンダリングのサポート
       2. サーバーサイドレンダリング環境の構築
       3. サーバーサイドレンダリングの必要性
       4. すぐに開発着手できる開発環境と拡張性の提供
       5. 静的なHTMLファイル生成のサポート
    3. Nuxt.jsをはじめる
    4. Nuxt.jsで静的サイトを作成する
       1. 画面仕様
       2. ルーティングを追加する
       3. グローバルナビゲーションのコンポーネントを追加する
       4. レイアウトにグローバルナビゲーションを追加する
       5. 開発サーバーで動作確認する
       6. 静的なHTMLファイルにビルドする
       7. Nuxt.jsにおけるサーバーサイドレンダリング

いま学んでおきたいJavaScriptフレームワーク「Vue.js」のエッセンスを一冊に詰め込みました！
豊富なサンプルコードで試しながら理解できます！

Vue.js（ビュージェイエス）は、Webアプリのビュー（見た目）の部分に特化したシンプルなフレームワークです。既存のアプリに後乗せで導入したり、徐々に適用範囲を拡大したりすることが手軽に行えます。シンプルな分、他のフレームワークと比べて学習コストが低く、HTMLとJavaScriptが一通りわかる人ならコードを理解するのも簡単です。

本書では、Vue.jsの中核である、ページを構成するUI部品「コンポーネント」をしっかりと解説し、さらには本格的なアプリ開発で必要となる要素までを網羅的に取り扱います。丁寧な解説でよくわかる、入門書の決定版です！

1. イントロダクション
   1. JavaScriptの歴史
      1. 初期の盛り上がりから「不遇の時代」へ
      2. AjaxによるJavaScript の復権
      3. HTML5の時代へ
   2. jQueryからJavaScriptフレームワークへ
      1. jQueryの時代
      2. jQueryの限界とJavaScriptフレームワーク
   3. 主なJavaScriptフレームワークとVue.js
      1. フレームワークとは？
      2. 主なJavaScriptフレームワーク
   4. Vue.jsの特徴
      1. 導入ハードル、学習コストが低い
      2. アプリの段階的（Progressive）な成長に対応できる
      3. コンポーネント指向である
      4. ドキュメントやライブラリが充実している
      5. ECMAScriptとは？
2. Vue.jsの基本
   1. Vue.jsを利用するための準備
      1. Vue.jsアプリの実行
   2. Vue.js理解のための3つの柱
      1. ディレクティブ
      2. 算出プロパティ
      3. ライフサイクルフック
   3. リアクティブデータ
      1. リアクティブシステムの例
      2. リアクティブシステムの制約
      3. ビューの非同期更新を理解する
      4. ウォッチャーによる明示的な監視
3. ディレクティブ
   1. イベント関連のディレクティブ
      1. イベントの基本
      2. Vue.jsで利用できる主なイベント
      3. イベントオブジェクト
   2. フォーム関連のディレクティブ
      1. 双方向データバインディング
      2. ラジオボタン
      3. チェックボックス（単一）
      4. チェックボックス（複数）
      5. 選択ボックス
      6. ファイル入力ボックス
      7. バインドの動作オプションを設定する
      8. バインドのタイミングを遅延させる～ .lazy修飾子
      9. 双方向データバインドのカスタマイズ
   3. 制御関連のディレクティブ
      1. 式の真偽に応じて表示と非表示を切り替える～ v-if
      2. 式の真偽に応じて表示／非表示を切り替える～ v-show
      3. 配列やオブジェクトを繰り返し処理する～ v-for
      4. v-forによるループ処理の注意点
      5. 配列の変更を反映する～変更メソッド
      6. 配列要素の追加／削除を効率的に行う
   4. データバインディング関連のディレクティブ
      1. 属性に値をバインドする～ v-bind
      2. 文字列をHTMLとして埋め込む～ v-html
      3. 値を一度だけバインドする～ v-once
      4. 要素にスタイルプロパティを設定する～ v-bind:style
      5. 要素にスタイルクラスを設定する～ v-bind:class
      6. {{ }} 構文による画面のチラツキを防ぐ～ v-cloak
   5. より高度なイベント処理
      1. 定型的なイベント処理を宣言的に指定する～イベント修飾子
      2. イベントの既定の動作をキャンセルする
      3. 一度だけしか実行されないハンドラーを登録する
      4. イベントの伝播を抑制する
      5. キーイベントでのキーを識別する～キー修飾子
      6. システムキーとの組み合わせを検知する
      7. マウスの特定のボタンを検知する～マウス修飾子
4. コンポーネント（基本）
   1. コンポーネントの基本
      1. コンポーネントの定義
      2. コンポーネントの呼び出し
      3. グローバル登録とローカル登録
   2. コンポーネント間の通信
      1. コンポーネントのスコープ
      2. 親コンポーネント 子コンポーネントの伝達～ props オプション
      3. プロパティ値の型を制限する
      4. 子コンポーネント 親コンポーネントの伝達～ $emit メソッド
      5. propsや$emitを利用しない親子間通信
   3. コンポーネント配下のコンテンツをテンプレートに反映させる～スロット
      1. スロットのスコープ
      2. 複数のスロットを利用する
      3. スロットから子コンポーネントの情報を引用する～スコープ付きスロット
5. コンポーネント（応用）
   1. 動的コンポーネント
      1. 動的コンポーネントの基本
      2. タブパネルを生成する
   2. v-modelによる双方向データバインディング
      1. コンポーネントでのv-modelの利用例
      2. v-modelの紐付け先を変更する～ modelオプション
      3. 複数のプロパティを双方向バインディングする～ .sync修飾子
   3. アニメーション機能
      1. アニメーションの基本
      2. キーフレームによるアニメーション制御
      3. アニメーションの制御
      4. リストトランジション
   4. コンポーネントのその他の話題
      1. テンプレートの記法
      2. 関数型コンポーネント～ functionalオプション
6. 部品化技術
   1. ディレクティブの自作
      1. ディレクティブの基本
      2. 属性値の変化を検出する
      3. 修飾子付きのディレクティブを定義する
      4. 引数付きのディレクティブを定義する
      5. イベント処理を伴うディレクティブ
      6. markedライブラリをラップする
   2. フィルターの自作
      1. フィルターの基本
      2. パラメーター付きのフィルターを定義する
      3. 複数のフィルターを連結する
   3. プラグインの利用と自作
      1. 検証プラグインの利用～ VeeValidate
      2. 典型的なUIを実装する～ Element
      3. プラグインの自作
   4. ミックスイン
      1. ミックスインの基本
      2. マージのルール
      3. グローバルミックスイン
7. Vue CLI
   1. Vue CLIの基本
      1. Vue CLIのインストール
      2. プロジェクトの自動生成
      3. Vue CLIの主なサブコマンド
   2. 単一ファイルコンポーネント
      1. 単一ファイルコンポーネントの基本
      2. ES20XXのモジュール
      3. コンポーネントのローカルスタイル～ Scoped CSS
      4. main.jsを読み解く
   3. TypeScript
      1. TypeScript の導入
      2. TypeScriptプロジェクトのフォルダー構造
      3. TypeScript形式のコンポーネント
      4. コンポーネントの主な構成要素
8. ルーティング
   1. ルーティングとは？
      1. Vue Routerの準備
   2. ルーティングの基本
      1. ルーティング情報の定義
      2. メインコンポーネント（App.vue）
   3. ルーター経由で情報を渡す手法
      1. パスの一部をパラメーターとして引き渡す～ルートパラメーター
      2. ルートパラメーターのさまざまな表現
      3. ルートパラメーターをプロパティとして受け渡す
   4. マルチビュー、入れ子のビュー、ガードなど
      1. 複数のビュー領域を設置する
      2. 入れ子のビューを設置する
      3. ルート遷移時に処理を差し挟む ～ ナビゲーションガード
      4. ルーターによるリンクの制御
      5. ルーティングにかかわるその他のテクニック
9. Vuex
   1. Vuexとは？
      1. Vuexの準備
   2. Vuexの基本
      1. Vuexを利用したカウンターアプリ
   3. Vuexストアを構成する要素
      1. ステートの内容を加工＆取得する～ゲッター
      2. ストアの状態を操作する～ミューテーション
      3. 非同期処理を実装する～アクション
   4. 巨大なストアを分割管理する～モジュール
      1. モジュールの定義
      2. モジュールへのアクセス
      3. 名前空間を分離する
      4. 名前空間付きモジュールから他のモジュールへアクセスする
      5. mapXxxxx関数によるストアのマッピング
10. テスト
    1. 単体テスト
       1. 単体テストの準備
       2. テストスクリプトの基本
       3. コンポーネントのテスト
       4. shallowMountメソッドとmountメソッド
       5. 算出プロパティのテスト
       6. イベントを伴うテスト
       7. カスタムイベントを伴うテスト
    2. E2Eテスト
       1. E2E テストの準備
       2. テストコードの基本
       3. E2Eテストの実行
       4. expectアサーション
11. 応用アプリ
    1. アプリの構造を概観する
       1. ファイル関係図
       2. 利用しているサービス、ライブラリ
    2. アプリの共通機能を読み解く
       1. 起動スクリプト
       2. ルーティングの定義
       3. Vuex ストアの定義
    3. アプリの実装を理解する
       1. メインメニュー（メインコンポーネント）
       2. 書籍情報の表示
       3. レビュー情報の一覧表示
       4. Googleブックス経由での書籍検索
       5. レビュー登録フォーム

いま、Web開発の現場では「サーバ側の処理をするバックエンドよりも、実際にユーザーとやり取りするフロントエンドこそが重要」と意識が変わりつつあります。

本書は、フロントエンドの開発において最も注目されているVue.jsと、それを更に拡張するフレームワークNuxt.jsの基本的な使い方を解説する入門書です。

Vue.jsでのアプリ作成手順から、Nuxt.js利用によるデータ管理、axiosによる外部サイトへのアクセスまでを順番に解説します。

1. Vue.jsを使ってみよう
   1. Vue.jsのセットアップ
      1. フロントエンドの開発って？
      2. フレームワークってなに？
      3. Vue.jsってどんなもの？
      4. Vue.jsを利用するために必要なもの
      5. <script>タグ1つで使えるように！
      6. Vue.jsでメッセージを表示しよう
      7. Vue.js devtoolsを用意しよう
      8. 機能拡張の設定をする
      9. デベロッパーツールを開こう
      10. スタンドアロン版を使うには？
      11. スタンドアロン版を起動する
   2. より本格的なプロジェクト
      1. プロジェクトとしての開発
      2. Node.jsのインストール
      3. Vue CLIをインストールする
      4. プロトタイプを動かす
   3. プロジェクトを作ろう
      1. プロジェクトってなに？
      2. hello_appプロジェクトを作る
      3. プロジェクトを実行しよう
      4. プロジェクトの中身をチェック！
      5. プロジェクトをビルドする
      6. GUIツールを使おう！
      7. プロジェクトを作成してみる
      8. プロジェクトの内容
      9. プロジェクトを操作しよう
      10. この章のまとめ
2. Vue.jsの基本をマスターしよう
   1. Vue.jsの基本的な仕組み
      1. 基本コードをチェックしよう
      2. Vueオブジェクトについて
      3. データの橋渡し
      4. Vueのデータは活きている！
      5. 入力テキストをリアルタイムに表示！
      6. {{}}は値だけじゃない！
   2. レンダリングをマスターする
      1. renderの使い方
      2. renderを使ってみる
      3. ソースコードをチェックしよう
      4. アロー関数は難しい！
      5. 引数の関数について
      6. 仮想DOMについて
      7. 属性を設定しよう
      8. 子ノードの組み込み
      9. 複雑なVNodeを作るには？
   3. テンプレート構文を覚えよう
      1. テンプレート構文とは
      2. v-htmlでHTMLを出力する
      3. v-htmlを使ってリストを増やそう
      4. 属性に値をバインドする
      5. オブジェクト構文について
      6. v-bind:classにオブジェクトを設定する
      7. スタイルとオブジェクト構文
      8. v-bind:styleにオブジェクトを指定する
      9. v-ifによる条件付きレンダリング
      10. 複雑な表示は<template>タグ！
      11. v-forによるリストレンダリング
      12. インデックス番号の取得
      13. オブジェクトをv-forする場合は？
      14. v-forとv-ifの併用
      15. この章のまとめ
3. コンポーネントを使おう
   1. コンポーネントの基本をマスター！
      1. コンポーネントってなに？
      2. コンポーネントの定義と利用
      3. helloコンポーネントを作ってみる！
      4. 変数をコンポーネントに渡す
      5. 属性の利用
   2. v属性を使いこなす
      1. v-bindで属性を設定する
      2. v-modelで値をバインド！
      3. v-onでイベントをバインドする
      4. イベント処理を別途用意する
      5. イベント処理とmethods
      6. 算術プロパティについて
      7. ローカルコンポーネント
   3. プロジェクトによる開発
      1. プロジェクトで開発しよう！
      2. main.jsの役割
      3. App.vueをチェックする
      4. index.htmlについて
      5. 結局、何がどうなってるの？
      6. HelloWorldコンポーネントを修正する
      7. App.vueを修正する
      8. v-onによるイベントの利用
      9. AppからHelloWorldに値を渡す
      10. 子コンポーネントから親コンポーネントへ！
   4. 計算アプリを作ろう
      1. Calcコンポーネントで計算！
      2. 作成するプログラムの内容
      3. Calc.vueを作成する
      4. Calcの構成
      5. Appコンポーネントの構成
      6. この章のまとめ
4. コンポーネントを更に掘り下げる！
   1. プロパティを強化する
      1. Vue.jsを使いこなすには？
      2. プロパティのバリデーション
      3. より詳しいバリデーションを！
      4. 算出プロパティのGetter/Setter
      5. 監視プロパティについて
   2. イベントを掘り下げる
      1. イベントの修飾子について
      2. イベントの伝搬を考えよう
      3. イベントの流れを調べよう
      4. キーイベントについて
      5. キーイベントの修飾子について
      6. 機能キーの組み合わせ
      7. ボタンの修飾子
   3. テンプレートを考える
      1. 組み込まれる側の表示
      2. スロットを使おう
      3. 名前付きスロットを使う
      4. スロットに値を設定する
      5. renderメソッドを利用する
      6. JSXで書く！
      7. Vueオブジェクトで使う場合は？
      8. JSXに値を埋め込む
   4. トランジションとアニメーション
      1. トランジションで状態操作
      2. フェードイン/フェードアウト
      3. イベントを追加
      4. transformで動かす
      5. transformを試してみよう
      6. キーフレームによる複雑なアニメーション
      7. この章のまとめ
5. Nuxt.jsにアップグレード！
   1. Nuxt.jsってなに？
      1. Vue.jsの弱点は？
      2. そこで、Nuxt.jsだ！
      3. 手作業でアプリを作ろう！
      4. ページを作る
      5. 本式にプロジェクトを作ろう
      6. プロジェクトのフォルダ構成をチェック！
   2. Nuxt.jsプロジェクトの基本
      1. デフォルトページはどうなってる？
      2. layouts/default.vueをチェック
      3. pages/index.vueをチェック
      4. コンテンツを書こう！
      5. 他のページも用意しよう
      6. パラメーターを利用する
      7. idとpassをパラメーターで渡す
      8. パラメーターのチェック
   3. Vuexによる状態管理
      1. コンポーネント間の値の管理
      2. 「store」フォルダにスクリプトを配置する
      3. ステートに値を保管する
      4. ストアの値を利用する
      5. ストアの値は変更できない？
      6. ミューテーションを使う
      7. counterを操作するミューテーション
      8. ミューテーションの引数指定
      9. typeを利用したオブジェクト引数
      10. アクションを利用する
      11. 値をずっと保持するには？
      12. vuex-persistedstateとモードについて
      13. Vuexでvuex-persistedstateを利用する
   4. メモアプリを作ろう！
      1. アプリ作成に挑戦！
      2. プロジェクトを作る
      3. store/memo.jsを作成する
      4. クラシックモードからモジュールモードへ！
      5. memoストアに用意するもの
      6. memo.vueを作成する
      7. memo.vueのテンプレートをチェック！
      8. memo.vueのスクリプトをチェック！
      9. この章のまとめ
6. 外部サービスを利用しよう！
   1. axiosで外部サイトにアクセス！
      1. 「データ」の扱いはどうする？
      2. axiosでサイトにアクセスするには？
      3. 非同期処理ってなんだ？
      4. README.mdを表示する
      5. asyncDataについて
      6. JSONデータのサイトを活用しよう
      7. 自分で非同期通信するときは？
      8. 入力したIDのデータを表示する
      9. エラー対策はどうする？
   2. FirebaseとREST API
      1. データベースサービスを使おう！
      2. Firebaseってなに？
      3. プロジェクトを作ろう
      4. データベースを作ろう
      5. データベースにアクセスしよう
      6. Nuxt.jsからデータベースにアクセスする
      7. 特定のデータを表示しよう！
   3. Firebaseアクセスをマスターしよう
      1. インデックスを追記する
      2. キーによる検索を書き直す
      3. 年齢の範囲を指定して検索する
      4. データを追加しよう
      5. データの削除
      6. Firebaseのポイントは、アドレス！
   4. Firebase APIを活用しよう！
      1. ソーシャルログインが使える！
      2. Authenticationにアクセス！
      3. Firebase APIをインストールする
      4. Google認証の使い方
      5. Google認証を使ってみる
      6. ログイン状態でデータベースアクセスするには？
      7. ミニ伝言板を作ってFirebase APIをマスター！
      8. データベースのアクセス権を設定する
      9. board.vueを作成する
      10. Firebase APIを使う
      11. データを取得する
      12. この章のまとめ
      13. これから先はどうするの？
7. JavaScriptオブジェクト超入門
   1. JavaScriptの基本を超簡単おさらい！
      1. この章の目的は？
      2. 値と変数について
      3. 制御構文について
      4. 配列について
      5. 関数について
      6. アロー関数について
   2. オブジェクトをマスターしよう
      1. オブジェクトについて
      2. オブジェクトを使う
      3. メソッドについて
      4. コンストラクタ関数
      5. クラスを使おう
      6. スクリプトファイルの読み込み
      7. モジュールについて
      8. export defaultについて
      9. モジュールはVue.jsでは必須！
      10. Vue.jsのために必要な知識とは？

いま学んでおきたいJavaScriptフレームワーク「Vue.js」のエッセンスを一冊に詰め込みました!
豊富なサンプルコードで試しながら理解できます!

Vue.js(ビュージェイエス)は、Webアプリのビュー(見た目)の部分に特化したシンプルなフレームワークです。既存のアプリに後乗せで導入したり、徐々に適用範囲を拡大したりすることが手軽に行えます。
シンプルな分、他のフレームワークと比べて学習コストが低く、HTMLとJavaScriptが一通りわかる人ならコードを理解するのも簡単です。

本書では、Vue.jsの中核である、ページを構成するUI部品「コンポーネント」をしっかりと解説し、さらには本格的なアプリ開発で必要となる要素までを網羅的に取り扱います。丁寧な解説でよくわかる、入門書の決定版です!

1. Vue.jsとフレームワークの基礎
   1. Vue.jsとは？
      1. Vue.jsとは？
      2. フレームワークとは？
      3. なぜフレームワークを使うのか？
      4. Vue.jsの特徴
   2. Vue.jsを学ぶメリット
      1. UI構築はフロントエンドの役目になった
      2. DOMがウェブページとJavaScriptをつなぐ
      3. jQueryでは間に合わない
      4. データ駆動のVue.jsがDOM操作の問題を解決
      5. Vue.jsから利用できるUIコンポーネント
   3. Vue.jsの概要
      1. Vue.jsの機能
      2. リアクティブシステムとデータバインディング
      3. 条件付きレンダリング
      4. リストバインディング
2. Vue.jsをはじめよう！
   1. Vue.jsのインストール
      1. Vue.js本体を入手しよう
      2. Vue.jsをアプリケーションに読み込もう
   2. 基本のファイル構成
      1. 一般的なアプリケーションの設計モデル
      2. Vue.jsアプリケーションの設計モデル
      3. Vue.jsアプリケーションのファイル構成
      4. Vue.jsアプリケーションの雛形
   3. Vue.jsのオプション構成と役割
      1. オブジェクトとは？
      2. JavaScriptのオブジェクト表記
      3. Vueのオプション構成
   4. レンダリング（ページを描画する）
      1. テキストにバインドする
      2. 属性にバインドする
      3. スタイル（style）属性にバインドする
      4. クラス（class）属性にバインドする
      5. リストデータをバインドする
      6. 条件付きで描画する
   5. フィルター（描画用にデータを加工する）
      1. フィルターとは？
      2. グローバルスコープにフィルターを登録する
      3. ローカルスコープにフィルターを登録する
      4. 複数のフィルターをつなげる
   6. 算出プロパティ（再利用可能な加工済みデータ）
      1. 算出プロパティとは？
      2. 算出プロパティはキャッシュされる
   7. イベントハンドリング（ユーザーの操作を検知する）
      1. イベントとは？
      2. よく使われるイベント
      3. イベントハンドラの登録（v-onディレクティブ）
      4. コンポーネントの外側のイベントハンドリング
      5. イベントハンドラが受け取る引数
   8. ウォッチャ（データの変更を監視する）
      1. ウォッチャとは？
      2. ウォッチャの登録（watchオプション）
      3. 算出プロパティとウォッチャの使い分け
      4. ウォッチャで算出プロパティを監視する
   9. フォーム入力バインディング（データと入力を同期する）
      1. 双方向のデータバインド
      2. テキストボックス（改行できない入力欄）
      3. テキストエリア（改行できる入力欄）
      4. チェックボックス
      5. ラジオボタン（2つ以上の選択肢から1つを選ぶ）
      6. セレクトボックス（プルダウン方式の選択肢）
      7. カレンダー（日付の選択）
      8. 応用例１（日付の選択範囲を制限する）
      9. 応用例２（レンジ入力とカラー選択を同期する）
      10. 制御をサポートする3つの修飾子
   10. トランジション（表示の切り替えを滑らかにする）
       1. トランジションとは？
       2. CSSトランジション
3. Vue.jsで商品一覧を描画してみよう！
   1. 商品一覧ページの仕様
      1. 初期表示
      2. 機能詳細
   2. モックアップの作成
      1. HTMLとCSSで静的なページを作成する
      2. JavaScriptで絞り込み機能を作成する
      3. JavaScriptで並び替え機能を作成する
   3. 商品データをアプリケーションに結び付ける
      1. Vue.jsを組み込む準備
      2. dataオプションにデータを定義する
      3. 構文エラーがないか確認する
   4. 商品データを描画する
      1. 出力するHTMLのパターン
      2. テンプレート構文で置き換える
      3. うまくいかない例
      4. 金額の書式と商品名の改行
   5. ユーザーの入力に応じて表示を切り替える
      1. フォームコントロールにデータバインドする
      2. 絞り込み機能を実装する
      3. 並び替え機能を実装する
      4. 商品にキー（key）を指定する
4. Ajaxで商品データを外部ファイルから読み込もう！
   1. AjaxとJSON形式
      1. Ajaxとは？
      2. JSONとは？
   2. JavaScriptでAjaxを利用する
      1. JSONデータを準備する
      2. イベントハンドラを作成する
      3. XMLHttpRequestオブジェクトの使い方
      4. クロスドメイン制約への対応
      5. レスポンスを処理する
   3. jQueryでAjaxを利用する
      1. jQueryとは？
      2. イベントハンドラを作成する
      3. JSONを取得する
      4. レスポンスを処理する
   4. JSONPでクロスドメイン制約を回避する
      1. JSONPとは？
      2. JSONPをAjaxで非同期に読み込む
   5. Vue.jsアプリケーションでAjaxを利用する
      1. 商品リストをAjaxで読み込む
      2. 通信エラー発生時の処理を追加する
5. Vue.jsで自動見積フォームを作ってみよう！
   1. 自動見積フォームの仕様
      1. フォームの仕様
   2. モックアップの作成
      1. HTMLとCSSで静的なページを作成する
      2. JavaScriptで自動計算処理を実装する
   3. フォームのプログラムにVue.jsを適用する（JavaScript）
      1. Vue.jsを組み込む準備
      2. dataオプションにプロパティを追加する
      3. 算出プロパティを追加する
      4. プロパティの初期値を設定する
      5. フィルターを追加する
   4. フォームのテンプレートにVue.jsを適用する（HTML）
      1. 基本料金のデータバインド
      2. オプション料金のデータバインド
      3. 合計金額のデータバインド
      4. コンポーネントの動作確認
      5. テンプレートが一瞬見えてしまうのはなぜ？
6. Vue.jsのコンポーネントをモジュール化してみよう！
   1. コンポーネントの基本
      1. コンポーネントの定義方法
      2. データの受け渡し（親コンポーネントから子コンポーネント）
      3. データの受け渡し（子コンポーネントから親コンポーネント）
      4. コンポーネントのイベントハンドリング
      5. コンポーネントを繰り返し描画する（v-for）
      6. コンポーネントの配置場所に関する制限
   2. 商品一覧をコンポーネント化する
      1. コンポーネントの親子関係を決める
      2. モジュールを分割する
      3. データの持たせ方を決める
      4. コンポーネントの動作仕様を決める
      5. ルートコンポーネントの作成
      6. フィルターの作成
      7. 商品コンポーネントの作成
      8. ヘッダーコンポーネントの作成
      9. 商品一覧コンポーネントの作成
      10. コンポーネントの完成
   3. 単一ファイルコンポーネントとは？
      1. 単一ファイルコンポーネントの例
      2. export defaultとは？
      3. scopedとは？
   4. 開発環境「Vue CLI」を導入する
      1. Vue CLIとは？
      2. 開発環境（Vue CLI）の導入
      3. Vue CLIの基本的な使い方
      4. デフォルトプリセットで作成したプロジェクトのモジュール構成
   5. 商品一覧を単一ファイルコンポーネントで再構築する
      1. 新規プロジェクトの作成
      2. モジュール構成の決定
      3. モジュールの作成
      4. アプリケーションを運用環境で公開する
7. Column
   1. ブラウザのコンソールをデバッグに活用しよう！
   2. 仮想DOM とは？
   3. 「this」が何を指すかはスコープによって変わる
   4. PHPでデータベースからJSONを動的に生成する
   5. Bootstrap Vueを利用してUIの作成を効率化しよう
   6. コンポーネント間でデータを共有する

本書はVue.jsの入門者向け書籍で「Vue.js&Nuxt.js超入門」の改訂版となります。新たにVue3に対応し、内容は前の版から大幅に書き直しています。

また初心者向けであることを踏まえ、引き続きJavaScriptベースで説明を行います。対象読者はJavaScriptの入門書を読み終えた層で、Vue.jsの経験がない層です。既存の入門書などで挫折した人でもついていけるように、手取り足取り教える内容です。

1. Vueを使ってみよう！
   1. Vue3のセットアップ
      1. フロントエンドの開発って？
      2. フレームワークってなに？
      3. Vue3ってどんなもの？
      4. Vue ver.2とVue3は別のもの！
      5. Vue3を利用するために必要なもの
      6. <script>タグ1つで使えるように！
      7. Vue3でメッセージを表示しよう
      8. Vue.js devtoolsを用意しよう
      9. 機能拡張の設定をする
      10. デベロッパーツールを開こう
      11. スタンドアロン版について
   2. より本格的なプロジェクト
      1. プロジェクトとしての開発
      2. Node.jsのインストール
      3. Vue CLIをインストールする
      4. プロトタイプを動かす
   3. プロジェクトを作ろう
      1. プロジェクトってなに？
      2. hello_appプロジェクトを作る
      3. プロジェクトを実行しよう
      4. プロジェクトの中身をチェック！
      5. プロジェクトをビルドする
      6. もう1つのプロジェクト生成ツール「Vite」
      7. GUIツールを使おう！
      8. プロジェクトを作成してみる
      9. プロジェクトの内容
      10. プロジェクトを操作しよう
      11. 開発ツールについて
      12. Visual Studio Codeのインストール
      13. Visual Studio Codeでプロジェクトを開く
      14. この章のまとめ
2. Vue3の基本をマスターしよう！
   1. Vue3の基本的な仕組み
      1. 基本コードをチェックしよう
      2. Vue3の基本コードについて
      3. データの橋渡し
      4. Vue3のデータは活きている！
      5. mountedについて
      6. アロー関数について
      7. タイマーを停止する
      8. createdで初期化する
      9. 必要なものはすべて内部に用意する！
      10. {{}}は値だけじゃない！
   2. 要素と表示を考える
      1. HTML要素を出力する
      2. JavaScriptエクスプレッション
      3. mapによる繰り返し処理
      4. スタイルとBootstrap
      5. Bootstrapの基本的なクラス
      6. コンテンツの表示デザインに関するクラス
   3. v属性を活用しよう
      1. v属性について
      2. 属性に値をバインドする
      3. オブジェクト構文について
      4. v-bind:classにオブジェクトを設定する
      5. スタイルとオブジェクト構文
      6. v-bind:styleにオブジェクトを指定する
      7. v-ifによる条件付きレンダリング
      8. 複雑な表示は<template>タグ！
      9. v-forによるリストレンダリング
      10. インデックス番号の取得
      11. オブジェクトをv-forする場合は？
      12. v-forとv-ifを組み合わせる
      13. この章のまとめ
3. コンポーネントを使おう！
   1. コンポーネントの基本をマスター！
      1. コンポーネントってなに？
      2. コンポーネントの定義と利用
      3. helloコンポーネントを作ってみる！
      4. 変数をコンポーネントに渡す
      5. 属性の利用
   2. v属性を使いこなす
      1. v-bindで属性を設定する
      2. v-modelで値をバインド！
      3. v-onでイベントをバインドする
      4. イベント処理を別途用意する
      5. イベント処理とmethods
      6. 算術プロパティについて
      7. ローカルコンポーネント
   3. プロジェクトによる開発
      1. プロジェクトで開発しよう！
      2. main.jsの役割
      3. App.vueをチェックする
      4. index.htmlについて
      5. 結局、何がどうなってるの？
      6. index.htmlを修正する
      7. HelloWorldコンポーネントを修正する
      8. App.vueを修正する
      9. v-onによるイベントの利用
      10. AppからHelloWorldに値を渡す
      11. 子コンポーネントから親コンポーネントへ！
      12. テンプレート参照について
      13. テンプレート参照を使う
   4. 計算アプリケーションを作ろう
      1. Calcコンポーネントで計算！
      2. 作成するプログラムの内容
      3. Calc.vueを作成する
      4. Calcの構成
      5. Appコンポーネントを作る
      6. Appコンポーネントの構成
      7. この章のまとめ
4. コンポーネントを更に掘り下げる！
   1. レンダリングとJSX
      1. Vue3を使いこなすには？
      2. renderによる描画
      3. renderでHTMLを出力できる？
      4. h関数を利用する
      5. JSXについて
      6. propsを使う
      7. 属性の指定
   2. プロパティを強化する
      1. プロパティのバリデーション
      2. より詳しいバリデーションを！
      3. 算出プロパティのGetter/Setter
      4. ウォッチャについて
   3. イベントを掘り下げる
      1. イベントの修飾子について
      2. イベントの伝搬を考えよう
      3. イベントの流れを調べよう
      4. キーイベントについて
      5. キーイベントの修飾子について
      6. 機能キーの組み合わせ
      7. ボタンの修飾子
   4. スロットを使いこなす
      1. 組み込まれる側の表示
      2. スロットを使おう
      3. 名前付きスロットを使う
      4. スロットに値を設定する
   5. トランジションとアニメーション
      1. トランジションで状態操作
      2. フェードイン／フェードアウト
      3. イベントを追加
      4. transformで動かす
      5. transformを試してみよう
      6. キーフレームによる複雑なアニメーション
      7. この章のまとめ
5. Vue3を更にパワーアップしよう！
   1. Composition APIを使おう
      1. コンポーネントは複雑すぎる！
      2. コンポーネントを作ってみよう
      3. JSXでも使えるの？
      4. dataはダメ！ refを使え！
      5. refで値を表示する
      6. refによる参照の利用
      7. refとreactive
      8. メソッドの利用
      9. setupのcontextについて
      10. 従来方式か、Composition APIか？
   2. Vue Routerによるルーティング管理
      1. 複数ページを管理するには？
      2. Vue Routerについて
      3. 2つのコンポーネントを用意する
      4. router.jsの作成
      5. routerを利用する
      6. Appを作成する
      7. ページはリロードされているか？
      8. 名前付きビューの利用
      9. パラメータの利用
      10. :toの指定について
   3. Vuexによる状態管理
      1. コンポーネント間の値の管理
      2. Vuexを用意する
      3. Vuexの基本を理解する
      4. store.jsにスクリプトを記述する
      5. ステートに値を保管する
      6. storeをアプリケーションに組み込む
      7. ストアの値を利用する
      8. ミューテーションを使う
      9. counterを操作するミューテーション
      10. ミューテーションの引数指定
      11. typeを利用したオブジェクト引数
      12. アクションを利用する
      13. vuex-persistedstateを利用する
      14. Vuexでvuex-persistedstateを利用する
   4. メモアプリを作ろう！
      1. アプリケーション作成に挑戦！
      2. プロジェクトを作る
      3. index.htmlの作成
      4. main.jsとApp.vueの作成
      5. store.jsの作成
      6. Memo.vueの作成
      7. Memo.vueのテンプレートをチェック！
      8. Memo.vueのスクリプトをチェック！
      9. 算術プロパティについて
      10. onMountedも忘れずに！
      11. Composition API利用の注意事項
      12. この章のまとめ
6. 外部サービスを利用しよう！
   1. axiosで外部サイトにアクセス！
      1. 「データ」の扱いを考えよう
      2. axiosでサイトにアクセスするには？
      3. 同期処理と非同期処理
      4. テキストファイルを表示する
      5. コンポーネントをチェックする
      6. onMountedについて
      7. axiosを非同期処理で実行するには？
      8. JSONデータのサイトを活用しよう
      9. 入力したIDのデータを表示する
      10. エラー対策はどうする？
      11. ネットワークアクセスの限界
   2. FirebaseとREST API
      1. データベースサービスを使おう！
      2. Firebaseってなに？
      3. Firebaseプロジェクトを作ろう
      4. プロジェクトのオーバービュー
      5. データベースを作ろう
      6. personデータを作成する
      7. データベースにアクセスしよう
      8. axiosでデータベースにアクセスする
      9. 特定のデータを表示しよう！
   3. Realtime Databaseをマスターしよう
      1. インデックスを追記する
      2. キーによる検索を書き直す
      3. 年齢の範囲を指定して検索する
      4. データを追加しよう
      5. データの削除
      6. Realtime Databaseのポイントは、アドレス！
   4. Firebase SDKを活用しよう！
      1. Firebase SDKとは？
      2. プロジェクトにWebアプリケーションを追加する
      3. CDNによるFirebase SDKの利用
      4. Firebaseの初期化とfirebaseConfig
      5. personデータを表示する
      6. npmでFirebase SDKを利用する
      7. ソーシャル認証を使おう！
      8. Authenticationにアクセス！
      9. Google認証の手順
      10. Google認証を使ってみる
      11. ログイン状態でデータベースアクセスするには？
      12. データベースのアクセス権を設定する
      13. ログインするとデータベースを表示する
   5. ミニ伝言板を作ろう
      1. ミニ伝言板を作ってFirebaseをマスター！
      2. Viteでアプリケーションを作る
      3. Board.vueを作成する
      4. Firebase SDK利用のポイント
      5. この章のまとめ
      6. これから先はどうするの？
7. JavaScript超入門！
   1. JavaScriptの基本を超簡単おさらい！
      1. この章の目的は？
      2. 値と変数について
      3. 文の書き方
      4. 制御構文について
      5. 配列について
      6. 関数について
      7. アロー関数について
   2. オブジェクトをマスターしよう
      1. オブジェクトについて
      2. オブジェクトを使う
      3. メソッドについて
      4. クラスを使おう
      5. Vue3のために必要な知識とは？

本書は、日本国内で爆発的な人気を誇るVue.jsの最新ノウハウ・アイデアを1つにまとめた新しい「Vue本」です。

アプリケーション開発のためのルーティング・レンダリングから、CSS設計、状態管理、コンポーネント開発、パフォーマンス改善まで、Vue.jsをプロジェクトで使用するうえのさまざまな開発上の観点をまとめつつ、現場のエンジニアによる解決方法をまとめています。

さらに、Vue.jsコアチームメンバーでもある川口和也（@kazu_pon）氏のインタビューを収録。川口氏が開発するVue18nや、企業に所属しながらのOSS活動についてもたっぷりと語っていただきました。Vue.jsエンジニア必携の1冊です。

1. 大規模なアプリケーションにも耐えられるルーティングとレンダリング
   1. パフォーマンスの指標を知る
   2. ルーティング
      1. Vue Routerでのコード分割と遅延ローディング
      2. ルーティングと権限管理
   3. SSRとCSR
      1. SSRの実装
      2. SSRと権限管理
      3. Nuxt.jsでSSRを実装する
   4. アプリケーションの構成を考える
      1. 静的なコンテンツ中心のサービスの場合
      2. 静的なコンテンツ中心だが権限管理を詳細におこないたいサービスの場合
      3. さまざまなデータを扱う動的なサービスの場合
      4. そこまで大量のデータを扱うことは考えていないが，何らかの理由でNuxt.jsの採用はできない場合
2. 状態管理パターン
   1. 状態管理とアプリケーションの構成要素
      1. 状態管理とは
      2. アプリケーションの構成要素
      3. 状態データと派生データ
   2. Vue.jsにおける状態管理
      1. コンポーネントとは
      2. コンポーネントの状態データ
      3. コンポーネントの派生データ
      4. コンポーネントと状態のスコープ
      5. コンポーネント間でのデータ通信
      6. 兄弟コンポーネント間でのデータ共有
   3. Vue.jsコンポーネントのみを使った状態管理
      1. 状態とコンポーネントの関係性がシンプルになる
      2. コンポーネントの依存関係の明確化
      3. SFC（Single File Component）による利点の最大化
   4. アプリケーションの成長とコンポーネントのみを使った状態管理の課題
      1. propsとeventによるデータの過剰なバケツリレー
      2. アプリケーション全体の状態管理状況を把握しづらくなる
   5. ストアを利用した状態管理
      1. ストアによる状態管理の考え方
   6. Vuexを利用した状態管理
      1. Vuexにおける状態管理パターン
      2. 単一ステートツリー
      3. すべてのコンポーネントのための集中型のストア
      4. Composition API
      5. Vuexを利用した状態管理の実装例
      6. Vuexを利用するメリット
      7. Vuexを利用する際の注意点
   7. Storeパターンを自前で実装する
      1. Storeパターン実装例
      2. Storeパターンを自前で実装するメリット
      3. Storeパターンを自前で実装する際の注意点
   8. 状態管理における心構え
      1. 状態の量を必要最小限に保つ
      2. 状態への副作用を持つコードを小さくする
      3. 状態のスコープを小さく保つ
      4. 状態を重複して持たない
      5. 暗黙的な状態の変更を避ける
3. UIコンポーネントの開発
   1. コンポーネント指向開発への流れ
      1. コンポーネント指向のフレームワークの登場
      2. UIコンポーネント開発の変遷
   2. コンポーネント駆動開発
      1. コンポーネント駆動開発を支えるツール
      2. COLUMN　共通コンポーネントを作成するタイミング
   3. Vue.jsにおけるコンポーネント開発
      1. 疎結合なコンポーネントにする
      2. propsのバリデーション
      3. propsかslotか
   4. Vueコンポーネントの利用
   5. Vue 3.0で登場した新機能
      1. Fragments
      2. Teleport
      3. SFC State-driven CSS Variables（Experimental Features）
4. Vue.jsにおけるCSS設計
   1. CSSのスコープ
      1. Scoped CSS推奨への流れ
   2. Scoped CSSのしくみ
      1. Scoped CSSの特徴
   3. VueコンポーネントにおけるCSSの命名ルール
      1. BEM Likeなクラス名のルール
      2. BEM Likeな命名ルールのメリット
      3. 要素セレクタを利用しない
   4. CSSの全体設計
      1. 定義ファイル
      2. サイト全体の共通スタイル
      3. ページ／コンポーネント固有のスタイル
      4. 余白のコントロール
5. 品質を高める
   1. 代表的なテスト手法と適切な選択
      1. 静的解析
      2. 単体テスト
      3. 結合テスト
      4. E2Eテスト
      5. テスト手法の選定のポイント
   2. 静的解析を導入する
      1. TypeScriptを利用する
      2. ESLintを利用する
   3. 単体テストを実施する
      1. Vue CLIによる導入
      2. 生成されたコードの確認
      3. ミニマムガイド
      4. 「実装」ではなく「振る舞い」のテストをしよう
   4. 結合テストを実施する
      1. 単体テストと結合テストの違い
      2. Vue Testing Library
   5. End-to-End Test（E2Eテスト）
      1. Vue CLIによる導入
      2. 生成された設定の確認
      3. マークアップやデザインに依存したテストを書かない
      4. Vue 3への対応
6. パフォーマンスを改善する
   1. ユーザー体験の質を向上させることを目的にしよう
   2. パフォーマンスの状況を把握する
   3. パフォーマンスを計測する
      1. 何を計測するか
      2. どう計測するか
      3. パフォーマンス計測の事例
   4. パフォーマンスを改善する
      1. 何から改善するか
      2. JavaScriptのファイルサイズを小さくする
      3. メインスレッドを占有しない
   5. 継続的に高いパフォーマンスを維持するために
      1. Vue 3のパフォーマンス関連トピック
7. アプリケーションの提供範囲を広げる
   1. サービスの価値をより多くのユーザーに届けるために
   2. 国際化（i18n，Internationalization）とVueI18n
      1. 国際化（i18n; Internationalization）の目的
      2. 継続的な翻訳を目指すために
      3. Vue.jsにおけるi18n対応の基本
      4. リソースの持ち方
   3. Vue I18nの使い方
      1. Vue I18nのインストールとwebpackの設定
      2. Vue I18nを便利にするエコシステム
      3. Vue I18nの具体的な使用方法
   4. i18n対応が複雑になるケースに対応する
      1. storeには文言を持たずに，リソースのキーのみを持つ
      2. 文言を含んだmixinの多用を避ける
      3. 語順に依存するUIの多用を避ける
   5. 翻訳フローをつくる
      1. 継続的翻訳フローに必要な観点
      2. 具体例からフローを考えてみる
      3. i18nに関する参考資料
   6. アクセシビリティ（a11y; Accessibility）
      1. アクセシビリティとそのガイドライン
      2. JIS X 8341・WCAG
      3. Webにおけるアクセシビリティの考慮点
   7. Vue.jsにおけるアクセシビリティ
      1. 実装上におけるアクセシビリティの観点
      2. アクセシビリティ対応状況の可視化
      3. Vue.jsのアクセシビリティ対応に関する現状
      4. アクセシビリティに関する参考情報
8. 川口和也氏に聞く「エコシステムの活用と貢献」〜特別インタビュー
   1. Vue I18nを開発したきっかけ
   2. 登場したてのVue.jsに惚れた理由は？
   3. Vue I18nを開発したときの困ったこと・障壁
   4. OSSを開発する2つの意義
   5. 「KARTE」に自分の開発したOSSを入れるときの苦労とは
   6. 開発フローと翻訳フローを両立するむずかしさ
   7. OSSとプロダクトを並行して開発する難しさ
   8. 自作のOSS導入のススメ
   9. 今後のVue I18nと新しいOSSへの展望
   10. 最後に

Vue.js 2.6に対応して改訂しました。Vue CLI4にも対応しています。
本書ではVue.jの基礎概念と導入から、プロダクトに役立つ情報までを体系的に解説しています。
Vue.jsの入門書として最適な1冊です。

1. Vue.jsとフレームワークの基礎知識
   1. Vue.jsについて
      1. 実際にVue.jsを採用した現場の声
      2. なぜVue.jsなのか？
      3. フレームワークとは？
   2. Vue.jsのキーコンセプト
      1. 親しみやすいテンプレート
      2. データバインディング
      3. 「v-」からはじまるディレクティブ
      4. コンポーネント指向の画面構築
   3. 豊富なリソースを活用しよう
      1. Element
      2. Onsen UI
   4. Vue.jsのインストール
      1. vue.jsファイルを読み込む
      2. 学習用のファイル
      3. Vueアプリケーションの作成
   5. Vue.jsの基本機能
      1. テキストのバインディング
      2. 繰り返しの描画
      3. イベントの利用
      4. フォーム入力との同期
      5. 条件分岐
      6. トランジション&アニメーション
   6. オプションの構成を見てみよう
      1. 基本的なオプションの構成
      2. el・マウントする要素
      3. data・データ
      4. computed・算出プロパティ
      5. created・ライフサイクルフック
      6. methods・メソッド
      7. いつ、どこに、「new Vue()」したらよいの？
   7. まとめ
2. データの登録と更新
   1. 基本のデータバインディング
      1. リアクティブデータって何？
      2. リアクティブなデータの定義
   2. テキストと属性のデータバインディング
      1. テキストのデータバインディング
      2. 属性のデータバインディング
      3. データの内容の確認
      4. データの更新
      5. クリックでカウンターを増やそう
      6. thisは今、何を指している？
      7. クラスとスタイルのデータバインディング
      8. 複数の属性のデータバインディング
      9. SVGのデータバインディング
      10. よくわからないけどエラーが起きた！
   3. テンプレートにおける条件分岐
      1. v-ifとv-showの違いと使い分け方
      2. <template>タグによるv-ifグループ化
      3. v-else-ifおよびv-elseによるグループ化
   4. リストデータの表示と更新
      1. 要素を繰り返し描画する
      2. オブジェクトが処理される順序
      3. キーの役割
      4. 不変でユニークなキーを設定しよう
      5. 繰り返し描画しながら、さまざまな条件を適用する
      6. リストの更新
      7. 配列インデックスを使って操作してはいけないケース
      8. Vue.setについて
      9. ユニークキーを持たない配列
      10. オプションにデータを持たないv-for
      11. 文字列に対するv-for
      12. 外部からデータを取得する
   5. DOMを直接参照する$elと$refs
      1. $elの使い方
      2. $refsの使い方
      3. $elや$refsは一時的な変更！
   6. テンプレート制御ディレクティブ
      1. v-pre
      2. v-once
      3. v-text
      4. v-html
      5. 「v-html」「テンプレート」は信頼できるコンテンツに
      6. v-cloak
      7. 仮想DOMって何？
   7. まとめ
3. イベントとフォーム入力の受け取り
   1. イベントハンドリング
      1. メソッドイベントハンドラ
      2. インラインメソッドハンドラ
      3. 使用可能なイベント
      4. フォーム入力の取得
      5. イベント修飾子
      6. キー修飾子
      7. システム修飾子
   2. フォーム入力バインディング
      1. v-modelの使い方
      2. Vue.jsの双方向データバインディング
      3. v-modelで受け取るデータの型
      4. v-modelを使うときは属性の値は使われない
      5. 複数行テキスト
      6. チェックボックス
      7. ラジオボタン
      8. セレクトボックス
      9. 画像ファイル
      10. その他の入力タイプ
      11. 修飾子
   3. マウント要素外のイベントと操作
      1. スクロールイベントの取得
      2. スムーススクロールの実装
      3. Vue.js以外からのイベントの受け取り
   4. まとめ
4. データの監視と加工
   1. 算出プロパティで処理を含むデータを作成する
      1. 算出プロパティの使い方
      2. 算出プロパティを組み合わせて使用しよう
      3. ゲッターとセッター
      4. 算出プロパティのキャッシュ機能
      5. リストの絞り込みに利用しよう
      6. ソート機能を追加しよう
   2. ウォッチャでデータを監視して処理を自動化する
      1. ウォッチャの使い方
      2. 一度だけ動作するウォッチャ
      3. 実行頻度の制御
      4. 複数の値を監視する
      5. オブジェクト型の古い値との比較方法
      6. フォームを監視してAPIからデータを取得しよう
   3. フィルタでテキストの変換処理を行う
      1. フィルタの使い方
      2. フィルタに引数を持たせる
      3. 複数のフィルタをつなげて使用する
   4. カスタムディレクティブでデータを監視しながらDOMを操作する
      1. カスタムディレクティブの使い方
      2. 使用可能なフック
      3. 動画の再生を操作する例
      4. 前の状態と比較して処理を行う
   5. nextTickで更新後のDOMにアクセスする
      1. nextTickの使い方
      2. 更新後のDOMの高さを取得しよう
   6. まとめ
5. コンポーネントでUI部品を作る
   1. コンポーネントとは
      1. コンポーネントは設計図
      2. コンポーネントの再利用
   2. コンポーネントの定義方法
      1. コンポーネントの登録
      2. コンポーネントを定義するタイミング
      3. コンポーネントのオプション
      4. コンポーネントインスタンス
   3. コンポーネント間の通信
      1. 親子コンポーネント
      2. 親子間のデータフロー
      3. 親から子
      4. 子から親
      5. $emitで渡したデータの変化
      6. 非親子コンポーネント
      7. 子コンポーネントを参照する「$refs」
      8. コンポーネントの属性のスコープ
   4. スロットを使ったコンポーネントのカスタマイズ
      1. デフォルトスロット
      2. 名前付きスロット
      3. スコープ付きスロット
   5. コンポーネントの双方向データバインディング
      1. コンポーネントのv-model
      2. .syncによる双方向データバインディング
   6. テンプレートの定義方法
      1. テンプレートの種類
      2. テンプレートがDOMと認識されるケース
   7. その他の機能やオプション
      1. 関数型コンポーネント
      2. 動的コンポーネント
      3. 共通処理を登録するMixin
      4. コンポーネントのライフサイクル
      5. keep-aliveで状態を維持する
      6. コンポーネントの依存について
   8. まとめ
6. トランジションとアニメーション
   1. トランジションとは
      1. 動作デモについて
      2. 基本的なトランジションの使い方
      3. スタイルを定義して動かしてみよう
      4. トランジションクラス名とクラスのプレフィックス
      5. 初期描画時にもトランジションを行う
   2. 単一要素トランジション
      1. 単一要素トランジションで使用するトランジションクラス
      2. EnterとLeaveで別々のスタイルを定義する
      3. 複数の要素をグループ化する
      4. EnterとLeaveのタイミングを変更する
      5. キーの変化によるトランジションの発動
   3. リストトランジション
      1. リストトランジションで使用するトランジションクラス
      2. 移動トランジション
      3. LeaveとMoveは同時に発生することがある
   4. SVGのトランジション
      1. SVGをトランジションで切り替えよう
   5. トランジションフック
      1. 使用できるトランジションフック
      2. Vue.js側でCSS操作を行わないようにする
   6. まとめ
7. より大規模なアプリケーション開発
   1. アプリケーションを拡張しよう
   2. Vue CLIとは
      1. ソースコードを分けて管理
      2. webpackとは
      3. よりメンテナンスしやすいコードを書くために
   3. 単一ファイルコンポーネントとは
      1. スコープ付きCSS(Scoped CSS)
      2. 外部ファイルの読み込み
      3. 他のマークアップ言語やスタイルシート言語の使用
      4. 本書におけるコーディングスタイル
   4. ES2015モジュールの書き方
      1. モジュールを定義する
      2. モジュールを使用する
      3. 単一ファイルコンポーネントの正体
   5. Node.jsの導入
      1. npmとは
      2. Babelとは
   6. Vue CLIの導入
      1. 新しいプロジェクトの作成
      2. フォルダとファイルの構成
      3. 開発サーバーを起動する
      4. ホットリロード
      5. プロジェクトをビルドする
   7. Vue.jsプラグイン
      1. Vue.jsプラグインの使い方
      2. プラグインを自作してみよう
      3. ES2015で書いてみよう
      4. 変数宣言の書き方
      5. 関数とメソッドの書き方
      6. テンプレートリテラル
      7. オブジェクトプロパティのショートハンド
      8. 分割代入
      9. スプレッド演算子
      10. 配列メソッド
      11. Promise
      12. まとめ
8. Vuexでアプリケーションの状態を管理する
   1. Vuexとは
      1. Vuexを導入するメリット
      2. Vuexのインストール
   2. シンプルなストア構造
      1. ストアをVueアプリケーションに登録する
      2. Vuex内のインスタンスの参照方法
      3. コアコンセプト
         1. ステート(state)
         2. ゲッター(getter)
         3. ミューテーション(mutations)
         4. アクション(actions)
         5. Vuexのルール
         6. アクションで非同期処理をするのはなぜ？
      4. コンポーネントでストアを利用しよう
         1. メッセージを使用する
         2. メッセージを更新する
         3. Vuexは初期段階で検討しよう
         4. ステートやゲッターにv-modelを使用する
         5. コンポーネントとストアをバインドするヘルパー
      5. モジュールで大きくなったストアを分割する
         1. モジュールの使い方
         2. 同一のミューテーションタイプ
         3. ネームスペース
         4. モジュールのネスト
         5. ネームスペース付きモジュールから外部へのアクセス
         6. モジュールをファイルごとに分ける
         7. モジュールの再利用
      6. その他の機能やオプション
         1. ストアの状態を監視する
         2. Strictモードで開発する
         3. Vuexでホットリロードで開発する
         4. コンポーネントとどう切り分けたらよい？
      7. まとめ
   3. Vue RouterでSPAを構築する
      1. Vue Routerとは
         1. シングルページアプリケーション
         2. Vue Routerのインストール
         3. 組み込みコンポーネント
      2. シンプルなSPA構造
         1. URLにハッシュを付けない
         2. ルーティング用プロパティ
      3. ルートの定義とオプション
         1. 名前付きのルート
         2. パラメータ
         3. クエリー
         4. メタフィールド
         5. リダイレクト
      4. ナビゲーションの作成
         1. テンプレートによるナビゲーション
         2. プログラムによるナビゲーション
      5. パラメータ付きの動的ルートからコンテンツを作成しよう
         1. ページコンポーネントの構成
         2. パターンマッチのルーティング
         3. パラメータをpropsとしてコンポーネントに渡す
         4. コンテンツを表示する
      6. ネストされた複雑なページを作成しよう
         1. ネストされたルートの定義
         2. データの共有にはVuexを使用する
         3. 親ルート用コンポーネントの定義
      7. ナビゲーションガード
         1. ナビゲーションガードの引数
         2. ナビゲーションガードのトリガについて
         3. ルート単位のガード
         4. グローバルのガード
         5. コンポーネントのガード
         6. 完全なナビゲーション解決フロー
      8. ページの遷移にエフェクトを適用する
         1. 簡単なトランジション
         2. 非同期読み込みを含むトランジション
      9. その他の機能やオプション
         1. 遷移前のデータの読み込み
         2. コンポーネントの非同期読み込み
         3. ルートのアクセス制限
         4. ソースコードに大事な情報を書かない
         5. スクロールの振る舞いを操作する
         6. SPAの注意点
      10. まとめ

人気のJavaScriptフレームワーク「Vue.js」を初歩から学べる、いちばんやさしい入門書!

制御構造やイベント処理などの基本から、コンポーネントの利用、Web APIを使用したアプリ作成、
さらに大規模Vueアプリケーションを効率的に開発するためのVue CLI 3(Node.jsのモジュール)を使った開発まで網羅的に解説します!

1. Vue.jsってどんなフレームワーク？
   1. Vue.jsの世界へようこそ
   2. Vueアプリケーションの開発に必要なものは
   3. 操作しながらVueアプリの動きを見てみよう
      1. 「CDN」とは
      2. オブジェクトリテラル
   4. マウスのクリックやユーザーの入力を処理しよう
      1. Vueアプリケーションのデバッグに便利な「Vue.js Devtools」
2. いろいろなデータバインディング
   1. HTMLコンテンツにデータをバインドする
   2. HTMLの属性をバインドする
   3. スタイルとクラスのバインド
      1. キャメルケースとケバブケース
   4. 処理した値を戻す算出プロパティ
3. 条件分岐と繰り返し
   1. v-if、v-showディレクティブで
      1. 要素をオン/オフする
   2. v-forで繰り返し
4. フォームのいろいろな要素の取り扱い
   1. v-onディレクティブでイベントを処理する
   2. v-modelディレクティブを活用しよう
      1. v-onとv-bindでv-modelと同様の動作をさせる
   3. todoリストを作ろう
      1. デベロッパーツールでローカルストレージを確認する
      2. ライフサイクル関数
   4. お絵かきアプリを作ろう
5. フィルタ、アニメーション、コンポーネントを使う
   1. フィルタ機能を利用する
   2. アニメーション機能を活用する
   3. カスタムコンポーネントを活用する
      1. Vue.js Devtoolsによるカスタムイベントの確認
      2. ローカル登録のコンポーネントを入れ子にする場合の注意点
   4. スライドショーを作ろう
6. Web APIを使用したアプリの作成
   1. axiosライブラリによるAjax通信について
   2. YouTube動画検索アプリの作成
      1. GitHubについて
7. Vue CLI 3によるアプリケーション開発
   1. Vue CLI 3を使ってみよう
   2. 既存アプリのシングルファイルコンポーネント化
   3. Vue RouterとVuexを使ってみよう

いまのWebアプリケーションの構築には、フレームワークの採用が当たり前になっています。なかでもVue.jsはUIの構築に特化した機能を備えており、既存のWebサイト等にも段階的に取り入れやすい設計になっています。本書は、HTML・CSS・JavaScriptの基本的な知識をもっている方向けに、いま学んでおくべきVue.jsの基本を解説していきます。

本書は3部構成に分かれています。“基本”のパートでは、ToDoアプリケーションを作成しながら、Vue.jsの基礎をじっくりと身につけていきます。次の“実践”のパートでは、モーダルやカルーセル、リスト抽出にクイズコンテンツと、よくあるUIや機能を実際にVue.jsでWebサイトへ組み込む方法を解説。最後のパートとなる“最前線”では、Nuxt.jsとHeadless CMSを利用したJamstackによるサイト構築の最新ワークフローを身につけます。

Vue 3.xに対応しており、掲載コードはダウンロードできます。実際に手を動かしながら現場でのVue.jsの使い方が身につく、これから本格的に学びたい人に最適の1冊です。

1. Vue.jsの基本を学ぶ
   1. Vue.jsとは？
      1. なぜVue.jsが求められているのか
      2. Vue.jsのインストール方法
      3. Vue.js devtoolsのインストール方法
      4. Vue3について
   2. ToDoアプリで基本を学ぶ①　Vue.jsの第一歩
      1. 作成するToDoアプリケーションの機能
      2. Vueインスタンスの作成とマウント
      3. dataで状態を定義する
      4. テンプレート構文でデータを表示
      5. ライフサイクルとは
   3. ToDoアプリで基本を学ぶ②　v-modelでフォームの使い勝手を向上
      1. テキストボックスを操作する
      2. チェックボックスを設定する
      3. セレクトボックスを設定する
      4. 修飾子を使用して動作を変更
   4. ToDoアプリで基本を学ぶ③　フォームの操作
      1. computedでデータを表示
      2. methodsでメソッドを定義
      3. v-onでイベントを購読＆実行
      4. リアクティブなデータ
      5. watchでデータの変更を監視
      6. v-bindでHTML属性を変更
      7. HTML要素を表示・非表示にする
      8. v-forでデータ配列の内容を表示
   5. ToDoアプリで基本を学ぶ④　コンポーネント
      1. コンポーネント
      2. 親子コンポーネント間の通信（props）
      3. 親子コンポーネント間の通信（$emit）
      4. <transition>を用いたアニメーション
2. Vue.jsをWebサイトに組み込む
   1. WebサイトでのVue.jsの使いどころ
      1. WebサイトにおけるVue.jsの使いどころ
   2. モーダルを作ってみよう
      1. モーダルの要素と仕様
      2. サムネイルリストを作成する
      3. クリックイベントを追加する
      4. 閉じるボタンを作成する
      5. PREV、NEXTボタンを作成する
      6. モーダルを完成させる
   3. カルーセルを作ってみよう
      1. カルーセルの要素と仕様
      2. カルーセルとページャーのテンプレート
   4. アコーディオンを作ってみよう
      1. アコーディオンの実装に必要な要素と仕様
      2. アコーディオンのテンプレート
      3. アコーディオン機能の実装
   5. 商品一覧表示&検索を作ってみよう
      1. 商品一覧表示&検索に必要な要素
      2. 商品一覧を表示する
      3. 商品名での検索を実装する
      4. 価格での検索を実装する
   6. クイズを作ってみよう
      1. 簡易クイズアプリに必要な要素
      2. 問題＆解答コンポーネントを作成する
      3. 結果表示コンポーネントを作成する
      4. 親コンポーネントを作成する
3. Jamstackで静的サイトを作る
   1. Nuxt.jsの準備をする
      1. Jamstackとは？
      2. Nuxt.jsとは？
      3. Node.jsのインストール
      4. Nuxt.jsのインストール
   2. Nuxt.jsで静的なページを作る
      1. 静的ページのワイヤーと構成
      2. Nuxtのディレクトリ構成を確認する
      3. トップページを作る
      4. パーツのコンポーネント化
      5. 下層ページを作る
      6. メニューページを作る
      7. お知らせ一覧ページを作る
      8. お知らせ詳細ページを作る
   3. 部分的にCMS化する
      1. Headless CMSとは？
      2. microCMSとは？
      3. フィールド作成と記事追加
      4. microCMSからデータを取得
      5. Nuxt.jsにデータを表示する
      6. お知らせの登録データを表示
      7. お知らせの詳細ページを作成
   4. Netlifyへデプロイする
      1. Netlifyとは？
      2. Netlifyの登録とGitHubの連携
      3. NetlifyとmicroCMSの連携
      4. Nuxt.jsのページをNetlifyへアップ
      5. サイト更新のワークフロー

Vue.jsの基本機能を押さえたサンプルを元に、Webアプリ開発手法を学ぶことができます。

具体的には、ニーズの高い、データバインディング、イベント、ライブラリの利用、コンポーネントなど開発の現場でニーズの高いトピックを中心に解説。さらに現在、主流になりつつあるSPAの作成に役立つポイントも盛り込みます。

1. Vue.jsって何？
   1. Vue.jsって何？
      1. jQueryよりもシンプル
      2. SPA(シングルページアプリケーション)のメリット
      3. Vue.jsは、学習しやすくて、軽いSPAを作れる
      4. どのようなものが作れる？
   2. Vue.jsは「データと表示をつなげる仕組み」
      1. Vue.jsの主な機能一覧
   3. インストールしてみよう
      1. CDNを使う方法
      2. ダウンロードする方法
   4. 試してみよう
      1. クリックした回数を表示するボタン
   5. まとめ
2. データを表示するとき
   1. Vue インスタンスを作る：new Vue
   2. データをそのまま表示する：{{ データ }}
      1. マスタッシュ({{}})タグで表示
      2. v-textで表示
      3. v-htmlで表示
   3. 使えるデータの種類
      1. 基本的なデータ
      2. 配列
      3. オブジェクト型
      4. あらかじめ用意したデータを使う
      5. データの中身を確認したいとき
   4. まとめ
3. 属性を指定するとき
   1. 要素の属性をデータで指定する：v-bind
      1. 画像を指定する
      2. リンク先を指定する
      3. 右寄せ、左寄せ、中央寄せなどを指定する
      4. インラインスタイルを指定する
      5. クラス属性を指定する
   2. まとめ
4. ユーザーの入力をつなぐとき
   1. 入力フォームをデータとつなぐ：v-model
      1. テキスト：input
      2. 複数行テキスト：textarea
      3. チェックボックス：input checkbox
      4. ラジオボタン：input radio
      5. 選択：select
      6. 修飾子
   2. まとめ
5. ユーザーの操作をつなぐとき
   1. イベントとつなぐ：v-on
      1. ボタンをクリックしたとき
      2. 引数を渡してメソッドを実行する
      3. キー入力したとき
   2. まとめ
6. 条件とくり返しを使うとき
   1. 条件によって表示する：v-if
      1. trueのときだけ表示する例
      2. trueとfalseで表示を切り替える例
      3. クリックしたら「いいね！」ボタンが消える例
   2. くり返し表示する：v-for
      1. 配列データをリストで表示する例
      2. オブジェクトの配列データをリストで表示する例
      3. 1×5~10×5を繰り返し表示する例
      4. 配列データを、番号付きリスト表示する例
      5. 配列データをテーブルで表示する例①
      6. 配列データをテーブルで表示する例②
      7. 配列データの追加と削除
      8. v-forとv-ifの組み合わせ
   1. まとめ
7. Google Chartsと連動させてみよう
   1. Google Chartsとは？
      1. Google Chartsで円グラフを表示させる例
   2. Google Chartsと連動させる
      1. Google Chartsの円グラフにボタンで投票できる例
   3. まとめ
8. データの変化を監視するとき
   1. データを使って別の計算をする：算出プロパティ
      1. 金額を入力したら、消費税込みの金額を計算する例
      2. 単価と個数を入力したら、税込み金額計算する例
      3. 文章を入力したら、残りの文字を表示する例
      4. 文字を入力すると、その文字を含む項目だけ表示される例
      5. 赤緑青のスライダーを動かしたら、できた色を表示する例
   2. データの変化を監視する：監視プロパティ
      1. 入力文字を監視して、禁止文字が入力されたらアラートを出す例
      2. タイマーを作る
      3. 残り秒数が0になったら、アラートを出す例
      4. 残りの秒数を監視して表示し、0秒になったらアラートを出す例
      5. TweenMaxライブラリを使う
      6. TweenMaxのテスト
      7. 数字がクルクルとアニメーションをしながら値が増えるinput要素の例
   3. まとめ
9. Markdownエディタを作ってみよう
   1. Markdown エディタとは？
      1. Markdownエディタの設計
   2. Markdown エディタを作る
      1. Markdownの例
   3. まとめ
10. アニメーションするとき
    1. 表示／非表示時にアニメーションする：transition
       1. チェックボックスで表示/非表示をアニメーションする例
    2. リストのトランジション：transition-group
       1. ボタンを押してリストが増減するとき、アニメーションする例
    3. リストの並びが移動するトランジション
       1. クリックしたらシャッフルする例
       2. リストの並びが移動しながら変わるアニメーションの例
    4. まとめ
11. ToDoリストを作ってみよう
    1. ToDoリストとは？
       1. ToDoリストのサンプル
       2. ToDoリストの作成手順
       3. ToDoリストの設計
    2. 仮データでToDoリストを表示する
       1. 仮データで表示するToDoリスト
    3. 改良する：追加＆削除機能
       1. 改良する方法
    4. まとめ
12. 部品にまとめるとき
    1. 部品にまとめる：コンポーネント
       1. コンポーネントを作って表示する例
    2. コンポーネントのdata はfunction にする
       1. それぞれ別々にカウントするコンポーネントの例
    3. 値を渡す：props
       1. コンポーネントに値を渡す例
       2. v-forでコンポーネントを繰り返す
       3. 配列からコンポーネントを作って表示する例
    4. まとめ
13. JSONデータを表示させてみよう
    1. JSONファイルの読み込み方
       1. JSONを読み込む例(JavaScript)
       2. JSONを読み込む例(Vue.js)
    1. JSONデータを読み込んで、コンポーネントで並べる
       1. プログラムの設計
       2. 配列データをコンポーネントで並べる例
    2. 改良する：トランジションをつける
       1. プログラムの設計
       2. JSONデータを読み込んで、トランジションをつける例
    3. まとめ