React

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を導入する利点、テストすべき範囲を説明します。

Next.js 16で使えるReact 19のView Transitions、Server Actionsのセキュリティ、useOptimisticなどを紹介します。

React2Shellの原因をシリアライズとリモートコード実行の観点から解説し、React・Next.jsの影響バージョンと必要な緊急パッチ、更新コマンドを紹介します。

To-Doリストを作りながら、TypeScriptでのストア設計、フォームの状態管理、効率的なコンポーネント構成を学びます。

TypeScriptでcreateを理解し、selectorとshallowによる最適化やget・set・subscribeなどのストア操作を学びます。

Reactの状態管理に役立つZustandを、ReduxやContext APIと比較し、カウンターの例から基本操作を学びます。

React Queryのクエリ処理をカスタムフックへ抽象化し、複数のページやコンポーネントで再利用する方法を実例で説明します。

Reactで非同期APIデータを効率的に扱うため、TanStack Queryの導入、基本操作、高度なキャッシュ戦略を例とともに紹介します。

React、Expo、React Nativeで、i18nextの初期化、言語パック、変数、書式設定、単数・複数形を利用する方法を説明します。

React、Next.js、React Native、Node.jsなどのTypeScript環境で、Axiosのリクエスト・レスポンス型とサービス層を設定します。

TypeScriptとReactを組み合わせる際に役立つパターンを学びます。ジェネリックコンポーネントの型付け、カスタムフックの型推論、ZodやYupを使ったフォームの型安全性を例とともに説明します。

React DevToolsのComponentsとProfilerの使い方、JestとReact Testing Libraryによるイベント・非同期処理・モックのテスト例、StorybookとChromaticでUIを開発してテストする手順を学びます。

ReactアプリケーションのXSSやCSRFなどの脅威への対策を、例とともに学びます。OAuth 2.0/OIDCの認証フロー、コード分割、サードパーティスクリプトを安定して管理する戦略も説明します。

Reactアプリケーションで効果的にAPI通信と非同期処理を行う戦略を学びます。FetchとAxiosの比較、AbortControllerによるリクエストのキャンセル、GraphQLクライアントの導入時期、データ読み込みのためのSuspenseまで説明します。

マイクロフロントエンド（MFE）の概念、長所と短所、実装戦略を学びます。Webpack Module Federation、Single-SPAなどの主要技術から、チームの境界、デプロイモデル、導入時の検討事項までわかりやすく説明します。

再利用しやすく保守しやすいReactコンポーネントの設計原則とパターンを学びます。SRP、Atomic Design、Container/Presentationalパターンを例とともに説明し、テストしやすくする方法を紹介します。

Reactの開発と内部動作で使われる配列、連結リスト、ツリー、グラフ、ハッシュテーブルを、一覧表示や最適化との関係から学びます。

React Router v6のHistory API、URL照合、入れ子のルート、Outlet、Link、useNavigate、コード分割を学びます。

CSR・SSR・SSGの原理と長所・短所、Hydration、Next.jsのストリーミングSSR、Islands Architectureを比較します。

Context API、Redux Toolkit、Zustand、Recoilと、React Query・SWRのサーバー状態管理を、ストア・購読・選択子の原理から比較します。

ブラウザーの描画パイプライン、Reactの初回表示、JavaScriptのイベントループ、CSR・SSR・SSGの違いを詳しく学びます。

useEffectとuseLayoutEffectの違い、useRefのDOM参照と値の保持、useReducer、カスタムフックでのロジック再利用を学びます。

React 17との違い、マイクロタスク、flushSync、startTransitionから、React 18の自動バッチ処理と並行性を学びます。

フックの呼び出し順、連結リスト、Update Queue、関数型更新、バッチ処理、遅延初期化からuseStateとsetStateの内部を理解します。

Virtual DOM、Reconciliation、Fiber、優先順位のあるスケジューリング、Strict Modeを通じて、Reactの描画を理解します。

Etherscan V2 APIのキー発行方法と、React + TypeScriptで複数チェーンのEOAウォレット残高を取得する方法を解説します。

SSRの必要性と基本動作、React 18のストリーミング、renderToPipeableStreamとSuspenseの連携を段階的に説明します。

React NativeでContext APIを使い、propsの受け渡しを簡潔にしてグローバル状態を管理する方法を、useStateとuseReducerの例で解説します。

JavaScriptとTypeScriptでJSDocを使い、共同開発でコードの意図や使い方を伝えるコメントを書く方法を紹介します。

Tailwindの設定ファイル、プラグイン、global.cssを使い、スタイルやフォントをカスタマイズする方法を説明します。

ブログを構成する技術スタックと主要ライブラリについて、役割と採用理由を紹介します。

独自APIとPrisma、およびSupabase REST APIを使い、Next.jsのCSR・SSRでデータを取得する方法を紹介します。