バックエンド API が準備されていない場合、自身をアンブロックさせる 5 つの方法

開発中に機能に取り組んでいます。UI に必要なことが完全に分かっており、Figma ファイルも開かれています。準備ができていると思います。 ### コンポーネント内での JSON のハードコーディング はい、それが汚いことを認めます。しかし、実際にはそれをしていない pretending はしていません。 ```javascript const products = [ { id: 1, name: "Wireless Headphones", price: 149.99, in_stock: true }, { id: 2, name: "Mechanical Keyboard", price: 89.99, in_stock: false }, ]; ``` **使い方のタイミング:** 次の 30 分間のアンブロックが必要です。そして終わりに、これは捨てられます。 ### `json-server` をローカルで実行する `json-server` はクラシックです。`db.json` ファイルを作成し、1 つのコマンドを実行し、localhost にフルフェイク REST API が実行されます。 ```bash npm install -g json-server json-server --watch db.json --port 3001 ``` あなたの `db.json`: ``` { "products": [ { "id": 1, "name": "Wireless Headphones", "price": 149.99 }, { "id": 2, "name": "Mechanical Keyboard", "price": 89.99 } ] } ``` これで、`GET /products` と `GET /products/1` 両方が出箱から機能します。 ### Mock Service Worker (MSW) MSW はブラウザ内のネットワークレベルでサービスワーカーを使用してリクエストを妨害します。あなたのアプリは、それが実 API に hitting しているとお考えです。それはではありません。 ```javascript import { rest } from 'msw'; import { setupWorker } from 'msw'; const worker = setupWorker( rest.get('/api/products', (req, res, ctx) => { return res( ctx.json([ { id: 1, name: 'Wireless Headphones', price: 149.99 } ]) ); }) ); worker.start(); ``` **使い方のタイミング:** モックをコードベースに組み込み、テストと共同配置され、初期セットアップオーバーヘッドにいくつか慣れ親しみつつあります。 ### Postman Mock Servers `https://abc123.mock.pstmn.io/products` で、あなたのチームの誰もがそれを hit することができます。 - オンラインのモックツール — インスタント URL、セットアップなし - URL は公開アクセス可能 — あなたのモバイルチームメイトが同じエンドポイント hit することができます **使い方のタイミング:** 共有 URL を速やかに必要とし、プラットフォーム全体 (web + iOS + Android) でテスト中であり、バックエンドを触ることなくエラーハンドリングテストを望んでいます。 ### あなたは何を使用すべきですか？ 30 秒の修正、のちに捨てる → ハードコーディングする 私と話す開発者の多くが、文脈に応じて 2〜3 つのものを最終的に使用して終わります。最も重要なことは、異なる状況に適したツールを知っていることだということです。同じアプローチに毎回デフォルトとして頼ることではなく。 バックエンドが準備されていない場合、あなたの好きなことは何かですか？コメントにドロップしてください。

You're mid-feature. You know exactly what the UI needs to do. The Figma file is open. You're ready. Hardcode the JSON directly in your component Yeah, it's ugly. But don't pretend you haven't done it. const products = [ { id: 1, name: "Wireless Headphones", price: 149.99, in_stock: true }, { id: 2, name: "Mechanical Keyboard", price: 89.99, in_stock: false }, ]; When to use it: You need to unblock yourself for the next 30 minutes and you'll throw this away by end of day. Run json-server locally json-server is a classic. You create a db.json file, run one command, and you have a full fake REST API running on localhost. npm install -g json-server json-server --watch db.json --port 3001 Your db.json: { "products": [ { "id": 1, "name": "Wireless Headphones", "price": 149.99 }, { "id": 2, "name": "Mechanical Keyboard", "price": 89.99 } ] } Now GET /products and GET /products/1 both work out of the box. Mock Service Worker (MSW) MSW intercepts requests at the network level inside your browser using a service worker. Your app thinks it's hitting a real API. It isn't. import { rest } from 'msw'; import { setupWorker } from 'msw'; const worker = setupWorker( rest.get('/api/products', (req, res, ctx) => { return res( ctx.json([ { id: 1, name: 'Wireless Headphones', price: 149.99 } ]) ); }) ); worker.start(); When to use it: You want mocking baked into your codebase, colocated with your tests, and you're comfortable with some initial setup overhead. Postman Mock Servers https://abc123.mock.pstmn.io/products and anyone on your team can hit it. An online mock tool — instant URL, no setup The URL is publicly accessible — your mobile teammate can hit the same endpoint When to use it: You need a shareable URL fast, you're testing across platforms (web + iOS + Android), or you want to test your error handling without touching the backend. Which one should you use? 30-second fix, throw away later → hardcode it Most developers I've talked to end up using 2-3 of these depending on the context. The key is knowing which tool fits which situation instead of defaulting to the same approach every time. What's your go-to when the backend isn't ready? Drop it in the comments.