翔泳社の公式通販SEshopは全国送料無料!
ヘルプ 新規会員登録 ログイン
SEshop

フロントエンド開発のためのテスト入門 今からでも知っておきたい自動テスト戦略の必須知識【PDF版】

吉井 健文(著)

商品番号
178630
販売状態
発売中
納品形態
会員メニューよりダウンロード
発売日
2023年04月24日
ISBN
9784798178639
データサイズ
約22.5MB
制限事項
印刷可・テキストのコピー可
キーワード
開発  アプリ開発  電子書籍【PDF版】  UI・UX

3,080円(税込)(本体2,800円+税10%)
送料無料

280pt (10%)
ポイントの使い方はこちら

在庫あり

初回購入から使えるポイント500円分プレゼント

紙の書籍はこちら

※1点の税込金額となります。 複数の商品をご購入いただいた場合のお支払金額は、 単品の税込金額の合計額とは異なる場合がございますので、予めご了承ください。

  • 本製品は電子書籍【PDF版】です。
  • ご購入いただいたPDFには、購入者のメールアドレス、および翔泳社独自の著作権情報が埋め込まれます。
    PDFに埋め込まれるメールアドレスは、ご注文時にログインいただいたアドレスとなります。
    Amazon Payでのお支払いの場合はAmazonアカウントのメールアドレスが埋め込まれます。
  • 本製品を無断で複製、転載、譲渡、共有および販売を行った場合、法律により罰せられる可能性がございます。
  • ご購入の前に必ずPDF利用案内をお読みください。

現場で役立つテスト手法を基礎から解説!
「どこから」「どうやって」手をつければよいかわかる

本書は、Webアプリケーション開発に携わるフロントエンドエンジニアを対象に、「テスト」の基本知識と具体的な実践手法を解説した書籍です。

高度な機能を画面上で提供する現代のWebアプリケーションでは、その品質や保守性を担保するうえで、フロントエンドにおける自動テストが重要な役割を持ちます。

本書はそんな「フロントエンドにおけるテスト」をテーマに、基本的なテストコードの書き方や、目的に応じたテスト手法・ツールの使い分け方を解説します。「UIコンポーネントテスト」や「ビジュアルリグレッションテスト」など、フロントエンドならではの具体的なテスト課題に重点を置いており、基本から実践まで必要な知識を体系的に身につけることができます。

解説はサンプルWebアプリケーション(Next.js)を舞台にしたハンズオン形式で進みます。「アクセシビリティの改善」や「CIでのテスト実行」といったトピックもフォローしているので、開発現場で役立つ実践的な知識・ノウハウがきちんと身につく一冊です。

■こんな方におすすめ
・テストの必要性は理解しているが着手できていない
・それなりに開発経験はあるがテストを書いたことがない
・現在取り組んでいるテスト手法が最適かわからない

■本書で取り上げるテストツール
Jest/Testing Library/Storybook/reg-suit/Playwright...etc

■目次
第1章 テストの目的と障壁
第2章 テスト手法とテスト戦略
第3章 はじめの単体テスト
第4章 モック
第5章 UIコンポーネントテスト
第6章 カバレッジレポートの読み方
第7章 Webアプリケーション結合テスト
第8章 UIコンポーネントエクスプローラー
第9章 ビジュアルリグレッションテスト
第10章 E2E テスト

【ダウンロード付録】
付録A GitHub Actionsで実行するUIコンポーネントテスト
付録B GitHub Actionsで実行するE2Eテスト

PDF版のご利用方法

  1. ご購入後、SEshopにログインし、会員メニューに進みます。
  2. ご購入電子書籍およびデータ > [ご購入電子書籍およびダウンロードデータ一覧]をクリックします。
  3. 購入済みの電子書籍のタイトルが表示されますので、リンクをクリックしてダウンロードしてください。
  4. PDF形式のファイルを、お好きな場所に保存してください。
  5. 端末の種類を問わず、ご利用いただけます。
画像01
画像02

第1章 テストの目的と障壁
1-1 本書の構成
1-2 テストを書く目的
1-3 テストを書く障壁

第2章 テスト手法とテスト戦略
2-1 範囲と目的で考えるテスト
2-2 フロントエンドテストの範囲
2-3 フロントエンドテストの目的
2-4 テスト戦略モデル
2-5 テスト戦略計画

第3章 はじめの単体テスト
3-1 環境構築
3-2 テストの構成要素
3-3 テストの実行方法
3-4 条件分岐
3-5 閾値と例外処理
3-6 用途別のマッチャー
3-7 非同期処理のテスト

第4章 モック
4-1 モックを使用する目的
4-2 モックモジュールを使ったスタブ
4-3 Web APIのモック基礎
4-4 Web APIのモック生成関数
4-5 モック関数を使ったスパイ
4-6 Web APIの詳細なモック
4-7 現在時刻に依存したテスト

第5章 UIコンポーネントテスト
5-1 UIコンポーネントテストの基礎知識
5-2 必要なライブラリのインストール
5-3 はじめのUIコンポーネントテスト
5-4 アイテム一覧UIコンポーネントテスト
5-5 インタラクティブなUIコンポーネントテスト
5-6 ユーティリティ関数を使用したテスト
5-7 非同期処理を含むUIコンポーネントテスト
5-8 UIコンポーネントのスナップショットテスト
5-9 暗黙のロールとアクセシブルネーム

第6章 カバレッジレポートの読み方
6-1 カバレッジレポートの概要
6-2 カバレッジレポートの読み方
6-3 カスタムレポーター

第7章 Webアプリケーション結合テスト
7-1 Next.jsアプリケーション開発と結合テスト
7-2 React Contextの結合テスト
7-3 Next.js Routerの表示結合テスト
7-4 Next.js Routerの操作結合テスト
7-5 Formを扱いやすくするReact Hook Form
7-6 Formのバリデーションテスト
7-7 Web APIレスポンスをモックするMSW
7-8 Web APIの結合テスト
7-9 画像アップロードの結合テスト

第8章 UIコンポーネントエクスプローラー
8-1 Storybookの基本
8-2 Storybookの必須アドオン
8-3 Context APIに依存したStoryの登録
8-4 Web APIに依存したStoryの登録
8-5 Next.js Routerに依存したStoryの登録
8-6 Play functionを利用したインタラクションテスト
8-7 addon-a11yを利用したアクセシビリティテスト
8-8 StorybookのTest runner
8-9 Storyを結合テストとして再利用する

第9章 ビジュアルリグレッションテスト
9-1 ビジュアルリグレッションテストの必要性
9-2 reg-cliで画像比較をする
9-3 Storycapの導入
9-4 reg-suitを導入する
9-5 外部ストレージサービスを準備する
9-6 GitHub Actionsにreg-suitを連携する
9-7 ビジュアルリグレッションテストを活用した積極的なリファクタリング

第10章 E2E テスト
10-1 E2Eテストの概要
10-2 Playwrightのインストールと基礎
10-3 テスト対象アプリケーションの概要
10-4 開発環境でE2Eテストを実行する
10-5 Prismaの簡単な紹介とテスト準備
10-6 ログイン機能のE2Eテスト
10-7 プロフィール機能のE2Eテスト
10-8 Like機能のE2Eテスト
10-9 新規投稿ページのE2Eテスト
10-10 記事編集ページのE2Eテスト
10-11 投稿記事一覧ページのE2Eテスト
10-12 Flakyテストと向き合う

【ダウンロード付録】
付録A GitHub Actionsで実行するUIコンポーネントテスト
付録B GitHub Actionsで実行するE2Eテスト

各種問い合わせは以下のリンクからご連絡ください

関連商品

色の物語 黒【PDF版】

3,300円(税込)

2024.06.17発売

色の物語 黒【紙+PDFセット】

6,600円(税込)

2024.06.17発売

おすすめ特集

法人・教育機関のお客様へ

【法人・教育機関のお客様へ】新年度の大口注文・お見積りなど、お気軽にご相談ください

Webデザイン特集

デザインやコーディングなど、Webデザインに役立つスキルが身につく書籍を揃えました

生成AI特集

テキスト生成、画像生成、動画生成など、生成AI活用のスキルが身につく本をご紹介

新社会人におすすめの本

新社会人の役に立つスキルが身につく本。ビジネスパーソンとしてスタートダッシュを切ろう!

プログラミング教育の本

小学校から必修化!人気の『ルビィのぼうけん』ほかプログラミング教育の本はこちら

翔泳社のセミナー・講座

開発・ビジネス・マーケティング・EC運営・営業支援など、幅広いジャンルの講座を開催

特集をもっと見る