React

Vitest ベースの React プロジェクトに @vitest/coverage-v8 を活用したテストカバレッジ測定環境を構築する方法を紹介します。

既存のJestで作成されたReactプロジェクトにVitestを追加し、ViewテストとロジックテストをランナーごとにOK分離する方法を紹介します。モノレポ環境での設定方法とCI統合まで解説します。

Vitest Browser ModeとPlaywrightを使用してReactコンポーネントのVRT(Visual Regression Testing)とアクセシビリティテスト環境を構築する方法を共有します。Dockerを活用した一貫したレンダリング環境とCI統合まで扱います。

JestとPuppeteerを活用してReactコンポーネントのVRT(Visual Regression Testing)環境を構築する方法を共有します。コンポーネントをサーバーサイドレンダリングし、Puppeteerでスクリーンショットを撮ってjest-image-snapshotで比較する構成です。

Storybook Test Runnerとjest-image-snapshotを活用してReactコンポーネントのVRT（Visual Regression Testing）とアクセシビリティテストを構築する方法を共有します。

モノレポ環境でReact共通コンポーネントのテスト方針を決めるプロセスを共有します。Props/StateによるViewテスト、イベントテスト、アクセシビリティテストをJest、Storybook、Vitestで比較し、最終的にVitestを選択した理由を共有します。

6つのアプリと共有パッケージで構成されたモノレポにReact Compilerを一括導入した過程と遭遇した問題、panicThresholdの選択、eslint-disable戦略、ref.currentの誤検知対応、そして問題発生時の"use no memo"ディレクティブの活用方法を共有します。

7つのアプリと共有コンポーネントライブラリを含む大規模モノレポをReact 19にアップグレードした実践経験を共有します。forwardRefの削除、RefObject型の統合、useRefの初期値必須化、JSX名前空間の変更など、主要な変更点とマイグレーション戦略について解説します。

TossのSLASH 21カンファレンスで発表されたReact Clean Codeの核心概念である凝集度、単一責任、抽象化を実際のコード例と共に整理して共有します。

Reactのレンダリングとは何か、レンダーフェーズとコミットフェーズの違い、Fiberオブジェクト、Keyとレンダリング、バッチ処理、クロージャとstateスナップショットなど、Reactレンダリングの基本概念と動作方式について共有します。

Reactのレンダリングパフォーマンス最適化の必要性、React.memo・shouldComponentUpdate・PureComponentなどの最適化API、参照問題とuseCallback/useMemoによるProps参照の最適化、不変性、パフォーマンス計測方法、React Compilerについて解説します。

Viteを使って生成したTypeScriptベースのReactプロジェクトにCSS-in-JS環境でスタイル(CSS)を検査するためにStylelintを追加する方法について説明します.