著者紹介

内容

目次

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