イントロダクション

このチュートリアルでは、Mirage を使用して HTTP API をモックアウトする基本を学びます。Mirage は GraphQL API のモックアウトにも使用できますが、このチュートリアルでは基本的な REST API を扱います。

リマインダーアプリの API をモックアウトすることで、Mirage を学習します。アプリは React で書かれていますが、Mirage のコードのみを書くため、React の知識は必要ありません。

実際の API サーバーは実行されていないため、アプリは最初は動作しません。各 API エンドポイントを実装するにつれて、アプリの機能を復元していきます。

最終的な結果の例を以下に示します。

mirage-tutorial.vercel.app (ソースコード)

セットアップ

まず、開発環境を準備しましょう。Node.js がインストールされている必要があります。また、独自のテキストエディターとターミナルアプリを使用します。

次に、チュートリアルをダウンロードし、依存関係をインストールします。

npx degit github:miragejs/tutorial mirage-tutorial
cd mirage-tutorial
yarn install

# You can also use npm:
npm install

その後、エディターでプロジェクトを開き、アプリを起動します。

yarn start

# or npm run start

これにより、開発サーバーが ポート 3000 で実行されます。

ブラウザで http://localhost:3000 を開くと、次のようなページが表示されます。

Reminders app

表示されれば、モックアウトを開始する準備ができています。