無料で使えるAPI（2025年版）

JavaScript

2025.04.062025.10.15

開発・学習用無料API 一覧（2025年版）
各APIの詳しい説明
学習用途まとめ
使い方の例（HTML＋JSデモ）

開発・学習用無料API 一覧（2025年版）

API名	主な用途	エンドポイント例	無料でできる範囲	特徴・使い方
JSONPlaceholder	REST APIの練習（GET/POSTなど）	`https://jsonplaceholder.typicode.com/posts`	完全無料・認証不要	ダミーデータを返す有名API。CRUD操作（GET/POST/PUT/DELETE）の練習に最適。
ReqRes.in	フロントエンドのリクエスト練習	`https://reqres.in/api/users`	完全無料・認証不要	`fetch()`や`axios`の練習に最適。POSTの結果をモックで返す。
DummyJSON	フェイク商品／ユーザー／Todoデータ	`https://dummyjson.com/products`	無料・認証不要	JSONPlaceholderより実践的。検索・ページング・フィルタ対応。
Fake Store API	Eコマースサイト用ダミーデータ	`https://fakestoreapi.com/products`	無料・認証不要	商品名・価格・カテゴリなど。ECサイト模擬開発に最適。
Public APIs.dev	公開API検索	`https://api.publicapis.dev/entries`	無料	世界中の無料APIを一覧取得可能。API探索用API。
Mocki.io	自作モックAPI生成	任意URL（例：`https://mocki.io/v1/xxxx`）	無料（制限あり）	自分でJSONレスポンスを設定できる。バックエンドなしでフロントテスト可能。
Beeceptor	APIモック＋リクエスト監視	`https://<your-endpoint>.free.beeceptor.com`	無料枠あり	実際のAPI呼び出しをログで確認可能。Webhookテストにも便利。
Glitch JSON API	自分でAPIをホスト	任意	無料（アカウント要）	JSコードで好きなレスポンスを作れる。Node.jsでAPI学習に最適。
MockAPI.io	フルCRUD対応の自作API	`https://<your-app>.mockapi.io/api/v1/users`	無料枠あり	GUIでデータ構造を定義して、実際にGET/POSTなどを試せる。

各APIの詳しい説明

1. JSONPlaceholder

URL: https://jsonplaceholder.typicode.com/
特徴:
- 最も有名な「モックAPI」
- すぐ使えるダミーデータ（posts, comments, users, todosなど）
- GET, POST, PUT, DELETE の挙動を再現してくれる
例:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => console.log(data));

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(data => console.log(data));

JavaScript

2. ReqRes.in

URL: https://reqres.in/
特徴:
- UIが見やすく、APIの入門教材として有名
- ユーザーデータを取得・作成するリクエストの模擬練習ができる
例:

fetch('https://reqres.in/api/users?page=2')
  .then(res => res.json())
  .then(data => console.log(data));

fetch('https://reqres.in/api/users?page=2')
  .then(res => res.json())
  .then(data => console.log(data));

JavaScript

3. DummyJSON

URL: https://dummyjson.com/
特徴:
- JSONPlaceholderの発展版
- limit, skip, search など実践的なクエリ対応
- 商品、ユーザー、ToDo、コメントなど多数のカテゴリあり
例:

fetch('https://dummyjson.com/products/search?q=phone')
  .then(res => res.json())
  .then(console.log);

fetch('https://dummyjson.com/products/search?q=phone')
  .then(res => res.json())
  .then(console.log);

JavaScript

4. Fake Store API

URL: https://fakestoreapi.com/
特徴:
- ECサイト開発の練習用
- 商品データ（画像・価格・カテゴリ）を返す
例:

fetch('https://fakestoreapi.com/products')
  .then(res => res.json())
  .then(console.log);

fetch('https://fakestoreapi.com/products')
  .then(res => res.json())
  .then(console.log);

JavaScript

5. Public APIs.dev

URL: https://api.publicapis.dev/entries
特徴:
- 「無料で使えるAPIを探すAPI」
- カテゴリ（Weather, News, Financeなど）で絞り込み可能
例:

fetch('https://api.publicapis.dev/entries?category=Animals')
  .then(res => res.json())
  .then(console.log);

fetch('https://api.publicapis.dev/entries?category=Animals')
  .then(res => res.json())
  .then(console.log);

JavaScript

6. MockAPI.io

URL: https://mockapi.io
特徴:
- GUIで「リソース（users, postsなど）」を定義
- 自動的にREST APIを生成してくれる
- CRUD操作・ページング・ソート・フィルタも可
用途: SPAやReact/Vueアプリのモックバックエンドとして最強。

学習用途まとめ

学びたいこと	おすすめAPI	理由
fetch / axios の練習	JSONPlaceholder / ReqRes	認証不要・即動作
REST構造理解	DummyJSON / Fake Store	実データに近い構造
API設計・モック作成	MockAPI.io / Mocki.io	GUIで自作APIを生成
API探索	Public APIs.dev	世界中のAPIを発見できる
HTTPリクエスト監視	Beeceptor	ログ可視化・Webhook確認

使い方の例（HTML＋JSデモ）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>API練習デモ</title>
</head>
<body>
<h2>JSONPlaceholder デモ</h2>
<button id="load">データ取得</button>
<pre id="result"></pre>

<script>
document.getElementById("load").addEventListener("click", async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();
  document.getElementById("result").textContent = JSON.stringify(data, null, 2);
});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>API練習デモ</title>
</head>
<body>
<h2>JSONPlaceholder デモ</h2>
<button id="load">データ取得</button>
<pre id="result"></pre>

<script>
document.getElementById("load").addEventListener("click", async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();
  document.getElementById("result").textContent = JSON.stringify(data, null, 2);
});
</script>
</body>
</html>