Mock Service Worker で開発用のモックAPIを作る

ARANK

フロントエンドの開発時に仮の API を使いたいってシチュエーションはわりとあると思います。そんな時に、Mock Service Worker を使うと便利だったのでまとめます。Mock Service Worker とは？Mock Service Worker は、ネットワークレベルで API リクエストをインターセプトして mock のデータを返すためのライブラリです。API リクエストを含む処理のテストや、開発時の mock サーバーの代替として利用出来ます。 API としての利用について書きます。開発用の API というと、JSON Serverが有名ですが、Mock Service Worker では Service Worker を使ってリクエストを返すため、別プロセスでローカルサーバーを立てる必要もなく手軽に利用できます。仕組みは公式のこちらのビデオがわかりやすいです。 Service Worker での開発用APIの立て方Vite で作った Vue のプロジェクトで利用する場合を例にまとめます。パッケージの追加Mock Service Worker のパッケージをプロジェクトに追加します。Service Workerのコードを生成Mock Service Worker は Service Worker で API リクエストをインターセプトします。その Service Worker のコードをプロジェクトの公開ディレクトリに…