MSW 2.xにあげた話 株式会社ZOZO
 ZOZOTOWN開発3部 フロントエンドリプレイスブロック 
 
 田中勇太 Copyright © ZOZO, Inc. 1

© ZOZO, Inc. 株式会社ZOZO ZOZOTOWN開発3部 フロントエンドリプレイスブロック 田中勇太 2024年に株式会社ZOZOに入社し、8月からZOZOTOWNの リプレイスプロジェクトに従事。 趣味は音楽や、サッカー観戦、ファッション。 Oasisのチケットが当たったので、ご機嫌です。 2

© ZOZO, Inc. https://zozo.jp/ 3 ● ファッションEC ● 1,600以上のショップ、9,000以上のブランドの取り扱い ● 常時102万点以上の商品アイテム数と毎日平均2,600点以上の新着 商品を掲載（2024年9月末時点） ● ブランド古着のファッションゾーン「ZOZOUSED」や コスメ専門モール「ZOZOCOSME」、ラグジュアリー＆デザイ ナーズゾーン「ZOZOVILLA」を展開 ● 即日配送サービス ● ギフトラッピングサービス ● ツケ払い など

© ZOZO, Inc. 4 MSWってなに？

© ZOZO, Inc. 5 Mock Service Workerの略

© ZOZO, Inc. 6 Service Workerについて ● 元はWeb Workerの一種 ○ Web Worker: ブラウザ上でUIを担当するメインスレッドとは別のスレッ ドで処理を行う仕組み ● ブラウザとサーバの間のプロキシサーバのような動きもする ● キャッシュ管理も可能 ● DOMへのアクセスは不可能 ● メインスレッドとはMessage Channel APIを用いて値の受け渡しが可能

© ZOZO, Inc. 7 Service Workerについて ● 元はWeb Workerの一種 ○ Web Worker: ブラウザ上でUIを担当するメインスレッドとは別のスレッ ドで処理を行う仕組み ● ブラウザとサーバの間のプロキシサーバのような動きもする ● キャッシュ管理も可能 ● DOMへのアクセスは不可能 ● メインスレッドとはMessage Channel APIを用いて値の受け渡しが可能

© 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イ ベントをそのレスポンスで返す

© ZOZO, Inc. Mock Service Workerの動き 9

© ZOZO, Inc. Mock Service Workerの動き 10

© ZOZO, Inc. Mock Service Workerの動き 11

© ZOZO, Inc. 12 Mock Service Workerのメリット ● 従来、APIから取得する予定のデータはハードコーディングやjson-server等 を立てて対応していた ● MSWであれば本番と同様なコードで、Service Workerの登録の有無のみで モックを差し込める！

© ZOZO, Inc. MSW 1.x → 2.xにあげよう！ ● もともとNext.jsを12→14にあげるプロジェクトの一環だった ○ Next.jsのNode.jsのサポートバージョン変更 ■ node-fetch→Node.jsが提供するfetchに変更 ○ MSWがサポートしていないかと思われたが、一部を除き動くことが判明 ● それでも、色々改善するしやろう！ということに！ 13

© ZOZO, Inc. 14 APIの書き換えが辛かった ● MSWのcode modが壊れていた ○ file changed 250件近くの巨大なPRを作成するハメに ○ 単純な置換ではうまくいかない部分も多く、非常に辛かった ○ 直ってからやるのが非常におすすめです。今思えばcontributionチャン スだったかもと思います

© 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

© ZOZO, Inc. Conditional Exportにいじめられた ● 上記の結果より、MSWはjsdomからConditional Exportsとしてbrowserを指定される ため、Node.js環境では Cannot find module ~ と怒られる ○ Jestのリゾルバ上で、pkg.nameがmswだった場合、下記の条件を削除するような 処理を入れる必要がある 16

© ZOZO, Inc. 17 とはいえ、便利になってます

© ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 1. Node.jsが提供するfetchのAbortSignalをサポートするように 2. set-cookieの取り扱い 3. いい感じのAPI (Adopts Fetch API primitives) 18

© ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 ● Node.jsが提供するfetchのAbortSignalをサポートするように MSW1.x MSW2.x 19

© ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 ● set-cookieの取り扱い 20 MSW1.x MSW2.x

© ZOZO, Inc. ZOZOTOWNの環境で現状助かりそうな部分 ● いい感じのAPI （Adopts Fetch API primitives） MSW1.x MSW2.x 21

© ZOZO, Inc. まとめ ● MSWニッチなことをしていてすごい ● MSW 2.x ○ Node.jsが提供するfetchのAbortSignalをサポートするように ■ Jestや、Next.jsのgetServerSidePropsも影響している ○ MSWのConditional Exportsが変わった ○ set-cookieが使いやすくなっている！ ○ APIがとてもいい感じになった！ ○ その他アップデートはリリースノートを参考にしてみてください ● とはいえ、codemod必須 22

No content