サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能
今回は「サーバ不要でバックエンドAPIのモックを実現する「Mock Service Worker 2.0」正式リリース。Fetch API、ストリームAPI対応など新機能」についてご紹介します。
関連ワード （次々、稼働、開発等） についても参考にしながら、ぜひ本記事について議論していってくださいね。
本記事は、Publickey様で掲載されている内容を参考にしておりますので、より詳しく内容を知りたい方は、ページ下の元記事リンクより参照ください。
Webアプリケーションのクライアントを開発する際に、本来ならばサーバ上で稼働するWebアプリケーションのバックエンドのAPIを呼び出してデータを受け取って表示するといった動作を作り込みたいけれども、まだバックエンドのAPIも開発中であったり、何らかの理由でバックエンドを稼働させる環境を用意できなかったりすることは、しばしば起こりえます。
そうしたときにサーバを立てることなく、バックエンドのAPIをモックとして簡単に設定し提供してくれるソフトウェア「Mock Service Worker」の最新版「Mock Service Worker 2.0」が正式にリリースされました。
Announcing MSW 2.0!
Migration guidelines: https://t.co/NprZki41K6
Release notes: https://t.co/it182bMMbX365+ days in development, 200+ commits, 40+ contributors involved. The future of API mocking is here, and it has never been brighter. pic.twitter.com/iG1xRSK8V7
— Artem Zakharchenko (@kettanaito) October 23, 2023
Mock Service WorkerはWebブラウザもしくはNode.jsの環境で使えるモック作成用のライブラリです。
プロキシサーバとしてService Workerが実行され、クライアントからのRESTfulもしくはGraphQL形式のリクエストを受け取り、あらかじめ設定しておいたモックとしてのデータを返します。
下記は、Mock Service Workerの開発者であるArtem Zakharchenko氏によるブログ「Introducing MSW 2.0 – Mock Service Worker」からの引用です。
Version 2.0 marks a monumental chapter for MSW. A year in development, dozens of contributors, and thousands of lines changed, this update brings a refined public API with the first-class support for Fetch API primitives and all the features and bug fixes that it unlocks as a side effect.
バージョン2.0はMSWにとって記念すべきバージョンと言える。開発に1年を費やし、何十人もの貢献者が参加し、何千行もの行が変更されたこのアップデートは、Fetch APIプリミティブを本格的にサポートしたことで洗練されたパブリックなAPIを実現し、その副次的な効果として多くの新機能追加とバグ修正が行われた。
Mock Service Worker 2.0ではNode.js 16以前のバージョンでの実行が非推奨となりました。これ以降のNode.js（Node.js 18以降）をサポート環境とすることで、Node.js環境とWebブラウザ環境の両方でFetch APIへの対応が実現されています。
主な新機能として、モックのレスポンスとしてストリーム API の「ReadableStream」をサポートしました。これにより、例えばチャットでサーバから送られてくるテキストの文字が次々に表示されるようなアプリケーション（ChatGPTなども、そうしたアプリケーションの一種でしょう）のモックも作れるようになりました。
また、FormDataをボディとするリクエストも読み込むことができ、レスポンスのボディとして返せるようになるなどの新機能が追加されています。
変更点や新機能などの詳細は、リリースノート「Release v2.0.0 · mswjs/msw」をご覧ください。