MSW を導入してフロントエンド開発の効率が上がった
はじめに
フロントエンドエンジニアをしているユウマです。主に Typescript と Next.js を用いた開発をしています。
今回はモックサーバーとして利用できるライブラリ MSW と、GraphQL を用いたフロントエンド開発での導入について触れていきたいと思います。
MSW とは
MSW は Mock Service Worker の略で、モックサーバーとして利用できるライブラリです。
発信されるリクエストをネットワークレベルでインターセプトし、モックされたレスポンスを返すことが出来ます。
開発時の mock サーバーや API リクエストを含むテストでの利用など、様々なケースで利用できます。
開発時の mock サーバーとしての利用
開発時にバックエンドの API がまだ整っていない場合、API リクエストをモックすることで、フロントエンドの開発をスムーズに進めることができます。
また、バックエンドの API が整っていても、フロントエンドの開発を進めるために API リクエストをモックしたい場合があります。
そのような場合に MSW を利用することで、バックエンドの API を利用せずにフロントエンドの開発を進めることができます。
具体的な実装
設定やインストールは割愛して、具体的な実装について触れていきます。
handlers を実装
import { userHandlers } from "./userHandlers";
export const handlers = [...userHandlers];
mock したいリクエストを handlers.ts に書いていくとごちゃごちゃするので機能ごとに handlers を分割するようにしています。
レスポンスに返すダミーデータを定義しておきます。
GraphQL を使用している場合は graphql-codegen-typescript-mock-data により自動生成されるので aUser() のように呼び出すだけでダミーデータを取得できます。
Query, Mutation を実装
handlers 内に Query と Mutation を実装していきます。実際の Query リクエストの定数名と Query 名を一致させることで、リクエストをモックすることができます。
// userHandlers.ts
import { graphql, HttpResponse } from "msw";
...
export const userHandlers = [
graphql.query("getCurrentUser", () => {
return HttpResponse.json({
data: {
getCurrentUser: aUser(),
},
});
}),
graphql.mutation("updateUser", ($input: UpdateUserInput) => {
return HttpResponse.json({
data: {
updateUser: aUser(),
},
});
}),
];
MSW の起動
今回は_app.tsx 内に msw 起動する記述を書きます。ローカルでのみ msw を起動するようにしています。
async function enableMocking() {
if (!process.env.NEXT_PUBLIC_IS_LOCAL) {
return;
}
const { worker } = await import("../mocks/browser");
return worker.start();
}
enableMocking();
MSW が起動するとコンソールに以下のように表示されます。Query,Mutation が MSW にインターセプトされた時も同様に表示されます。ネットワークタブでも確認可能です。
[MSW] Mocking enabled.
[MSW] 12:28:30 query getCurrentUser(200 OK)
さいごに
MSW を導入することで、フロントエンドチームの開発体験を向上させることができました。
スキーマの設計さえ決まっていればバックエンドの開発を待たずにフロントエンド側で独自のモックを用意し機能開発ができるのはチームメンバーからも好評でした。
今後は開発時に使ったモックを使わなくなればテストとして同じモックが再利用するというサイクルができるといいなと思っています！
参考
Discussion