目次

• はじめに

第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への展望
• 最後に

• 索引
• 著者プロフィール