みんなのVue.js（技術評論社） [電子書籍]

みんなのVue.js（技術評論社） [電子書籍] の 商品概要

• 本書は，日本国内で爆発的な人気を誇るVue.jsの最新ノウハウ・アイデアを1つにまとめた新しい「Vue本」です。アプリケーション開発のためのルーティング・レンダリングから，CSS設計，状態管理，コンポーネント開発，パフォーマンス改善まで，Vue.jsをプロジェクトで使用するうえのさまざまな開発上の観点をまとめつつ，現場のエンジニアによる解決方法をまとめています。
  さらに，Vue.jsコアチームメンバーでもある川口和也（@kazu_pon）氏のインタビューを収録。川口氏が開発するVue18nや，企業に所属しながらのOSS活動についてもたっぷりと語っていただきました。Vue.jsエンジニア必携の1冊です。
  

• 目次

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

みんなのVue.js（技術評論社） [電子書籍] の商品スペック