JavaScript

Playwrightを使ったE2Eテストの基本を解説し、インストール、サーバー設定、テスト作成、UIモード、Codegenによる生成手順を紹介します。

第1回から第14回までを振り返り、TDD導入前後のコード品質の変化と、E2Eや視覚的テストなど今後の学習テーマを紹介してシリーズを締めくくります。

テスト作成のコストと効果、CI/CDの自動化、レガシーコードへの段階的なTDD導入について解説します。

単体、統合、E2Eテストの違いと特徴を比べ、Reactで効果的な戦略となるTesting Trophyを解説します。

内部実装が変わっても壊れない堅牢なテストの作り方を学びます。実装の詳細を避け、ユーザーの行動に焦点を当てる方法を解説します。

テストが難しくなるコンポーネントの特徴を分析し、関心の分離やProviderの扱いを通じて、テストしやすい構造に改善する方法を学びます。

userEvent.typeでユーザーの文字入力を再現し、必須項目が未入力の場合に表示されるエラーメッセージ（Validation）を検証する方法を学びます。

実サーバーなしでネットワーク要求を捕捉してテストできるMSW(Mock Service Worker)の導入と活用、エラーケースのテスト方法を解説します。

API呼び出しなどの非同期処理をテストする方法を学びます。findByクエリでLoading、Success、Errorの状態変化を検出して検証します。

Reactのカスタムフックをコンポーネントから分離し、renderHookとactでテストする方法を解説します。

useStateで管理する状態に応じて画面が変わる条件付きレンダリングをテストします。getByとqueryByの違いを理解し、ログで状態変化を追跡する方法を学びます。

テストを安全網としてコンポーネントを分割し、構造を改善するリファクタリングを解説します。screen.debug()を使ってテスト中の状態をログで確認する方法も紹介します。

ReactのCounterコンポーネントを例に、最小限のUI実装からuseStateによる状態管理までをTDDで進めます。

実装の詳細ではなく、ユーザーの視点でテストする方法を学びます。アクセシビリティクエリ(getByRole)を使い、失敗するテスト(Red)を書いてみます。

ViteでReactプロジェクトを作成し、VitestとReact Testing Libraryを導入してTDD環境を構築します。

フロントエンドでテストが大切な理由、ReactでTDDを導入する利点、テストすべき範囲を説明します。

ローカルストレージとセッションストレージを、データの永続性とスコープから比較します。Cookieとの違いと、面接でよく聞かれる質問も取り上げます。

JavaScriptのthisが決まる4つのルールと、例外となるアロー関数の仕組みを解説します。

JavaScriptの重要概念であるクロージャ、ホイスティング、イベントバブリングを解説します。スコープチェーン、TDZ、イベント伝播と委譲、面接でよく問われるポイントも学びます。

コーディングテスト向けJavaScriptシリーズ第2回。配列（Array）の主要メソッド、オブジェクト（Object）、SetとMapを詳しく解説し、簡潔なコードを書くコツも紹介します。

コーディングテストに向けたJavaScript基礎シリーズ第1回。変数や基本演算子から、文字列の切り出し、連結、検索、変換など必須の文字列処理と、数値・配列の基本操作を例とともに解説します。