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

3,080円 (税込)

15pt

0件

◆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所属。