基本からしっかり学ぶフロントエンドテスト入門 [単行本]

基本からしっかり学ぶフロントエンドテスト入門 [単行本] の 商品概要

• 目次

  ■第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　まとめ

• 内容紹介

  AIによるコード生成が現実となった今、ソフトウェアテストの重要性はますます高まっています。AIエージェントの能力を最大限に発揮する上でも、テスト自動化などを含む開発基盤の整備は必須のものになってくるでしょう。本書では、フロントエンド開発の現場で効果的にテストを導入・運用するための力を身に付けることを目的に、フロントエンドテストの全体像を基礎から体系的に解説します。テストの意義や種類といった基礎から始まり、静的テスト、ロジックテスト、コンポーネントテスト、E2Eテスト、そしてビジュアルリグレッションテスト（VRT）まで幅広くカバー。さらに、Storybookを活用したテスト手法やAPI通信を含む実践的なケース、テスト戦略の設計、そして現場視点でのAI活用ノウハウまでを丁寧に解説します。フロントエンド開発におけるテストを本格的に学びたい方に最適な一冊です。

• 著者について

  永井 洸気 (ナガイ コウキ)
  Webフロントエンドエンジニア。複数会社でのWebサービス開発を経て、現職では民放公式テレビ配信サービスのWebフロントエンドチーム内製化を1人目のエンジニアとして推進。現在はPCおよびコネクテッドTV向けのフロントエンド開発に従事している。フロントエンドにおけるテスト設計・テスト戦略に強い関心を持ち、実務での知見をもとに本書を執筆。株式会社TVer所属。

基本からしっかり学ぶフロントエンドテスト入門 [単行本] の商品スペック