GMOメイクショップ コアグループでフロントエンドエンジニアをしている池田です。
主にTypescriptとVue.jsを用いた開発をしています。
当記事ではJS・TSでモックサーバーとして利用できるライブラリMSWの紹介と、フロントエンド開発での導入方法について触れていきたいと思います。

• MSWとは
• • どのようなケースで使えるか
  • 開発時のmockサーバーとして利用
  • APIリクエストを含むテストでの利用
  • 類似ライブラリとの比較
  • API
  • 環境
• 導入方法
• • mockServiceWorker.jsは本番ビルドに含めない
  • モックの定義
  • REST
  • GraphQL
  • ワーカーを起動するコードを書く
• 最後に
• 参考

MSWとは

Mock Service Worker (MSW) はブラウザとNode.js用のAPIモッキング・ライブラリです。 MSWは発信されるリクエストをネットワークレベルでインターセプトし、モックされたレスポンスを返すことが出来ます。

どのようなケースで使えるか

• 開発時のmockサーバーとして利用
• APIリクエストを含むテストでの利用

開発時のmockサーバーとして利用

フロントエンドとバックエンドを同時に開発していて、バックエンドのAPI開発待ちになっている。 こんな状況になった時にMSWをモックサーバーとして利用し、バックエンドからのレスポンスをMSWで代わりに返すことが出来ます。

また、モックとして使用するデータは自分で好きなように定義できるので、DBのデータに希望するデータが無くて、 データを作るにもDBのリレーションが複雑なためデータ作成に時間がかかるというような場合でもMSWは有効です。

※ バックエンドとのインターフェイスは確定している、ほとんど決まっているという状態でないと手戻りになる可能性が高いので、そこは注意が必要かと思います。

APIリクエストを含むテストでの利用

APIリクエストを含むテストでDBと直接繋いだ場合、DBのデータの状態によってテストが安定してパスしないなんてことが起こり得ます。 モックサーバーを利用すれば、常に同じレスポンスを返すことが出来るため、APIリスエストを含むテストだとしても、安定してテストが成功します。

類似ライブラリとの比較

有名なライブラリにjson-serverなどがありますが、それらの比べて何が違うのか見てみましょう。 こちらから分かるようにGraphQLに対応可能なのはMSWのみです。(2023/12/21時点)

導入方法

MSWのバージョンは2.0以降を想定してます。
2.0より前のバージョンの場合はハンドラーの定義やワーカーの定義などで少し書き方が異なりますのでご注意ください。

<PUBLIC_DIR>は例えば、プロジェクトのルート直下にpublicがある場合は ./public となります。 実行後に指定したディレクトリ配下にmockServiceWorker.jsが生成されています。

mockServiceWorker.jsは本番ビルドに含めない

生成されたmockServiceWorker.jsを見てみると、冒頭にこんなコメントがあります。

というように書いてあるが、どのようにすれば良いのか？

vite環境での解決方法になりますが、vite.config.jsに下記のようなコードを追加しました。

モックの定義

既に記載した通り、RESTとGraphQLの両方に対応しています。 それぞれ以下のように定義します。 型を指定すると、型推論が効くようになるので、レスポンスなど間違うこと無く記述出来るのが良いです。

REST

リクエストの型、レスポンスの型を指定することで型推論が効くようになります。

GraphQL

こちらも同様にgraphql-codegenなどから生成された型を指定することで型推論が効くようになります。

ワーカーを起動するコードを書く

ここまで準備したらアプリケーションの起動をしてみます。
[MSW] Mocking enabled. が表示されていれば問題なく動いています。

リクエストを投げてみると、モックに定義したレスポンスが返ってきます！

最後に

モックを利用することで開発の動作確認、自動テストの実行、確認が難しいデータパターンやエラーの再現など様々なケースで役に立つと思います。
ぜひともMSWを利用してフロントエンドの開発速度を上げていきましょう！

参考

mswjs.io

github.com

最後までお読みいただきありがとうございました。

◆　他のBlogはこちらから⇒　https://tech.makeshop.co.jp/　◆

ご応募お待ちしています！