あらすじ
◆Webフロントエンド開発の最新テスト手法を基本から解説！◆
AIによるコード生成が現実となった今、ソフトウェアテストの重要性はますます高まっています。AIエージェントの能力を最大限に発揮する上でも、テスト自動化などを含む開発基盤の整備は必須のものになってくるでしょう。本書では、フロントエンド開発の現場で効果的にテストを導入・運用するための力を身に付けることを目的に、フロントエンドテストの全体像を基礎から体系的に解説します。テストの意義や種類といった基礎から始まり、静的テスト、ロジックテスト、コンポーネントテスト、E2Eテスト、そしてビジュアルリグレッションテスト（VRT）まで幅広くカバー。さらに、Storybookを活用したテスト手法やAPI通信を含む実践的なケース、テスト戦略の設計、そして現場視点でのAI活用ノウハウまでを丁寧に解説します。フロントエンド開発におけるテストを本格的に学びたい方に最適な一冊です。
■こんな方におすすめ
・フロントエンド開発における最新のテスト手法やテスト設計について学びたい人
■目次
第1章 フロントエンドテストの基礎知識
・1.1 ソフトウェア開発におけるテストとは
・1.2 フロントエンドとテストの変遷
・1.3 テストの分類と戦略の考え方
第2章 開発環境のセットアップ
・2.1 本書の開発環境
・2.2 エディタと拡張機能
・2.3 サンプルプロジェクトのセットアップ
第3章 静的テスト
・3.1 静的テストとは
・3.2 Prettier［コードフォーマッター］
・3.3 ESLint［リンター］
・3.4 Stylelint［CSSリンター］
・3.5 Biome［フォーマッター＋リンター］
第4章 ロジックテスト
・4.1 ロジックテストとは
・4.2 テスト環境とツールセットアップ
・4.3 純粋関数のロジックテスト
・4.4 カスタムHookのテスト
・4.5 テストダブルの役割と使い分け
第5章 コンポーネントテスト
・5.1 コンポーネントテストとは
・5.2 テスト環境とツールセットアップ
・5.3 レンダリングテスト
・5.4 インタラクションテスト
第6章 E2E（End-to-End）テスト
・6.1 E2Eテストとは
・6.2 テスト環境とツールセットアップ
・6.3 基本的なE2Eテストの書き方
・6.4 実践的なE2Eテスト
・6.5 Page Object Modelパターン
・6.6 E2Eテストのベストプラクティス
第7章 Storybookとビジュアルリグレッションテスト（VRT）
・7.1 Storybookとは
・7.2 ビジュアルリグレッションテスト（VRT）とは
・7.3 Chromaticの導入とセットアップ
・7.4 基本的なVRTの実行
・7.5 実践的なVRT
・7.6 CI/CDへの統合
第8章 Storybookによるコンポーネントテスト
・8.1 Storybookによるコンポーネントテストとは
・8.2 テスト環境のセットアップ
・8.3 Storyを使った基本的なテスト
・8.4 play関数を使ったインタラクションテスト
第9章 API通信を含むコンポーネントテスト
・9.1 API通信を含むコンポーネントのテスト戦略
・9.2 MSWを使ったAPIモックの実装
・9.3 API通信を含むStoryとテストの実装
・9.4 実践的なシナリオとベストプラクティス
第10章 実践的なテスト戦略
・10.1 テスト戦略の考え方
・10.2 アーキテクチャに基づくコンポーネントテスト戦略
・10.3 テストの種類と配分の決め方
第11章 AIを活用したテストコード生成
・11.1 AI駆動開発とテストの現在
・11.2 テストコードを書くためのプロンプト設計
・11.3 SkillsとCLAUDE.mdによる品質向上
・11.4 チームでの運用とベストプラクティス
■著者プロフィール
永井洸気：Webフロントエンドエンジニア。複数会社でのWebサービス開発を経て、現職では民放公式テレビ配信サービスのWebフロントエンドチーム内製化を1人目のエンジニアとして推進。現在はPCおよびコネクテッドTV向けのフロントエンド開発に従事している。フロントエンドにおけるテスト設計・テスト戦略に強い関心を持ち、実務での知見をもとに本書を執筆。株式会社TVer所属。
感情タグBEST3
Posted by ブクログ
基本からしっかり学ぶフロントエンドテスト入門
著：永井 洸気
出版社：技術評論社
突然、市場に投入される新技術も、長い目でみて、流れの一つとして振り返れば、それが当時どういう意味をもって登場したのかが分かる場合もある。
フロントエンド、いわゆる、システムの表面である画面について、テスト方法とともに、まず、その変遷が提示される。ITシステムには、機能の利便性、保守などの容易性といった使いかってを改善する流れと、フレームワークや、ライブラリーの活用といったシステム開発の効率化という流れがある
そして、各論へはいっていく。最後は、AI駆動開発（仕様駆動開発:SDD）でのテストの考察に行き着く。
テストの概要と、SDDの観点は以下のとおりです。
■フロントエンドの変遷
1995 JavaScript / Netscape
2000 HTML/CSS
2000 Ajax,JQuery,IE,Saari,Firefox 等のクロスブラウザ
API,Javascriptの積極活用,UIの複雑化、UX観点の導入
2007 iPhone モバイル端末からWeb閲覧
2010 Backbone.js,AngularJS などのフレームワークの導入 SPA開発手法の登場
Webpack ツールチェーンの整備
React,Vue,Angular 等のUIライブラリの台頭
DOMからReact＋仮想DOMへ
2020 サーバサイドレンダリング（SSR)、静的サイト生成（SSG)
Next.js、Nuxt の採用
■フロントエンドテストの変遷
2000 HTML/CSS ブラウザ上で手動でのテスト
2000後半 jQuery、QUnit
2010 CircleCI,TravisCI コンポーネント単位へ
enzyme レンダリングのテスト
2014 Jest/Facebook
2016-17 パフォーマンステスト、スナップショットが、Jestに実装
■フロントエンドテストの現在
①静的テスト ESLint, biome 等 コードを実行せずに、バグ検出を行う
②ロジックテスト Vitest UIに依存しないロジック部分を抽出してテストを行う
③コンポーネントテスト Stoybook コンポーネントがちゃんとレンダリングされるかのチェック
④E2Eテスト Playwright,Gypress ブラウザ上で、アプリ全体の動作検証を行う
⑤VRT:ビジュアルリグレッションテスト Storybook,Chromatic 意図しないデザインのくずれを検証
⑥APIモック MSW テストダブル スタブ、スパイ、モック、フェイク テスト中に仮のオブジェクトを使ってテスト
■AIコーディング支援ツールの変遷
① 2021/06 GitHub Copilot プレビュー
② 2022/06 GitHub Copilot 一般提供
③ 2022/11 ChatGPT 一般公開
④ 2023 GitHub Copilot Chat , Cursor 公開、各種LLMのAPI公開
⑤ 2024 Windsurfリリース、エージェント型ツール
⑥ 2025/02 Claude Code リサーチレビュー
⑦ 2025/05 Claude Code 一般提供 タスクの実行がメイン
■AIが生成したテストコードのレビュー方針
①テストが本当に意味のある検証をしているか
②モックの範囲は適切か
③テストコードが読みやすいか、他のメンバーが読んで理解できるか
④テストケースが、異常値、境界値などを網羅しているか
AIをつかったテストコードの生成＋テスト駆動開発を組み合わせる
目次
はじめに
対象読者
前提知識
本書の構成
サンプルコードについて
本書で使用するツールのバージョン
表記について
第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 まとめ
著者プロファイル
索引
ISBN：9784297157043
判型：B5変
ページ数：328ページ
定価：2800円（本体）
2026年07月09日初版第１刷発行
