みんなのVue.js―現場で役立つ実践ノウハウ [単行本]

みんなのVue.js―現場で役立つ実践ノウハウ [単行本] の 商品概要

• 目次

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

• 著者紹介（「BOOK著者紹介情報」より）（本データはこの書籍が刊行された当時に掲載されていたものです）

  野田 陽平(ノダ ヨウヘイ)
  株式会社プレイド所属のエンジニア。日本ＩＢＭソフトウェア開発研究所を経て、２０１５年より現職。ＣＸ（顧客体験）プラットフォームＫＡＲＴＥの開発をおこなう。プロダクトの機能開発に加え、採用、社内勉強会の立ち上げ、国際化、新プロダクトの開発などにも関わる
  
  門脇 恒平(カドワキ コウヘイ)
  株式会社プレイド所属のソフトウェアエンジニア。Ｗｅｂアプリケーションのバックエンド、フロントエンド、ｉＯＳ／Ａｎｄｒｏｉｄアプリケーション、クラウドインフラなど、幅広く開発を経験。現在は、エンジニアチームの生産性向上やプロダクト開発のプランニングにも取り組む
  
  山田 敬美(ヤマダ タカミ)
  株式会社プレイド所属のデザインエンジニア。Ｗｅｂ制作会社でのＣＳＳ設計やフロントエンド開発の経験を経て、現在はＫＡＲＴＥのＵＩ実装を担当するかたわら、デザインシステムの構築にも取り組み中
  
  高橋 和樹(タカハシ カズキ)
  デザイナー／マークアップエンジニア。１９８５年生まれ知床出身。制作会社、フリーランスを経て２０１８年より株式会社プレイド所属。ＵＩデザインとＨＴＭＬ／ＣＳＳコーディングを軸にさまざまなプロジェクトを経験。プレイドでは新機能のプロトタイピングや、情報設計、フロントエンドの実装を担当
  
  藤川 淳史(フジカワ アツシ)
  株式会社プレイド所属のソフトウェアエンジニア。新卒で株式会社プレイドに入社し、ＣＸ（顧客体験）プラットフォームであるＫＡＲＴＥのフロントエンド／バックエンド開発を担当。現在は、新規事業開発チームにて新プロダクトの設計と開発をおこなう
  
  韓 徹(カン テツ)
  株式会社プレイド所属のソフトウェアエンジニア。２０１８年より現職。プレイドではＣＸ（顧客体験）プラットフォームＫＡＲＴＥの開発をしている。現在はＫＡＲＴＥの管理画面の改善と新機能開発をおこなっている

• 著者について

  野田 陽平 (ノダ ヨウヘイ)
  ■野田 陽平（のだ ようへい）株式会社プレイド所属のエンジニア。日本IBMソフトウェア開発研究所を経て、2015年より現職。CX（顧客体験）プラットフォームKARTEの開発をおこなう。プロダクトの機能開発に加え、採用、社内勉強会の立ち上げ、国際化、新プロダクトの開発などにも関わる。共著に『Vue.js入門 基礎から実践アプリケーション開発まで』（技術評論社）がある。
  
  門脇 恒平 (カドワキ コウヘイ)
  ■門脇 恒平（かどわき こうへい）株式会社プレイド所属のソフトウェアエンジニア。Webアプリケーションのバックエンド、フロントエンド、iOS/Androidアプリケーション、クラウドインフラなど、幅広く開発を経験。現在は、エンジニアチームの生産性向上やプロダクト開発のプランニングにも取り組む。
  
  山田 敬美 (ヤマダ タカミ)
  ■山田 敬美（やまだ たかみ）株式会社プレイド所属のデザインエンジニア。Web制作会社でのCSS設計やフロントエンド開発の経験を経て、現在はKARTEのUI実装を担当するかたわら、デザインシステムの構築にも取り組み中。共著に『Sass入門 ～より効率的なCSSコーディング』（Gihyo Degital Publishing）などがある。
  
  高橋 和樹 (タカハシ カズキ)
  ■高橋 和樹（たかはし かずき）デザイナー/マークアップエンジニア。1985年生まれ知床出身。制作会社、フリーランスを経て2018年より株式会社プレイド所属。UIデザインとHTML/CSSコーディングを軸にさまざまなプロジェクトを経験。プレイドでは新機能のプロトタイピングや、情報設計、フロントエンドの実装を担当。
  
  藤川 淳史 (フジカワ アツシ)
  ■藤川 淳史（ふじかわ あつし）株式会社プレイド所属のソフトウェアエンジニア。新卒で株式会社プレイドに入社し、CX（顧客体験）プラットフォームであるKARTEのフロントエンド/バックエンド開発を担当。現在は、新規事業開発チームにて新プロダクトの設計と開発をおこなう。
  
  韓 徹 (カン テツ)
  ■韓 徹（かん てつ）株式会社プレイド所属のソフトウェアエンジニア。2018年より現職。プレイドではCX（顧客体験）プラットフォームKARTEの開発をしている。現在はKARTEの管理画面の改善と新機能開発をおこなっている。

みんなのVue.js―現場で役立つ実践ノウハウ [単行本] の商品スペック