【2022年】Vue.js本「人気ランキング / 人気・おすすめ本15冊」

Chapter1 イントロダクション1-1 JavaScriptの歴史1-2 jQueryからJavaScriptフレームワークへ1-3 主なJavaScriptフレームワークとVue.jsChapter2 Vue.jsの基本2-1 Vue.jsを利用するための準備2-2 Vue.js理解のための3つの柱2-3 リアクティブデータChapter3 ディレクティブ3-1 イベント関連のディレクティブ3-2 フォーム関連のディレクティブ3-3 制御関連のディレクティブ3-4 データバインディング関連のディレクティブ3-5 より高度なイベント処理Chapter4 コンポーネント（基本）4-1 コンポーネントの基本4-2 コンポーネント間の通信4-3 コンポーネント配下のコンテンツをテンプレートに反映させる ～ スロットChapter5 コンポーネント（応用）5-1 動的コンポーネント5-2 v-modelによる双方向データバインディング5-3 アニメーション機能5-4 コンポーネントのその他の話題Chapter6 部品化技術6-1 ディレクティブの自作6-2 フィルターの自作6-3 プラグインの利用と自作6-4 ミックスインChapter7 Vue CLI7-1 Vue CLIの基本7-2 単一ファイルコンポーネント7-3 TypeScriptChapter8 ルーティング8-1 ルーティングとは？8-2 ルーティングの基本8-3 ルーター経由で情報を渡す手法8-4 マルチビュー、入れ子のビュー、ガードなどChapter9 Vuex9-1 Vuexとは？9-2 Vuexの基本9-3 Vuexストアを構成する要素9-4 巨大なストアを分割管理する ～ モジュールChapter10 テスト10-1 単体テスト10-2 E2EテストChapter11 応用アプリ11-1 アプリの構造を概観する11-2 アプリの共通機能を読み解く11-3 アプリの実装を理解する

１　プログレッシブフレームワークＶｕｅ．ｊｓ
２　Ｖｕｅ．ｊｓの基本
３　コンポーネントの基礎
４　Ｖｕｅ　Ｒｏｕｔｅｒを活用したアプリケーション開発
５　Ｖｕｅ．ｊｓの高度な機能
６　単一ファイルコンポーネントによる開発
７　Ｖｕｅｘによるデータフローの設計・状態管理
８　中規模・大規模向けのアプリケーション開発１　開発環境のセットアップ
９　中規模・大規模向けのアプリケーション開発２　設計
１０　中規模・大規模向けのアプリケーション開発３　実装
Ａｐｐｅｎｄｉｘ　ｊＱｕｅｒｙからの移行
開発ツール
Ｎｕｘｔ．ｊｓ

川口和也（カワグチカズヤ）
Ｖｕｅ．ｊｓコアチームメンバー。オープンソースソフトウェア活動に関わりながら、Ｖｕｅ．ｊｓ日本ユーザーグループの代表として、コミュニティの運営活動をしている

喜多啓介（キタケイスケ）
ＬＩＮＥ株式会社にて、ＪａｖａＳｃｒｉｐｔを中心にクライアントサイドの実装を担当

野田陽平（ノダヨウヘイ）
ＩＢＭにて電子情報開示関連のソフトウェア開発にＱＡ及びフロントエンドエンジニアとして約５年間携わる。その後株式会社プレイドに入社し、ＣＸ（顧客体験）プラットフォームＫＡＲＴＥの開発を行う

手島拓也（テジマタクヤ）
ＩＢＭやＬＩＮＥにて主にＷｅｂ製品開発を約７年間担当。その後、共同創業者兼ＣＴＯとしてＵＰＳＴＡＹを設立、事業譲渡を経験。現在はエンジニア向けの事務所ＧＡＯ　ＧＡＯ　Ａｓｉａを設立し代表を務める

片山真也（カタヤマシンヤ）
Ｖｕｅ．ｊｓコアチームメンバーとして主にＶｕｅ．ｊｓ本体と周辺ライブラリのＴｙｐｅＳｃｒｉｐｔサポートに貢献（本データはこの書籍が刊行された当時に掲載されていたものです）

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

CHAPTER1　Vue.jsを学ぶ準備をしよう
SECTION 01 Vue.jsについて理解しよう
SECTION 02 Vue.jsの開発環境を整えよう
SECTION 03 ひな形となるHTMLとJavaScriptファイルを作ろう
CHAPTER2　Vue.jsの基本を学ぼう
SECTION 01 Vueインスタンスを理解しよう
SECTION 02 データをWebブラウザに出力しよう
SECTION 03 バインディングを理解しよう
SECTION 04 レンダリングを理解しよう
SECTION 05 デバッグしよう
CHAPTER3　イベントハンドリングを学ぼう
SECTION 01 イベントハンドリングとメソッドを理解しよう
SECTION 02 カウンターアプリを作ってみよう
SECTION 03 データの流れを理解しよう
CHAPTER4　条件付きレンダリングを学ぼう
SECTION 01 条件分岐と条件付きレンダリングを理解しよう
SECTION 02 条件を算出プロパティに書いてみよう
SECTION 03 条件を増やそう
SECTION 04 双方向バインディングを理解しよう
SECTION 05 バリデーション機能付きの入力フォームを作成しよう
CHPTER5　リストレンダリングを学ぼう
SECTION 01 リストレンダリングを理解しよう
SECTION 02 リストレンダリングを使ってみよう
SECTION 03 ナビゲーションメニューを表示しよう
CHAPTER6　バインディングで動的にスタイルを変えよう
SECTION 01 スタイルバインディングで動的に見た目を変えよう
SECTION 02 クラスバインディングで動的に見た目を変えよう
CHPTER7　TODOアプリを作成しよう
SECTION 01 TODOアプリに必要な部品を確認しよう
SECTION 02 追加から一覧表示まで作成しよう
SECTION 03 機能を完成させよう
SECTION 04 位置や大きさを調整しよう
CHAPTER8　画像ビューワーを作成しよう
SECTION 01 画像ビューワーの部品を確認しよう
SECTION 02 コンポーネントを理解しよう
SECTION 03 コンポーネントで機能を追加しよう
SECTION 04 画像ビューワーを作成しよう
SECTION 05 アプリケーションを仕上げよう

Chapter 1　Vue.jsって何？
　01　Vue.jsって何？
　02　Vue.jsは「データと表示をつなげる仕組み」
　03　インストールしてみよう
　04　試してみよう
　05　まとめ
Chapter 2　データを表示するとき
　01　Vue インスタンスを作る：new Vue
　02　データをそのまま表示する：{{ データ }}
　03　使えるデータの種類
　04　まとめ
Chapter 3　属性を指定するとき
　01　要素の属性をデータで指定する：v-bind
　02　まとめ
Chapter 4　ユーザーの入力をつなぐとき
　01　入力フォームをデータとつなぐ：v-model
　02　まとめ
Chapter 5　ユーザーの操作をつなぐとき
　01　イベントとつなぐ：v-on
　02　まとめ
Chapter 6　条件とくり返しを使うとき
　01　条件によって表示する：v-if
　02　くり返し表示する：v-for
　03　まとめ
Chapter 7　Google Chartsと連動させてみよう
　01　Google Chartsとは？
　02　Google Chartsと連動させる
　03　まとめ
Chapter 8　データの変化を監視するとき
　01　データを使って別の計算をする：算出プロパティ
　02　データの変化を監視する：監視プロパティ
　03　まとめ
Chapter 9　Markdownエディタを作ってみよう
　01　Markdown エディタとは？
　02　Markdown エディタを作る
　03　まとめ
Chapter 10　アニメーションするとき
　01　表示／非表示時にアニメーションする：transition
　02　リストのトランジション：transition-group
　03　リストの並びが移動するトランジション
　04　まとめ
Chapter 11　ToDoリストを作ってみよう
　01　ToDoリストとは？
　02　仮データでToDoリストを表示する
　03　改良する：追加＆削除機能
　04　まとめ
Chapter 12　部品にまとめるとき
　01　部品にまとめる：コンポーネント
　02　コンポーネントのdata はfunction にする
　03　値を渡す：props
　04　まとめ
Chapter 13　JSONデータを表示させてみよう
　01　JSONファイルの読み込み方
　02　JSONデータを読み込んで、コンポーネントで並べる
　03　改良する：トランジションをつける
　04　まとめ

Chapter1 イントロダクション1-1 JavaScriptの歴史1-2 jQueryからJavaScriptフレームワークへ1-3 主なJavaScriptフレームワークとVue.jsChapter2 Vue.jsの基本2-1 Vue.jsを利用するための準備2-2 Vue.js理解のための3つの柱2-3 リアクティブデータChapter3 ディレクティブ3-1 イベント関連のディレクティブ3-2 フォーム関連のディレクティブ3-3 制御関連のディレクティブ3-4 データバインディング関連のディレクティブ3-5 より高度なイベント処理Chapter4 コンポーネント（基本）4-1 コンポーネントの基本4-2 コンポーネント間の通信4-3 コンポーネント配下のコンテンツをテンプレートに反映させる ～ スロットChapter5 コンポーネント（応用）5-1 動的コンポーネント5-2 v-modelによる双方向データバインディング5-3 アニメーション機能5-4 コンポーネントのその他の話題Chapter6 部品化技術6-1 ディレクティブの自作6-2 フィルターの自作6-3 プラグインの利用と自作6-4 ミックスインChapter7 Vue CLI7-1 Vue CLIの基本7-2 単一ファイルコンポーネント7-3 TypeScriptChapter8 ルーティング8-1 ルーティングとは？8-2 ルーティングの基本8-3 ルーター経由で情報を渡す手法8-4 マルチビュー、入れ子のビュー、ガードなどChapter9 Vuex9-1 Vuexとは？9-2 Vuexの基本9-3 Vuexストアを構成する要素9-4 巨大なストアを分割管理する ～ モジュールChapter10 テスト10-1 単体テスト10-2 E2EテストChapter11 応用アプリ11-1 アプリの構造を概観する11-2 アプリの共通機能を読み解く11-3 アプリの実装を理解する

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