Vue.jsポケットリファレンス
書籍情報
発売日 : 2023年04月19日
著者／編集 : 長島 優斗/久光 未悠/東泉 哲寛/鶴田 展之/（株）qnote
出版社 : 技術評論社
発行形態 : 単行本
書籍説明
内容紹介
革新的なＪａｖａＳｃｒｉｐｔフレームワークＶｕｅ．ｊｓをコンパクトに解説した実践型リファレンス。環境構築や基本的な使い方をしっかり解説しているので初学者にも安心です。そしてＶｕｅ．ｊｓの特徴ともいえるプログレッシブフレームワークを支えるコンポーネントの基本を押さえ、リファレンスでは各種機能の豊富なサンプルコードと実行結果によって、現在の利用を促進します。Ｖｕｅ．ｊｓを特徴づける拡張ライブラリＶｕｅ Ｒｏｕｔｅｒの活用方法により高機能なＷｅｂ開発を実現します。
目次
■■第1章 Vue.jsの基本
■1.1 Vue.jsとは
■1.2 シングルページアプリケーション
■1.3 リアクティブプログラミング
■1.4 プログレッシブフレームワーク
■1.5 仮想DOM
■1.6 jQueryとの比較
■1.7 Vue.jsが提供すること、しないこと
■1.8 動作環境
.
■■第2章 Vue.js 3を使ってみよう
2.1 Vue.js3 とは
2.2 Vue3で廃止された機能
2.3 Vue2→Vue3
■■ 第3章 環境構築
3.1 手っ取り早くVue.jsを試す
3.2 WebアプリケーションにVue.jsを組み込む
3.3 HTMLに直接Vue.jsを組み込む
3.4 Vue-CLIで新規にWebアプリケーションを作成する
3.5 Vue.jsデバッグツールを導入する
■■ 第4章 Vue.jsの基本的な使い方 61
4.1 インスタンスを作成する
4.2 インスタンスをマウントする
4.3 データを使用し、htmlに描画する
4.4 算出プロパティを使用して、リアクティブにデータを加工する
4.5 メソッドを使用する
4.6 データをリアクティブに扱いたい
4.7 HTMLを動的に表示したい（テンプレート）
4.8 算出プロパティで自動的に再計算する関数を作成したい
4.9 算出プロパティとメソッドの違い
4.1 算出プロパティと監視プロパティの違い
4.11 算出プロパティへの代入
4.12 値を動的に監視したい（watch）
4.13 ウォッチャのプロパティ
4.14 インスタンス内に処理を組み込みたい（method）
4.15 ライフサイクルフック
■■第5章 コンポーネントの基本
5.1 部品ごとにVueインスタンスを分けたい
5.2 コンポーネントの登録
5.3 グローバルコンポーネント
5.4 ローカルコンポーネントのインポートと使用
5.5 コンポーネントの親子関係
5.6 親から子へデータを渡したい（props）
5.7 子から親のイベントを発火したい（emit）
5.8 親から子へテンプレートを差し込みたい（slot）
5.9 親から渡された属性をまとめて受け取りたい（attrs）
■■ 第6章 リファレンス
6.1 属性を動的に変更したい（v-bind）
6.2 classとstyleの値を動的に変更する
6.3 テンプレート内で条件分岐がしたい（v-if、v-show）
6.4 配列要素のリストを表示したい（v-for）
6.5 イベントハンドリングを実行したい（v-on）
6.6 双方向でデータのやりとりがしたい（v-model）
6.7 一度だけデータを展開したい（v-once）
6.8 生のHTMLを描画したい（v-html）
6.9 単純なテキストの描画したい（v-text）
6.1 ちらつきを防止したい（v-cloak）
6.11 コンパイルをスキップしたい（v-pre）
6.12 効率よくDOMが追跡したい（key属性）
6.13 DOMを操作したい（ref属性）（OptionsAPI）
6.14 コンポーネントを動的に切り替えたい（is属性）
6.15 Vue2との変更点
6.16 アニメーションをつけたい（transition）
6.17 複数の要素やコンポーネントにトランジションを適用したい
（transition-group）
6.18 コンポーネントの再描画をスキップしたい（keep-alive）
6.19 テンプレート内容を置換したい（slot）
6.2 カスタムディレクティブを設定したい（app.directive）
6.21 コンポーネントを登録or取得したい（app.component）
6.22 プラグインを使用したい（app.use）
6.23 バージョンを取得したい（version）
6.24 非同期にDOMを更新したい（nextTick()）
6.25 リアクティブに値を変更する（ref()、reactive()）
6.26 算出プロパティで再計算したい（computed）
6.27 オブジェクトを読み取り専用とする（readonly）
6.28 値の変更を検知したい（watch）
6.29 ライフサイクルフック
6.3 provideとinject
6.31 Teleportを使ってテンプレートを描画させたい
6.32 Suspenseで代替コンポーネントを表示させたい
6.33 テンプレートに複数のルート要素を含めたい（Fragments）
6.34 スコープ付きCSS（scopedstyle）で記述したい
■■第7章 Vue.jsの拡張機能を使いたい
7.1 ミックスインを定義してコンポーネントに導入したい
7.2 クローバルミックスインを定義したい
7.3 カスタムディレクティブを定義したい
7.4 レンダー関数を記述したい
7.5 レンダー関数をJSXに書き換えたい
7.6 Vueのプライグインを導入したい
7.7 プライグインを作りたい
■■第8章 Vue Routerとは
8.1 VueRouterとは
8.2 インストール
8.3 ダイナミックインポートの使用
8.4 同一コンポーネントを使って表示内容を変えたい（動的ルーティング）
229
8.5 ネストされたルート
8.6 プログラムによるナビゲーションを指定したい
8.7 ルートに名前を指定したい（名前付きルート）
8.8 複数のビューを表示させたい（名前付きビュー）
8.9 リダイレクトとエイリアスを設定したい
8.1 ルートのプロパティをpropで受け取る
8.11 historyのモード
8.12 ナビゲーションガードで遷移を制御したい
8.13 ルートメタフィールドを使用する
8.14 トランジションを使用したい
8.15 ナビゲーション後にデータを取得する
8.16 スクロールの挙動をカスタマイズしたい
■■ 第9章 アプリケーションの状態管理
9.1 Vuexでアプリケーションの状態管理をしたい
9.2 インストール手順
9.3 ステートを定義
9.4 ステートにアクセス
9.5 ゲッターを定義
9.6 ゲッターにアクセス
9.7 ステートを変更したい・ミューテーションを定義したい
9.8 Vuexに非同期処理を実行したい・Vuexアクションを定義したい
9.9 ほかの非同期操作とのチェーン
9.1 Vuexロジックを整理したい（Vuexを導入する手順）
9.11 Vuexプラグインを定義したい
9.12 厳格モードを有効にしたい
9.13 Vuexのデベロッパーツール機能を無効にしたい
9.14 Vuexのステートを完全に上書きしたい
9.15 Vuexのステート・ゲッターを監視して反応したい
9.16 Vuexのミューテーションが呼ばれたときに反応したい
9.17 Vuexのアクションが呼ばれたときに反応したい
9.18 ホットリロード機能を有効にしたい
9.19 Piniaを使ってみよう
■■第10章 さまざまなプラグイン
10.1 Vue.js公式ESLintプラグイン（eslint-plugin-vue）
10.2 Vue-Lazyload
10.3 vue-sidebar-menu
10.4 Vue FlatPickr
10.5 Vue-multiselect
10.6 Vue-Socket.io
10.7 vue-fullcalendar
10.8 Vue.Draggable
10.9 vue-i18n
10.1 VeeValidate
10.11 VitePress
■1.1 Vue.jsとは
■1.2 シングルページアプリケーション
■1.3 リアクティブプログラミング
■1.4 プログレッシブフレームワーク
■1.5 仮想DOM
■1.6 jQueryとの比較
■1.7 Vue.jsが提供すること、しないこと
■1.8 動作環境
.
■■第2章 Vue.js 3を使ってみよう
2.1 Vue.js3 とは
2.2 Vue3で廃止された機能
2.3 Vue2→Vue3
■■ 第3章 環境構築
3.1 手っ取り早くVue.jsを試す
3.2 WebアプリケーションにVue.jsを組み込む
3.3 HTMLに直接Vue.jsを組み込む
3.4 Vue-CLIで新規にWebアプリケーションを作成する
3.5 Vue.jsデバッグツールを導入する
■■ 第4章 Vue.jsの基本的な使い方 61
4.1 インスタンスを作成する
4.2 インスタンスをマウントする
4.3 データを使用し、htmlに描画する
4.4 算出プロパティを使用して、リアクティブにデータを加工する
4.5 メソッドを使用する
4.6 データをリアクティブに扱いたい
4.7 HTMLを動的に表示したい（テンプレート）
4.8 算出プロパティで自動的に再計算する関数を作成したい
4.9 算出プロパティとメソッドの違い
4.1 算出プロパティと監視プロパティの違い
4.11 算出プロパティへの代入
4.12 値を動的に監視したい（watch）
4.13 ウォッチャのプロパティ
4.14 インスタンス内に処理を組み込みたい（method）
4.15 ライフサイクルフック
■■第5章 コンポーネントの基本
5.1 部品ごとにVueインスタンスを分けたい
5.2 コンポーネントの登録
5.3 グローバルコンポーネント
5.4 ローカルコンポーネントのインポートと使用
5.5 コンポーネントの親子関係
5.6 親から子へデータを渡したい（props）
5.7 子から親のイベントを発火したい（emit）
5.8 親から子へテンプレートを差し込みたい（slot）
5.9 親から渡された属性をまとめて受け取りたい（attrs）
■■ 第6章 リファレンス
6.1 属性を動的に変更したい（v-bind）
6.2 classとstyleの値を動的に変更する
6.3 テンプレート内で条件分岐がしたい（v-if、v-show）
6.4 配列要素のリストを表示したい（v-for）
6.5 イベントハンドリングを実行したい（v-on）
6.6 双方向でデータのやりとりがしたい（v-model）
6.7 一度だけデータを展開したい（v-once）
6.8 生のHTMLを描画したい（v-html）
6.9 単純なテキストの描画したい（v-text）
6.1 ちらつきを防止したい（v-cloak）
6.11 コンパイルをスキップしたい（v-pre）
6.12 効率よくDOMが追跡したい（key属性）
6.13 DOMを操作したい（ref属性）（OptionsAPI）
6.14 コンポーネントを動的に切り替えたい（is属性）
6.15 Vue2との変更点
6.16 アニメーションをつけたい（transition）
6.17 複数の要素やコンポーネントにトランジションを適用したい
（transition-group）
6.18 コンポーネントの再描画をスキップしたい（keep-alive）
6.19 テンプレート内容を置換したい（slot）
6.2 カスタムディレクティブを設定したい（app.directive）
6.21 コンポーネントを登録or取得したい（app.component）
6.22 プラグインを使用したい（app.use）
6.23 バージョンを取得したい（version）
6.24 非同期にDOMを更新したい（nextTick()）
6.25 リアクティブに値を変更する（ref()、reactive()）
6.26 算出プロパティで再計算したい（computed）
6.27 オブジェクトを読み取り専用とする（readonly）
6.28 値の変更を検知したい（watch）
6.29 ライフサイクルフック
6.3 provideとinject
6.31 Teleportを使ってテンプレートを描画させたい
6.32 Suspenseで代替コンポーネントを表示させたい
6.33 テンプレートに複数のルート要素を含めたい（Fragments）
6.34 スコープ付きCSS（scopedstyle）で記述したい
■■第7章 Vue.jsの拡張機能を使いたい
7.1 ミックスインを定義してコンポーネントに導入したい
7.2 クローバルミックスインを定義したい
7.3 カスタムディレクティブを定義したい
7.4 レンダー関数を記述したい
7.5 レンダー関数をJSXに書き換えたい
7.6 Vueのプライグインを導入したい
7.7 プライグインを作りたい
■■第8章 Vue Routerとは
8.1 VueRouterとは
8.2 インストール
8.3 ダイナミックインポートの使用
8.4 同一コンポーネントを使って表示内容を変えたい（動的ルーティング）
229
8.5 ネストされたルート
8.6 プログラムによるナビゲーションを指定したい
8.7 ルートに名前を指定したい（名前付きルート）
8.8 複数のビューを表示させたい（名前付きビュー）
8.9 リダイレクトとエイリアスを設定したい
8.1 ルートのプロパティをpropで受け取る
8.11 historyのモード
8.12 ナビゲーションガードで遷移を制御したい
8.13 ルートメタフィールドを使用する
8.14 トランジションを使用したい
8.15 ナビゲーション後にデータを取得する
8.16 スクロールの挙動をカスタマイズしたい
■■ 第9章 アプリケーションの状態管理
9.1 Vuexでアプリケーションの状態管理をしたい
9.2 インストール手順
9.3 ステートを定義
9.4 ステートにアクセス
9.5 ゲッターを定義
9.6 ゲッターにアクセス
9.7 ステートを変更したい・ミューテーションを定義したい
9.8 Vuexに非同期処理を実行したい・Vuexアクションを定義したい
9.9 ほかの非同期操作とのチェーン
9.1 Vuexロジックを整理したい（Vuexを導入する手順）
9.11 Vuexプラグインを定義したい
9.12 厳格モードを有効にしたい
9.13 Vuexのデベロッパーツール機能を無効にしたい
9.14 Vuexのステートを完全に上書きしたい
9.15 Vuexのステート・ゲッターを監視して反応したい
9.16 Vuexのミューテーションが呼ばれたときに反応したい
9.17 Vuexのアクションが呼ばれたときに反応したい
9.18 ホットリロード機能を有効にしたい
9.19 Piniaを使ってみよう
■■第10章 さまざまなプラグイン
10.1 Vue.js公式ESLintプラグイン（eslint-plugin-vue）
10.2 Vue-Lazyload
10.3 vue-sidebar-menu
10.4 Vue FlatPickr
10.5 Vue-multiselect
10.6 Vue-Socket.io
10.7 vue-fullcalendar
10.8 Vue.Draggable
10.9 vue-i18n
10.1 VeeValidate
10.11 VitePress
著者情報
長島 優斗
■東泉 哲寛（ひがしいずみ てつひろ）
1988 年生まれ。元は大手のコールセンターで働いていたが、29 歳でエンジニアを志し30 歳でqnote に入社。趣味は食べ呑み歩き、バドミントン。推しの猫社員は「りぼん」。
長島, 優斗, 1995-
久光 未悠
■久光 未悠（ひさみつ みゆ）
東京都立大法学部卒業後、株式会社qnote に新卒入社。業務でVue を使っていたところ、Vue3 アップデートの際に本書の執筆に参画することに。趣味はGoogle マップで行きたいリストを作成しては実際に巡ること。
久光, 未悠
東泉 哲寛
■長島 優斗（ながしま ゆうと）
1995 年生まれ。25 歳のときにフロントエンドからバックエンドエンジニアへの転身をqnote にて経験。趣味は音楽鑑賞と猫吸い。特技はいつまでも寝られること。
東泉, 哲寛, 1988-
鶴田 展之
■鶴田 展之（つるた のぶゆき）
1968 年生まれ。qnote 代表取締役社長。猫好き・音楽好きの創業社長。『jQuery ポケットリファレンス』『コーディングフォービギナーズPYTHON』（翻訳）、『MySQL 辞典』（共著）などがある。
鶴田, 展之
（株）qnote
■株式会社qnote
猫といっしょに仕事ができるオフィスとして有名。Web アプリケーションとネイティブアプリケーション開発（iOS、Android）や、Windows やmacOS などデスクトップアプリ開発にも定評がある。Web 開発だけでなく、サーバー管理などのインフラ構築も得意とする。
qnote
