MSW 2.xにあげた話 / update msw to 2.0

Transcript

1. MSW 2.xにあげた話 株式会社ZOZO
 ZOZOTOWN開発3部 フロントエンドリプレイスブロック 
 
 田中勇太 Copyright © ZOZO, Inc. 1
2. © ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発3部 フロントエンドリプレイスブロック 田中勇太 2024年に株式会社ZOZOに入社し、8月からZOZOTOWNの リプレイスプロジェクトに従事。 趣味は音楽や、サッカー観戦、ファッション。 Oasisのチケットが当たったので、ご機嫌です。 2
3. © ZOZO, Inc. https://zozo.jp/ 3 • ファッションEC • 1,600以上のショップ、9,000以上のブランドの取り扱い • 常時102万点以上の商品アイテム数と毎日平均2,600点以上の新着 商品を掲載（2024年9月末時点） • ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、ラグジュアリー＆デザイ ナーズゾーン「ZOZOVILLA」を展開 • 即日配送サービス • ギフトラッピングサービス • ツケ払い など
4. © ZOZO, Inc. 4 MSWってなに？
5. © ZOZO, Inc. 5 Mock Service Workerの略
6. © ZOZO, Inc. 6 Service Workerについて • 元はWeb Workerの一種 ◦ Web Worker: ブラウザ上でUIを担当するメインスレッドとは別のスレッ ドで処理を行う仕組み • ブラウザとサーバの間のプロキシサーバのような動きもする • キャッシュ管理も可能 • DOMへのアクセスは不可能 • メインスレッドとはMessage Channel APIを用いて値の受け渡しが可能
7. © ZOZO, Inc. 7 Service Workerについて • 元はWeb Workerの一種 ◦ Web Worker: ブラウザ上でUIを担当するメインスレッドとは別のスレッ ドで処理を行う仕組み • ブラウザとサーバの間のプロキシサーバのような動きもする • キャッシュ管理も可能 • DOMへのアクセスは不可能 • メインスレッドとはMessage Channel APIを用いて値の受け渡しが可能
8. © ZOZO, Inc. 8 Mock Service Workerの動き • Service WorkerにMSWを登録 • クライアントでfetchが走った時に、Service Workerはそれをhookし、 Message Channel APIで一旦ブラウザに返す • クライアントはMessage Channel APIで受け取ったリクエストをもとに、登 録されているハンドラから対象のリクエストのハンドラを探し、返すべきレ スポンスをMessage Channel APIでService Workerに返す • 返すべきレスポンスを受け取ったService Workerは、hookしていたfetchイ ベントをそのレスポンスで返す
9. © ZOZO, Inc. Mock Service Workerの動き 9
10. © ZOZO, Inc. Mock Service Workerの動き 10
11. © ZOZO, Inc. Mock Service Workerの動き 11
12. © ZOZO, Inc. 12 Mock Service Workerのメリット • 従来、APIから取得する予定のデータはハードコーディングやjson-server等 を立てて対応していた • MSWであれば本番と同様なコードで、Service Workerの登録の有無のみで モックを差し込める！
13. © ZOZO, Inc. MSW 1.x → 2.xにあげよう！ • もともとNext.jsを12→14にあげるプロジェクトの一環だった ◦ Next.jsのNode.jsのサポートバージョン変更 ▪ node-fetch→Node.jsが提供するfetchに変更 ◦ MSWがサポートしていないかと思われたが、一部を除き動くことが判明 • それでも、色々改善するしやろう！ということに！ 13
14. © ZOZO, Inc. 14 APIの書き換えが辛かった • MSWのcode modが壊れていた ◦ file changed 250件近くの巨大なPRを作成するハメに ◦ 単純な置換ではうまくいかない部分も多く、非常に辛かった ◦ 直ってからやるのが非常におすすめです。今思えばcontributionチャン スだったかもと思います
15. © ZOZO, Inc. Conditional Exportにいじめられた • Jestがjsdomを使う時、Conditional Exportsとしてbrowserが強制される • 一方、Jest + React Testing Libraryでは、jsdomをNode.js環境で動かすため、コン ポーネントのfetchはNode.jsから飛ぶことになる • MSW側はConditional Exportsとしてbrowserが指定された場合は、msw/node を exportしない 15 MSW1.x MSW2.x
16. © ZOZO, Inc. Conditional Exportにいじめられた • 上記の結果より、MSWはjsdomからConditional Exportsとしてbrowserを指定される ため、Node.js環境では Cannot find module ~ と怒られる ◦ Jestのリゾルバ上で、pkg.nameがmswだった場合、下記の条件を削除するような 処理を入れる必要がある 16
17. © ZOZO, Inc. 17 とはいえ、便利になってます
18. © ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 1. Node.jsが提供するfetchのAbortSignalをサポートするように 2. set-cookieの取り扱い 3. いい感じのAPI (Adopts Fetch API primitives) 18
19. © ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 • Node.jsが提供するfetchのAbortSignalをサポートするように MSW1.x MSW2.x 19
20. © ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 • set-cookieの取り扱い 20 MSW1.x MSW2.x
21. © ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 • いい感じのAPI （Adopts Fetch API primitives） MSW1.x MSW2.x 21
22. © ZOZO, Inc. まとめ • MSWニッチなことをしていてすごい • MSW 2.x ◦ Node.jsが提供するfetchのAbortSignalをサポートするように ▪ Jestや、Next.jsのgetServerSidePropsも影響している ◦ MSWのConditional Exportsが変わった ◦ set-cookieが使いやすくなっている！ ◦ APIがとてもいい感じになった！ ◦ その他アップデートはリリースノートを参考にしてみてください • とはいえ、codemod必須 22