DummyJSONとは？無料のフェイクREST APIの概要と自作方法

バックエンドがまだない状態でUIを実装する場合、まず必要になるのはレンダリング用のデータです。DummyJSONは、製品、ユーザー、カートなどのリアルなサンプルデータをHTTP経由で返す無料の偽REST APIです。サインアップ不要で使えるため、固定配列をハードコードせずに、実際のAPI呼び出しに近い形でフロントエンドを作れます。この記事では、DummyJSONの使い方、他の公開テストAPIとの違い、固定のプレースホルダーデータでは足りなくなった場合の実装方針を整理します。

今すぐApidogを試す

DummyJSONとは？

DummyJSONは、無料で使えるプレースホルダーJSON APIです。公開エンドポイントにHTTPリクエストを送るだけで、構造化されたサンプルデータが返ります。データベースの準備、APIキーの発行、アカウント登録は不要です。

たとえば、フロントエンドで次のような用途に使えます。

• 商品一覧ページのカードUIを作る
• ユーザー一覧テーブルを作る
• カート画面の合計金額を計算する
• ページネーションや検索UIを実装する
• ローディング状態や詳細ページの表示を確認する

DummyJSONのデータは偽物ですが、一貫した構造を持っています。たとえば製品データには、タイトル、価格、評価、在庫数、カテゴリがあります。ユーザーデータには、名前、メールアドレス、住所、会社情報があります。

この一貫性があるため、単なるダミーテキストではなく、本番APIに近い構造を前提にUIを組み立てられます。レコードはネストされ、型もある程度現実的なので、フィルター、ソート、詳細表示などの実装にも使いやすいです。

DummyJSONはHTTPS経由でJSONを返します。ブラウザのfetch、ReactやVueなどのフロントエンド、モバイルアプリ、curl、サーバーサイドスクリプトから同じように呼び出せます。

const res = await fetch('https://dummyjson.com/products?limit=5');
const data = await res.json();

console.log(data.products);

DummyJSONのエンドポイント、認証、制限

DummyJSONには複数のリソースコレクションがあります。よく使うものは次のとおりです。

• /products: 価格、在庫、評価付きの商品カタログ
• /users: 住所、メールアドレス、会社情報付きのユーザー
• /carts: ユーザーに紐付いたショッピングカート
• /posts と /comments: ブログ形式の投稿とコメント
• /todos: タスク項目
• /recipes と /quotes: レシピや引用文などの追加データ

基本的な取得

商品を5件取得する例です。

curl https://dummyjson.com/products?limit=5

ページネーションを確認したい場合は、limitとskipを使います。

curl "https://dummyjson.com/products?limit=5&skip=10"

JavaScriptでは次のように実装できます。

async function fetchProducts({ limit = 10, skip = 0 } = {}) {
  const res = await fetch(
    `https://dummyjson.com/products?limit=${limit}&skip=${skip}`
  );

  if (!res.ok) {
    throw new Error(`Failed to fetch products: ${res.status}`);
  }

  return res.json();
}

const data = await fetchProducts({ limit: 5, skip: 10 });
console.log(data.products);

検索

商品検索には検索エンドポイントを使えます。

curl "https://dummyjson.com/products/search?q=phone"

UI側では、検索フォームの入力値をクエリに渡すだけで簡単な検索UIを作れます。

async function searchProducts(query) {
  const res = await fetch(
    `https://dummyjson.com/products/search?q=${encodeURIComponent(query)}`
  );

  return res.json();
}

フィールドの絞り込み

selectパラメータを使うと、レスポンスに含めるフィールドを絞れます。

curl "https://dummyjson.com/products?select=title,price,category"

一覧画面では不要なフィールドを減らせるため、APIレスポンスの扱いをシンプルにできます。

遅延レスポンスでローディング状態を確認する

delayパラメータを使うと、0〜5000ミリ秒の遅延をシミュレートできます。

curl "https://dummyjson.com/products?delay=2000"

フロントエンドでは、ローディングスピナーやスケルトンUIの確認に使えます。

let loading = true;

try {
  const res = await fetch('https://dummyjson.com/products?delay=2000');
  const data = await res.json();
  console.log(data);
} finally {
  loading = false;
}

認証フロー

DummyJSONにはログインエンドポイントがあります。資格情報を/auth/loginにPOSTすると、トークンが返ります。そのトークンをAuthorizationヘッダーに入れて保護されたエンドポイントを呼び出します。

# 1. ログインしてトークンを取得
curl -X POST https://dummyjson.com/auth/login \
  -H 'Content-Type: application/json' \
  -d '{"username":"emilys","password":"emilyspass"}'

# 2. 認証済みリクエストでトークンを使用
curl https://dummyjson.com/auth/me \
  -H 'Authorization: Bearer YOUR_ACCESS_TOKEN_HERE'

JavaScriptで書くと次のようになります。

async function login() {
  const res = await fetch('https://dummyjson.com/auth/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      username: 'emilys',
      password: 'emilyspass'
    })
  });

  if (!res.ok) {
    throw new Error('Login failed');
  }

  return res.json();
}

const auth = await login();

const meRes = await fetch('https://dummyjson.com/auth/me', {
  headers: {
    Authorization: `Bearer ${auth.accessToken}`
  }
});

const me = await meRes.json();
console.log(me);

書き込みはシミュレートされる

DummyJSONはPOST、PUT、PATCH、DELETEも受け付けます。

curl -X POST https://dummyjson.com/products/add \
  -H 'Content-Type: application/json' \
  -d '{"title":"New Product","price":99}'

ただし、これらの書き込みは永続化されません。APIは作成・更新されたように見えるレスポンスを返しますが、サーバー上のデータは変更されません。ページを更新したり再取得したりすると、追加したデータは存在しません。

これは共有公開APIとしての設計です。プロトタイピングには便利ですが、次の用途には向きません。

• 作成したデータを後続画面で読み戻す
• 管理画面のCRUDを通しで検証する
• 複数ユーザーで同じ状態を共有する
• 負荷テストを実行する

DummyJSON以外の選択肢を探す場合は、開発者向けの無料APIのまとめも参考になります。

DummyJSON対JSONPlaceholder対Reqres

DummyJSON以外にも、無料で使える偽REST APIがあります。代表的なのはJSONPlaceholderとReqresです。

ツール	最適な用途	リソース	認証フロー	書き込みは永続的か？
DummyJSON	リアルなEコマーススタイルのデモ	製品、ユーザー、カート、投稿、レシピなど	ログインエンドポイント + ベアラートークン	いいえ（シミュレート）
JSONPlaceholder	簡単なCRUDチュートリアル、最小限のセットアップ	投稿、コメント、ユーザー、ToDo、アルバム、写真	なし	いいえ（シミュレート）
Reqres	認証とリクエスト/レスポンスフローのデモ	ユーザー、登録/ログインのモック	モック登録/ログイン	いいえ（シミュレート）

3つに共通しているのは、読み取り用の固定データが中心で、書き込みは実際には保存されないことです。また、返されるデータ構造をプロジェクト固有のスキーマに合わせて変更することはできません。

使い分けるなら、次のように考えると実装しやすいです。

• 商品、カート、ユーザーを使ったEコマース風UIを作る: DummyJSON
• CRUDチュートリアルや投稿一覧を作る: JSONPlaceholder
• ログインや登録のデモを作る: Reqres

JSONPlaceholderは内部でjson-serverを使用しているため、データモデルは汎用的です。DummyJSONは、より現実の店舗データに近いサンプルが必要なときに向いています。Reqresは、ログイン画面や認証フローのデモに便利です。

公式ソースも確認しておくとよいでしょう。

• JSONPlaceholder
• DummyJSON GitHubリポジトリ

固定のプレースホルダーデータでは不十分な場合

DummyJSONのようなホスト型偽APIは、初期プロトタイプでは非常に便利です。ただし、プロジェクトが具体化すると次のような制限に当たります。

• アプリ固有のフィールドが必要になる
  
  例: subscription_tier、feature_flags、billing_statusなどはDummyJSONのスキーマにはありません。

• 書き込みを永続化したい
  
  カート追加、ユーザー作成、管理画面の更新などは、作成したデータを再取得できないとフロー全体を検証できません。

• エラーケースを意図的に返したい
  
  実際のアプリでは400、401、429、500などの処理が必要です。固定成功レスポンスだけでは、エラーハンドリングを十分に確認できません。

• OpenAPIなどのAPI契約に合わせたい
  
  フロントエンドとバックエンドで合意したスキーマがある場合、モックデータもその契約に一致している必要があります。

この段階では、他人の公開APIを借りるのではなく、自分のAPI仕様に合わせたモックを作るほうが実装が安定します。必要なのは、バックエンドなしで開発できる手軽さを保ちつつ、スキーマ、フィールド名、ステータスコード、エラー応答を制御できる環境です。

Apidogで独自のカスタム偽REST APIを構築する方法

Apidogは、APIの設計、テスト、ドキュメント作成、モックを一箇所で扱うAPIプラットフォームです。DummyJSONのような固定データでは足りなくなったとき、独自スキーマに基づくモックサーバーを作成できます。

基本的な流れは次のとおりです。

1. エンドポイントとスキーマを定義する

まず、モックしたいエンドポイントを作成します。

例:

GET /products

レスポンススキーマには、必要なフィールドを定義します。

{
  "id": 1,
  "title": "Product name",
  "price": 99,
  "stock": 20,
  "category": "electronics"
}

手動で定義することも、既存のOpenAPI/Swaggerファイルをインポートすることもできます。OpenAPIを使うと、フロントエンド、バックエンド、モックの契約を揃えやすくなります。

2. スマートモックでデータを生成する

Apidogはフィールド名と型を読み取り、モックデータを自動生成します。

たとえば、次のようなフィールドでは意味のある値を生成できます。

• email: メールアドレス形式
• price: 数値
• createdAt: 日付
• name: 名前
• status: ステータス値

Fakerのような考え方をAPI設計ツール内で使えるイメージです。スキーマ駆動のモック生成については、OpenAPIスキーマからモックデータを生成するガイドでも解説されています。

3. 値とエッジケースをカスタマイズする

固定の公開APIと違い、自分のモックではレスポンスを制御できます。

たとえば、次のようなケースを用意できます。

• priceを特定の範囲内の数値にする
• statusをactive、paused、cancelledのいずれかにする
• 認証エラー用に401を返す
• レート制限の確認用に429を返す
• サーバーエラー確認用に500を返す
• 不正なペイロードを返してバリデーション処理を確認する

これにより、成功パスだけでなく、実運用で必要になるエラーハンドリングもフロントエンド側で実装できます。

4. モックサーバーを起動してフロントエンドから呼び出す

Apidogはモック用のURLを提供します。フロントエンド側では、DummyJSONを呼び出していたURLをモックサーバーのURLに差し替えます。

curl https://<your-mock-host>/products?limit=5

環境変数を使って切り替えると、開発環境で扱いやすくなります。

const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;

export async function fetchProducts() {
  const res = await fetch(`${API_BASE_URL}/products?limit=5`);

  if (!res.ok) {
    throw new Error(`API error: ${res.status}`);
  }

  return res.json();
}

モックがスキーマから生成されるため、API仕様を更新するとモックもそれに合わせて更新できます。偽データと実際のAPI契約がずれにくくなるのが利点です。

より現実的なデータセットを作る考え方は、現実的なAPIテストデータの作成でも参考になります。

使い分けとしては、短いデモや学習用途ではDummyJSONが最速です。一方で、独自スキーマ、永続的な書き込み、制御可能なエラー、実際に出荷するAPIと同期したモックが必要になったら、Apidogのようなモックサーバーを使うほうが適しています。

よくある質問

DummyJSONは無料で利用できますか？

はい。DummyJSONは無料で利用でき、APIキーも不要です。ブラウザ、curl、アプリから直接パブリックエンドポイントを呼び出せます。ただし、共有無料サービスなので、本番トラフィックや負荷テストではなく、プロトタイピングや学習用途で使うべきです。

DummyJSONは作成または更新したデータを保存しますか？

いいえ。POST、PUT、PATCH、DELETEリクエストは成功したようなレスポンスを返しますが、サーバー上には永続化されません。次の読み取りでは元の固定データが返ります。

永続する書き込みや状態を持つモックが必要な場合は、独自のモックを構築してください。モックAPIのガイドでは、シミュレートされたモックとステートフルなモックの違いについて説明しています。

DummyJSONとモックサーバーの違いは何ですか？

DummyJSONは、誰でも使える固定のホスト型データセットです。データ構造はあらかじめ決まっており、自由には変更できません。

一方、Apidogのようなモックサーバーは、自分のスキーマに基づいて実行できます。返すフィールド、値、ステータスコード、エラーケースを自分で定義できます。

一般的なデモにはDummyJSONを使い、実際のAPI仕様に合わせた開発にはモックサーバーを使うのが実践的です。

明らかなプレースホルダーではなく、リアルなデータを取得できますか？

はい。スキーマからモックデータを生成すれば、よりリアルなデータを取得できます。スキーマ駆動型のツールはフィールド名と型を読み取り、emailならメールアドレス形式、priceなら価格らしい数値、createdAtなら日付形式の値を生成できます。

固定の偽APIから独自モックへ移行する主な理由は、このように自分のAPIに合ったデータを生成できることです。

結論

DummyJSONは、バックエンドがない段階でUIを作るための実用的な無料偽REST APIです。製品、ユーザー、カートなどのリアルなサンプルデータをすぐに取得できるため、チュートリアル、学習、短いプロトタイプには非常に向いています。

ただし、独自フィールド、永続的な書き込み、制御可能なエラー、OpenAPI契約と同期したデータが必要になると、固定の公開APIでは限界があります。

その段階では、固定APIを借りるのではなく、自分の仕様に合わせたカスタム偽REST APIを生成するのが現実的です。Apidogを使えば、スキーマを定義し、そこからリアルなモックデータを生成し、出荷予定のAPIとモックを同期できます。