Reduxでのサーバーサイド作業のためのmswのインストール

過去のレッスンで、私たちのアプリケーションにいくつかの追加の変更を加えました。これから、アプリケーションがデータをやり取りするサーバーについて理解する必要があります。

実際のサーバーは持っていないので、優れたツールであるMock Service Workerを使って、その動作をシミュレートします。 Mock Service Worker (MSW) は、APIを模倣するためのツールで、ネットワークレベルでリクエストをインターセプトするために設計された標準化されたService Worker APIを使用します。MSWは、私たちのリクエスト (requests) に対して模擬的な応答 (responses) を生成します。しかも、開発者によれば、このツールは非常に効率的で柔軟性があり、モック（そのためにアプリケーションで特別に何かを作成する必要はありません）を使用したデバッグの後、アプリケーションを既に本物の外部サーバーと一緒に運用開始できます。そのドキュメントは非常に広範で、もしMSWに興味があれば、公式サイトで読むことができます。

では、mswのインストールに移りましょう。そのために、プロダクトのプロジェクトを開き、ターミナルで以下のコマンドを入力します：

npm install msw --save-dev

mswを動作させるためには、mockServiceWorker.jsを作成し、何らかの公開ディレクトリにコピーする必要もあります。多くの場合、それはpublicフォルダです。空のpublicフォルダがあるので、そこにコピーしましょう。そのためには、ターミナルで以下のコマンドを実行し、その後publicの使用に同意します：

npx msw init public

では、publicを確認してみましょう。生成されたスクリプトmockServiceWorker.jsがそこにできているはずです。次に、プロダクトのアプリケーションを起動し、ブラウザのアドレスバーにhttp://localhost:5173/mockServiceWorker.jsと入力します（私たちのアプリケーションは5173ポートで動作しているため）。ブラウザのウィンドウにファイルmockServiceWorker.jsの内容が表示されましたか？それなら全て順調です、次に進みましょう。

次に、srcフォルダ内にapiフォルダを作成し、その中にサーバーのコードを書くファイルserver.jsを作成しましょう。では、server.jsを開き、インストールしたmswライブラリから関数setupWorkerをインポートします：

import { setupWorker } from 'msw/browser'

ファイルの下方で変数workerを作成し、それをエクスポートします：

export const worker = setupWorker()

では、ファイルmain.jsxを開き、そこに私たちのワーカーをインポートしましょう：

import { worker } from './api/server'

次に、それを私たちのアプリケーションに接続しましょう。そのために、Reactアプリケーションのルートを作成するコードを関数でラップし、それをmainと呼ぶことにします。その最初の行に、ワーカーの起動用の関数を追加します。もちろん、main自体の呼び出しを忘れないようにしてください。すべてのインポート行の後の完全なコードは、以下のようになります：

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

これで、ワーカーが起動する前に（そしてリクエストを送信する前に ;) ）、アプリケーションが動作を開始しないことが確実になります。

では、アプリケーションを起動し、ブラウザで開発者コンソールを開いてみましょう。コンソールに '[MSW] Mocking enabled.' というテキストが表示されていれば、あなたは素晴らしく、すべてを正しくインストールしています!!!

あなたの学生管理アプリケーションを開いてください。このレッスンの内容を確認した後、あなたのアプリケーション用にMock Service Workerをインストールしてください。

ファイルserver.jsを作成し、その中にワーカーを作成してください。レッスンで示したように、ワーカーをmain.jsのアプリケーションに接続してください。すべてが動作することを確認してください。