目次

第1章　フロントエンドテストの基礎知識

• 1.1　ソフトウェア開発におけるテストとは
  • 1.1.1　自動テストの現在地
  • 1.1.2　自動テストの目的
  • 1.1.3　自動テストはなぜ難しいのか
• 1.2　フロントエンドとテストの変遷
  • 1.2.1　フロントエンド技術の移り変わり
  • 1.2.2　フロントエンドテストの変遷
  • 1.2.3　フロントエンドテストの現在
  • 1.2.4　本書の構成
• 1.3　テストの分類と戦略の考え方
  • 1.3.1　テストの分類
  • 1.3.2　テストピラミッドとテスティングトロフィー
  • 1.3.3　テストが与える自信とコストのバランス
• 1.4　まとめ

第2章　開発環境のセットアップ

• 2.1　本書の開発環境
  • 2.1.1　必要な前提環境
  • 2.1.2　本書で使用するツールの全体像
• 2.2　エディタと拡張機能
  • 2.2.1　推奨する拡張機能
• 2.3　サンプルプロジェクトのセットアップ
  • 2.3.1　プロジェクトの取得と起動
  • 2.3.2　プロジェクト構成
  • 2.3.3　一からプロジェクトを作成する場合
• 2.4　まとめ

第3章　静的テスト

• 3.1　静的テストとは
  • 3.1.1　静的テストの概要
  • 3.1.2　静的テストの目的
  • 3.1.3　静的テストの特徴
  • 3.1.4　本章の解説内容
• 3.2　Prettier［コードフォーマッター］
  • 3.2.1　Prettierとは
  • 3.2.2　Prettierの導入
  • 3.2.3　Prettierの実行
  • 3.2.4　Prettierの設定ファイル
  • 3.2.5　VS Codeへの適用
  • 3.2.6　.prettierignore
• 3.3　ESLint［リンター］
  • 3.3.1　ESLintとは
  • 3.3.2　ESLintの特徴
  • 3.3.3　ESLintの導入
  • 3.3.4　ESLintの設定ファイル
  • 3.3.5　ESLintの実行
  • 3.3.6　VS Codeへの適用
  • 3.3.7　ESLintとPrettierの併用
• 3.4　Stylelint［CSSリンター］
  • 3.4.1　Stylelintとは
  • 3.4.2　Stylelintの特徴
  • 3.4.3　Stylelintの導入
  • 3.4.4　Stylelintの設定ファイル
  • 3.4.5　Stylelintの実行
  • 3.4.6　VS Codeへの適用
• 3.5　Biome［フォーマッター＋リンター］
  • 3.5.1　Biomeとは
  • 3.5.2　Biomeの特徴
  • 3.5.3　Biomeの導入
  • 3.5.4　Biomeの実行
  • 3.5.5　Prettier・ESLintからの移行
  • 3.5.6　Biomeを導入する際の注意点
• 3.6　まとめ

第4章　ロジックテスト

• 4.1　ロジックテストとは
  • 4.1.1　ロジックテストの概要
  • 4.1.2　ロジックテストの目的
  • 4.1.3　ロジックテストの特徴
• 4.2　テスト環境とツールセットアップ
  • 4.2.1　テストランナーの選定とVitestの特徴
  • 4.2.2　Vitestの導入
  • 4.2.3　TypeScriptの対応
  • 4.2.4　jsdom環境の準備
• 4.3　純粋関数のロジックテスト
  • 4.3.1　テストケースの構造（Arrange-Act-Assert）
  • 4.3.2　エッジケースと境界値の洗い出し
  • 4.3.3　実践：純粋関数のテストコード例
• 4.4　カスタムHookのテスト
  • 4.4.1　カスタムHookテストの前提知識
  • 4.4.2　基本的なカスタムHookのテスト
  • 4.4.3　非同期処理を含むHookのテスト
• 4.5　テストダブルの役割と使い分け
  • 4.5.1　外部依存をテストで切り離す必要性
  • 4.5.2　テストダブルの種類
  • 4.5.3　VitestのモックAPI（vi.fn/vi.spyOn）
  • 4.5.4　外部依存をモックしたテストの実例
• 4.6　まとめ

第5章　コンポーネントテスト

• 5.1　コンポーネントテストとは
  • 5.1.1　コンポーネントテストの特徴
  • 5.1.2　コンポーネントテストの観点
  • 5.1.3　コンポーネントテストの種類
• 5.2　テスト環境とツールセットアップ
  • 5.2.1　パッケージのインストール
  • 5.2.2　セットアップファイルの作成
  • 5.2.3　Vitestの設定ファイルの変更
• 5.3　レンダリングテスト
  • 5.3.1　スモークテストの実行
  • 5.3.2　propsによって表示が変わるコンポーネントのテスト
  • 5.3.3　非同期処理を含むコンポーネントのテスト
• 5.4　インタラクションテスト
  • 5.4.1　userEventを用いた基本操作のテスト
  • 5.4.2　フォーム入力とバリデーションのテスト
• 5.5　まとめ

第6章　E2E（End-to-End）テスト

• 6.1　E2Eテストとは
  • 6.1.1　E2Eテストの概要
  • 6.1.2　E2Eテストの目的
  • 6.1.3　E2Eテストの特徴
• 6.2　テスト環境とツールセットアップ
  • 6.2.1　E2Eテストツールの選定とPlaywrightの特徴
  • 6.2.2　Playwrightの導入
  • 6.2.3　基本設定とブラウザの選択
• 6.3　基本的なE2Eテストの書き方
  • 6.3.1　最初のE2Eテスト
  • 6.3.2　要素の取得とアサーション
  • 6.3.3　ユーザー操作のシミュレーション
• 6.4　実践的なE2Eテスト
  • 6.4.1　フォーム送信のテスト
  • 6.4.2　非同期処理を含むテスト
• 6.5　Page Object Modelパターン
  • 6.5.1　Page Object Modelとは
  • 6.5.2　Page Objectの実装
  • 6.5.3　Page Objectを使ったテストの改善
• 6.6　E2Eテストのベストプラクティス
  • 6.6.1　テストケースの設計
  • 6.6.2　安定したテストの書き方
  • 6.6.3　デバッグとトラブルシューティング
• 6.7　まとめ

第7章　Storybookとビジュアルリグレッションテスト（VRT）

• 7.1　Storybookとは
  • 7.1.1　Storybookの概要
  • 7.1.2　Storybookの導入
  • 7.1.3　Storyファイルの基本
  • 7.1.4　Storybookの起動
• 7.2　ビジュアルリグレッションテスト（VRT）とは
  • 7.2.1　VRTの概要
  • 7.2.2　VRTの目的
  • 7.2.3　VRTの特徴
• 7.3　Chromaticの導入とセットアップ
  • 7.3.1　Chromaticとは
  • 7.3.2　Chromaticのアカウント作成とプロジェクト登録
  • 7.3.3　プロジェクトへのChromatic導入
• 7.4　基本的なVRTの実行
  • 7.4.1　StorybookのStoryとスナップショット
  • 7.4.2　ベースラインの概念
  • 7.4.3　変更の検出と差分の確認
  • 7.4.4　変更の承認・却下ワークフロー
• 7.5　実践的なVRT
  • 7.5.1　レスポンシブデザインのテスト
  • 7.5.2　ダークモード／ライトモードのテスト
  • 7.5.3　動的コンテンツへの対応
• 7.6　CI/CDへの統合
  • 7.6.1　GitHub ActionsでのChromatic実行
  • 7.6.2　プルリクエストとの連携
  • 7.6.3　ブランチ戦略とベースライン管理
  • 7.6.4　TurboSnapによる高速化
• 7.7　まとめ

第8章　Storybookによるコンポーネントテスト

• 8.1　Storybookによるコンポーネントテストとは
  • 8.1.1　Storybookを利用するメリット
  • 8.1.2　jsdomベースのテストとの違い
  • 8.1.3　実ブラウザでテストするメリット
• 8.2　テスト環境のセットアップ
  • 8.2.1　@storybook/addon-vitestのインストール
  • 8.2.2　vitest.config.tsの設定
  • 8.2.3　ブラウザプロバイダー（Playwright）の設定
  • 8.2.4　セットアップファイルの作成
• 8.3　Storyを使った基本的なテスト
  • 8.3.1　Storyがテストになるまでの流れ
  • 8.3.2　Storyを活用したスモークテストの広がり
  • 8.3.3　テストの実行方法
• 8.4　play関数を使ったインタラクションテスト
  • 8.4.1　play関数の基本
  • 8.4.2　第5章のコンポーネントテストとの違い
• 8.5　まとめ
  • 8.5.1　テストの種類と使い分け

第9章　API通信を含むコンポーネントテスト

• 9.1　API通信を含むコンポーネントのテスト戦略
  • 9.1.1　なぜAPIモックが必要なのか
  • 9.1.2　MSW（Mock Service Worker）の概要
• 9.2　MSWを使ったAPIモックの実装
  • 9.2.1　MSWのセットアップ
  • 9.2.2　ハンドラーの定義
  • 9.2.3　StorybookでのMSWの設定
• 9.3　API通信を含むStoryとテストの実装
  • 9.3.1　データ取得コンポーネントのStory作成
  • 9.3.2　ローディング状態のテスト
  • 9.3.3　成功時のレスポンスのテスト
  • 9.3.4　エラーハンドリングのテスト
• 9.4　実践的なシナリオとベストプラクティス
  • 9.4.1　フォーム送信とAPI連携のテスト
  • 9.4.2　楽観的更新（Optimistic Update）のテスト
  • 9.4.3　APIモックのメンテナンス性を高める工夫
• 9.5　まとめ

第10章　実践的なテスト戦略

• 10.1　テスト戦略の考え方
  • 10.1.1　なぜテスト戦略が必要なのか
  • 10.1.2　プロダクトの性質を理解する
  • 10.1.3　チームの状況を理解する
• 10.2　アーキテクチャに基づくコンポーネントテスト戦略
  • 10.2.1　コンポーネントツリーとテスト対象の選定
  • 10.2.2　Feature Sliced Designを例にしたテスト設計
  • 10.2.3　テストの重複を避けるための考え方
• 10.3　テストの種類と配分の決め方
  • 10.3.1　静的テスト・ロジックテストの位置づけ
  • 10.3.2　コンポーネントテストとE2Eテストの使い分け
  • 10.3.3　VRTの導入判断
• 10.4　まとめ

第11章　AIを活用したテストコード生成

• 11.1　AI駆動開発とテストの現在
  • 11.1.1　近年のAIを使った開発の潮流
  • 11.1.2　テストコード生成におけるAIの活用場面
  • 11.1.3　Claude Codeとは
• 11.2　テストコードを書くためのプロンプト設計
  • 11.2.1　良いプロンプトの条件
  • 11.2.2　テスト種別ごとのプロンプトパターン
  • 11.2.3　コンテキストを与えるプロンプトの工夫
• 11.3　SkillsとCLAUDE.mdによる品質向上
  • 11.3.1　Claude CodeのSkillsとは
  • 11.3.2　テスト専用Skillの整備
  • 11.3.3　CLAUDE.mdでプロジェクトルールをAIに伝える
  • 11.3.4　Hooksを活用したテストワークフローの自動化
• 11.4　チームでの運用とベストプラクティス
  • 11.4.1　AIが生成したテストコードのレビュー方針
  • 11.4.2　チーム共通のSkills・CLAUDE.mdの管理
  • 11.4.3　AI活用時の注意点とトレードオフ
• 11.5　まとめ