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

１　Ｖｕｅ．ｊｓの基本を学ぶ（Ｖｕｅ．ｊｓとは？
Ｖｕｅ．ｊｓの第一歩
ｖ-ｍｏｄｅｌでフォームの使い勝手を向上　ほか）
２　Ｖｕｅ．ｊｓをＷｅｂサイトに組み込む（ＷｅｂサイトでのＶｕｅ．ｊｓの使いどころ
モーダルを作ってみよう
カルーセルを作ってみよう　ほか）
３　Ｊａｍｓｔａｃｋで静的サイトを作る（Ｎｕｘｔ．ｊｓの準備をする
Ｎｕｘｔ．ｊｓで静的なページを作る
部分的にＣＭＳ化する　ほか）

山田典明（ヤマダノリアキ）
株式会社博報堂プロダクツデザインスタジオ所属。Ｗｅｂフロントエンドのｄｅｖｅをｌｏｐする日々。ｓｈｅｌｌはｆｉｓｈ　ｓｈｅｌｌ、キーボードはＨａｐｐｙ　Ｈａｃｋｉｎｇ　Ｋｅｙｂｏａｒｄ（英語配列）を好んで使用

長澤賢（ナガサワサトシ）
札幌市で活動するフロントエンドエンジニア。２００７年に大学卒業後、某ゲーム会社にアルバイトとして勤務、着うたサイトの運用に携わる。２０１２年に札幌のＷｅｂ制作会社に勤務し、マークアップエンジニアとしてのキャリアを開始。その後いくつかのＷｅｂ制作会社を経験した後、２０１８年夏にＶｕｅ．ｊｓを使うプロジェクトにジョインし、Ｖｕｅ．ｊｓの面白さに目覚める。現在は札幌に拠点を持つＭａｋｅｒに勤務

関口勇樹（セキグチユウキ）
株式会社ＨＡＭＷＯＲＫＳ所属。札幌を拠点に活動しているフロントエンジニア。Ｍｏｖａｂｌｅ　ＴｙｐｅのＣＭＳテンプレート実装とＶｕｅ．ｊｓ／Ｎｕｘｔ．ｊｓ／Ｒｅａｃｔ／Ｎｅｘｔ．ｊｓを使用したＷｅｂアプリ／Ｗｅｂサイトの制作が主な業務（本データはこの書籍が刊行された当時に掲載されていたものです）

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

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

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

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

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

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

●はじめに
■■■第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への展望
■最後に
●索引
●著者プロフィール

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　まとめ

●はじめに
■■■第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への展望
■最後に
●索引
●著者プロフィール