みんなのVue.js
書籍情報
発売日 : 2021年02月18日
著者／編集 : 野田 陽平/門脇 恒平/山田 敬美/高橋 和樹/藤川 淳史/韓 徹
出版社 : 技術評論社
発行形態 : 単行本
書籍説明
目次
●はじめに
■■■第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章 大規模なアプリケーションにも耐えられるルーティングとレンダリング
■■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への展望
■最後に
●索引
●著者プロフィール
著者情報
野田 陽平
■野田 陽平（のだ ようへい）株式会社プレイド所属のエンジニア。日本IBMソフトウェア開発研究所を経て、2015年より現職。CX（顧客体験）プラットフォームKARTEの開発をおこなう。プロダクトの機能開発に加え、採用、社内勉強会の立ち上げ、国際化、新プロダクトの開発などにも関わる。共著に『Vue.js入門 基礎から実践アプリケーション開発まで』（技術評論社）がある。
野田, 陽平
門脇 恒平
■門脇 恒平（かどわき こうへい）株式会社プレイド所属のソフトウェアエンジニア。Webアプリケーションのバックエンド、フロントエンド、iOS/Androidアプリケーション、クラウドインフラなど、幅広く開発を経験。現在は、エンジニアチームの生産性向上やプロダクト開発のプランニングにも取り組む。
門脇, 恒平
山田 敬美
■山田 敬美（やまだ たかみ）株式会社プレイド所属のデザインエンジニア。Web制作会社でのCSS設計やフロントエンド開発の経験を経て、現在はKARTEのUI実装を担当するかたわら、デザインシステムの構築にも取り組み中。共著に『Sass入門 ～より効率的なCSSコーディング』（Gihyo Degital Publishing）などがある。
山田, 敬美
高橋 和樹
■高橋 和樹（たかはし かずき）デザイナー/マークアップエンジニア。1985年生まれ知床出身。制作会社、フリーランスを経て2018年より株式会社プレイド所属。UIデザインとHTML/CSSコーディングを軸にさまざまなプロジェクトを経験。プレイドでは新機能のプロトタイピングや、情報設計、フロントエンドの実装を担当。
高橋, 和樹, 1985-
藤川 淳史
■藤川 淳史（ふじかわ あつし）株式会社プレイド所属のソフトウェアエンジニア。新卒で株式会社プレイドに入社し、CX（顧客体験）プラットフォームであるKARTEのフロントエンド/バックエンド開発を担当。現在は、新規事業開発チームにて新プロダクトの設計と開発をおこなう。
藤川, 淳史
韓 徹
■韓 徹（かん てつ）株式会社プレイド所属のソフトウェアエンジニア。2018年より現職。プレイドではCX（顧客体験）プラットフォームKARTEの開発をしている。現在はKARTEの管理画面の改善と新機能開発をおこなっている。
韓, 徹
