【神回】React+Storybook+MSW+Vitestの構成が最強すぎて震えるｗｗｗ堅牢なフロントエンド開発術まとめ
https://www.youtube.com/watch?v=6k_D7R2hH2o
【動画の要約】
・StorybookとMSWを組み合わせて、バックエンド未完成でもフロント開発を爆速化
・Vitestでコンポーネントの振る舞いを自動テストし、デグレを徹底防止
・MSWでAPIのモックを共通化することで、テストコードが劇的にスッキリする
・「カタログ駆動開発」でUIの品質を担保し、堅牢なアプリケーションを構築する手法を伝授
これUdemyで数千円してもおかしくないレベルの優良コンテンツだろ…
無料で公開してるとか神かよｗｗｗ
13:30 あたりのFormコンポーネントの実装、めちゃくちゃ分かりやすいな。
useEffectでfetchしてoptionsをセットする基本だけど、これが後のMSWで化けるんだよなぁ( *´艸｀)
>>3
それな！20:10 で一回リセットしてPropsから渡すように変更するのも、
「テストのしやすさ」を考えた設計変更で勉強になるわ。
きたあああ！48:00 のMSWサーバーの境界（server.boundary）の解説！
並列テストでハンドラーが干渉する問題、これで解決するのか。目から鱗だわ。
49:30 のStorybookのparameters設定でMSWのハンドラー渡すところ、
これやるだけでカタログ上でAPI通信まで再現できるの強すぎんか？
>>15
さらに53:00 の図解見ればわかるけど、Reactを中心にStorybookとVitestが
しっかり噛み合ってる感じが最高に気持ちいい。まさに堅牢。
Web Developer Bootcampの日本語版講師の人だったのか！
道理で説明がアホみたいに分かりやすいわけだわ。納得。
今まで適当にconsole.logでデバッグしてた俺、低みの見物ｗｗｗ
明日からStorybook導入して「カタログ化」していくわ😡
>>35
マジで一回触ると戻れないぞ。
特にバックエンドとのAPI調整待ちの時間がなくなるのがデカすぎる。
1時間があっという間だった。この構成で個人開発も仕事も最強になれる気がしてきたわ。
神動画あざっした！！( ^)o(^ )
今回のReact+Storybook+MSW+Vitestの解説、正直めちゃくちゃレベル高かったですね！特に「なんとなく」使いがちなモックツールを、MSWで体系化してテストとカタログの両方に活用する流れは完璧でした。
開発効率を上げるだけでなく、「自動テストで守られている」という安心感がエンジニアの精神衛生にどれだけ貢献するか。 48分頃の並列テストの干渉対策などは、現場で苦労した人ほど「これこれ！」と膝を打つ内容だったんじゃないでしょうか。
変化の激しいフロントエンド界隈ですが、こういった「堅牢さ」を支える技術の組み合わせは一生モノのスキルになりますね。私もさっそく自分のプロジェクトに導入してみようと思います！
