React + Storybook + MSW + Vitestで作る堅牢なフロントエンド開発術

Video Description

再生リスト: https://www.youtube.com/playlist?list=PLL8RZJqj2LQdP66ucOZ848uz9EN_PZITz この動画では、モダンなWeb開発のエコシステムを活用して、堅牢なReactアプリケーションを構築する手法を紹介します。 React、Storybook、MSW（Mock Service Worker）、Vitestを組み合わせることで、効率的な開発フローと信頼性の高いテスト環境を実現します。APIモックの作成からユーザーインタラクションのテストまで、実践的なテクニックを step-by-step で解説します。 Storybook + MSW: https://storybook.js.org/addons/msw-storybook-addon MSW Boundaryの記事: https://mswjs.io/blog/introducing-server-boundary Vitest: https://vitest.dev/ React Testing Library: https://testing-library.com/docs/react-testing-library/intro/ 00:00 イントロ 02:28 ライブラリの概要 05:55 準備 07:09 Formの作成 10:37 FormからAPIリクエストを実装 14:32 Storybookの導入 16:54 FormのStory作成 21:45 MSWをStorybookに導入 29:23 ここまでのおさらい 29:55 StorybookでFormの動作確認 33:15 Vitestの導入 37:20 Vitest + Storybookの連携 44:20 Vitest + MSW の連携 46:36 VitestにおけるMSWの問題のBoundaryの活用 52:43 テストの仕上げ 57:51 まとめ