目次
みんなのＶｕｅ．ｊｓ 現場で役立つ実践ノウハウ
- 野田 陽平（著）／ 門脇 恒平（著）／ 山田 敬美（著）／ 高橋 和樹（著）／ 藤川 淳史（著）／ 韓 徹（著）
-
●はじめに
■■■第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への展望
■最後に
●索引
●著者プロフィール
インターネット ランキング
インターネットのランキングをご紹介しますインターネット ランキング一覧を見る
前へ戻る
-
1位
-
2位
-
3位
-
4位
-
5位
-
6位
次に進む
