トップ > Mock Service WorkerをVue.jsで使ってみた！

Mock Service WorkerをVue.jsで使ってみた！

記事タイトルとURLをコピーする

こんにちは！全国のフロントエンドエンジニアのみなさん！
アプリケーションサービス部のオオカミです。

みなさん快適なフロントエンド開発していますか？

今日は快適なフロントエンド開発ライフを多くのエンジニアに送って頂きたく、最近流行りのフロントエンド・モックAPIサーバー【Mock Service Worker】（以下、MSW）について記事を書いてみました♪

Mock Service Workerとは何か？

  • MSWはTypeScriptで書かれたブラウザー内でフロントエンドのHTTPリクエストとレスポンスをモックするためのライブラリです。

  • これにより、開発中に依存する API サーバーがなくてもアプリケーションを開発することができ、APIレスポンスもカスタマイズすることができます。

  • ローカル環境で完全なエンドツーエンドテストを行うことができ、アプリケーションのパフォーマンスを向上させることができます。

  • ブラウザ環境での使用を前提としており、Node.jsなどのサーバーサイドの開発には適していません。

  • また、Rest APIだけでなく、GraphQLも対応しているところも昨今のアプリケーション開発にはありがたいところです。

mswjs.io

Mock Service Workerの何がすごいのか？

  • Mock Service Workerは読んで字のごとく、Service Workerで動くモックサーバーです。 つまり、Vue.jsなどのJavaScriptで書かれたメインのスクリプトが動いているスレッドとは別のスレッドで動いているため、メインのスクリプトはノンブロッキングで実際のAPI通信をしているのと処理の流れ同じになります。

  • これまでのフロントエンド開発はAPIをモックするためDockerなどのコンテナ環境を構築する必要があったり、フロントエンドエンジニアにとっても開発環境を整えるのにハードルが高いと考えるエンジニアも少なくなかったはずです。

  • MSWの最大の利点は上記の点に加え、開発者はフロントエンドとバックエンドを分離して開発を進めることができるため、アプリケーションの開発をより迅速に進めることができることです。

  • モックデータを設定することでリクエストとレスポンスのハンドリングを容易に行うことができ、さらに、MSWはユニットテストと統合テストの両方で使用、CI/CDの一環として自動化することもできます。

詳しくはコレ読んでね♪
と言うことで、デメリットは見つかりません。

Mock Service WorkerをVue.jsで使うには？

MSWをVue.jsで使用するには、次の手順が必要です。
※詳細はこちらを参照。

以下例ではVue.js(Vite版)でRest APIの実装を想定しています。
※GraphQLで実装の場合はこちらを参照。

1. MSW パッケージをインストール

  • Vue.jsプロジェクトのルートディレクトリで実行
npm install msw --save-dev

2. Service Workerの初期化

  • Vueプロジェクトのルートディレクトリで実行
# PUBLIC_DIR = Vue.jsの場合`public/`を指定
npx msw init <PUBLIC_DIR> --save

3. MSW のモックハンドラを定義

  • 以下のようなhandlers.jsファイルを作成し、HTTPリクエストに応じたレスポンスを定義します。 （もちろん.tsファイルでも作ることも可能です！）

3-1. ハンドラファイルの作成

touch src/mocks/handlers.js

3-2. ハンドラ定義

// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  // '/login'パスのPOSTリクエストに対するハンドラ
  rest.post('/login', null),
  // '/user'パスのGETリクエストに対するハンドラ
  rest.get('/user', null),
  // ハンドラにカスタムエラー、カスタムメッセージ、レスポンスディレイも設定することもできます
  rest.get('/file-not-found', (req, res, ctx) => {
    return res(ctx.status(404), ctx.json({message: 'File not found'}), ctx.delay(250));
  }),
]

※詳しいレスポンスにハンドリングに関する情報はResponse resolverを見てね。

4. Workerの設定

  • Workerインスタンスの設定ファイルを作成します。

4-1. Workerファイルの作成

touch src/mocks/browser.js

4-2. Workerファイルの編集

// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

// ハンドラに書かれた定義をService Workerに設定する
export const worker = setupWorker(...handlers)

5. Workerの起動

  • Vue.js アプリケーションのエントリーポイントである main.js ファイルで、MSW を有効化します。
    ※ 以下はVite環境を想定としてるため、webpack環境などでは環境変数読み込みが異なりますので注意してください！
// main.js
// `import.meta.env.MODE` を確認して、開発モード時のみ MSW を有効化する
if (import.meta.env.MODE === 'development') {
  const { worker } = await import('./mocks/browser');
  worker.start();
}

// Vue.js アプリケーションのセットアップ
// ...

まとめ

  • 今回はVue.jsをベースに紹介させて頂きましたが、Typescriptで書かれているのでReactなど他のフロントエンドフレームワークでももちろん使うことができます。→ Examples

  • Mock Service Workerはフロントエンドエンジニアだけが恩恵を享受できるだけでなく、プロジェクト自体の開発工数を削減することができるため、非常に有益でパワフルなツールだと感じました。

  • 今後もこの様な革新的なライブラリを紹介していきますので、全国のフロントエンジニア諸君・・・Stay Tuned!!🤓💻