後悔しないためのVueコンポーネント設計

中島 直博

Jun 2019 · インプレス NextPublishing

About this ebook

本書はVue.jsを利用してシングルページアプリケーションの作成を考えているエンジニア、特にコンポーネントの設計や分類に悩んでいる方のためのガイドブックです。テストの書き方がわからない、コンポーネントのアンチパターンを知りたい、といった方のために、テストしやすい、またはしづらいコンポーネントとはなにか、単体テストの書き方などについて丁寧に解説しています。
〈本書の対象読者〉
・Vue.jsのコンポーネント設計に自身がない
・Vue.jsのコンポーネントの分類で悩んでいる
・Vue.jsのコンポーネントのアンチパターンを知りたい
・Vue.jsのコンポーネントのテストの書き方がわからない

【目次】
第1章　なぜテストを書くのか
1.1　なぜ「私」はテストを書くようになったのか
第2章　テストしやすいコンポーネントと、テストしづらいコンポーネント
2.1　テストしやすい/しづらいコンポーネント
2.2　機能を少なくシンプルに保つ
2.3　依存は少なく
2.4　なるべく状態を持たせない
2.5　propsの型指定で避けたほうがいい型
2.6　親子コンポーネント間のやりとり
2.7　Storeのgettersに注意
2.8　ライフサイクルフックに直接処理を書かない
第3章　コンポーネントを分類する
3.1　コンポーネントの種類を知る
3.2　２種類で足りる？
第4章　ディレクトリ構成とコンポーネントの分類
4.1　UIのサンプル
4.2　basicsディレクトリ
4.3　componentsディレクトリ
4.4　containersディレクトリ
4.5　pagesディレクトリ
第5章　なにをテストするか
5.1　テストの対象
5.2　コンポーネントのテスト項目
5.3　Vuexのテスト
5.4　どうやってテストするか
第6章　テスト実行環境の構築
6.1　Vue CLIを使った環境構築
6.2　Vue CLI UIを使う
6.3　テストのサンプル
第7章　テストを書く
7.1　サンプルアプリケーション
7.2　テストの実行方法
7.3　ディレクトリとファイル構成
7.4　Jestの使い方と機能
7.5　vue-test-utils
7.6　basicのテスト
7.7　componentのテスト
7.8　containerのテスト
7.9　pageのテスト

About the author

株式会社ピクセルグリッド所属のフロントエンド・エンジニア。v0.10からVue.jsを使い始め、業務/個人を問わず数多くのプロジェクトで採用経験あり。