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

windows JavaScript
2025.04.06
スポンサーリンク

「複数の無料APIを比較して呼び出せる実践HTML＋JSデモ」を紹介します。
CodePen / JSFiddle にそのまま貼って動作確認できる形式です。

無料API 比較デモ

（JSONPlaceholder / ReqRes / DummyJSON / FakeStore）

🔹ボタンでAPIを切り替え
🔹取得したJSONを整形して表示
🔹fetch() の使い方を比較して学べる

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無料API比較デモ</title>
<style>
body {
  font-family: "Segoe UI", sans-serif;
  background: #f5f6fa;
  color: #333;
  padding: 20px;
  text-align: center;
}
h1 {
  color: #0078d7;
}
button {
  margin: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  background: #0078d7;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}
button:hover {
  background: #005fa3;
}
pre {
  text-align: left;
  background: #1e1e1e;
  color: #dcdcdc;
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  max-height: 60vh;
}
footer {
  margin-top: 20px;
  font-size: 0.9em;
  color: #666;
}
</style>
</head>
<body>

<h1>🧩 無料API 比較デモ</h1>
<p>下のボタンをクリックして、実際にデータを取得してみよう！</p>

<div>
  <button onclick="loadAPI('jsonplaceholder')">JSONPlaceholder</button>
  <button onclick="loadAPI('reqres')">ReqRes.in</button>
  <button onclick="loadAPI('dummyjson')">DummyJSON</button>
  <button onclick="loadAPI('fakestore')">Fake Store API</button>
</div>

<pre id="output">ここにAPIの結果が表示されます</pre>

<script>
async function loadAPI(type) {
  let url = "";
  let desc = "";

  switch (type) {
    case "jsonplaceholder":
      url = "https://jsonplaceholder.typicode.com/posts/1";
      desc = "JSONPlaceholder（ブログ記事データ）";
      break;
    case "reqres":
      url = "https://reqres.in/api/users/2";
      desc = "ReqRes.in（ユーザーデータ）";
      break;
    case "dummyjson":
      url = "https://dummyjson.com/products/1";
      desc = "DummyJSON（商品データ）";
      break;
    case "fakestore":
      url = "https://fakestoreapi.com/products/1";
      desc = "Fake Store API（EC商品データ）";
      break;
  }

  const output = document.getElementById("output");
  output.textContent = `📡 ${desc}\n\n読み込み中...`;

  try {
    const res = await fetch(url);
    const data = await res.json();
    output.textContent = `📡 ${desc}\n\nURL: ${url}\n\n` +
      JSON.stringify(data, null, 2);
  } catch (e) {
    output.textContent = "⚠️ 取得に失敗しました\n" + e;
  }
}
</script>
</body>
</html>
HTML

学習ポイントまとめ

学べる要素説明
fetch() の基本PromiseベースのHTTP通信。API学習の基礎。
異なるAPI構造の比較JSONPlaceholderはブログ風、FakeStoreはEC風。
非同期処理 (async/await)シンプルに非同期を扱う構文。
エラーハンドリングネットワークエラーなどをtry/catchで処理。

See the Pen Free API Card View Comparison Demo by MONO365 -Color your days- (@monoqlo365) on CodePen. 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>無料APIカードビュー比較デモ</title>
<style>
body {
  font-family: "Segoe UI", sans-serif;
  background: #f4f6fb;
  color: #333;
  margin: 0;
  padding: 30px;
}
h1 {
  text-align: center;
  color: #0078d7;
  margin-bottom: 10px;
}
.buttons {
  text-align: center;
  margin-bottom: 20px;
}
button {
  margin: 5px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background: #0078d7;
  color: white;
  cursor: pointer;
  transition: 0.2s;
}
button:hover {
  background: #005fa3;
}
#cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  padding: 10px;
}
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  padding: 15px;
  transition: transform 0.2s;
}
.card:hover {
  transform: translateY(-4px);
}
.card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 10px;
}
.card h3 {
  margin: 6px 0;
  color: #0078d7;
}
.card p {
  font-size: 0.9em;
  color: #555;
}
footer {
  text-align: center;
  margin-top: 20px;
  font-size: 0.85em;
  color: #666;
}
</style>
</head>
<body>

<h1>🧩 無料APIカードビュー比較デモ</h1>
<div class="buttons">
  <button onclick="loadCards('jsonplaceholder')">JSONPlaceholder</button>
  <button onclick="loadCards('reqres')">ReqRes</button>
  <button onclick="loadCards('dummyjson')">DummyJSON</button>
  <button onclick="loadCards('fakestore')">FakeStore</button>
</div>

<div id="cards">ボタンを押してデータを読み込みます</div>

<footer>Made for API学習 by Halu × GPT-5</footer>

<script>
async function loadCards(api) {
  const container = document.getElementById("cards");
  container.innerHTML = "⏳ 読み込み中...";
  let url = "";

  try {
    if (api === "jsonplaceholder") {
      url = "https://jsonplaceholder.typicode.com/posts?_limit=6";
      const res = await fetch(url);
      const data = await res.json();
      container.innerHTML = data.map(d => `
        <div class="card">
          <h3>${d.title}</h3>
          <p>${d.body.slice(0, 80)}...</p>
          <p><b>ID:</b> ${d.id}</p>
        </div>
      `).join("");

    } else if (api === "reqres") {
      url = "https://reqres.in/api/users?page=1";
      const res = await fetch(url);
      const { data: users } = await res.json();
      container.innerHTML = users.map(u => `
        <div class="card">
          <img src="${u.avatar}" alt="user">
          <h3>${u.first_name} ${u.last_name}</h3>
          <p>${u.email}</p>
        </div>
      `).join("");

    } else if (api === "dummyjson") {
      url = "https://dummyjson.com/products?limit=6";
      const res = await fetch(url);
      const { products } = await res.json();
      container.innerHTML = products.map(p => `
        <div class="card">
          <img src="${p.thumbnail}" alt="product">
          <h3>${p.title}</h3>
          <p>💰 $${p.price}</p>
          <p>${p.description.slice(0, 70)}...</p>
        </div>
      `).join("");

    } else if (api === "fakestore") {
      url = "https://fakestoreapi.com/products?limit=6";
      const res = await fetch(url);
      const data = await res.json();
      container.innerHTML = data.map(p => `
        <div class="card">
          <img src="${p.image}" alt="product">
          <h3>${p.title}</h3>
          <p>💰 $${p.price}</p>
          <p>${p.description.slice(0, 70)}...</p>
        </div>
      `).join("");
    }

  } catch (err) {
    container.innerHTML = `⚠️ 読み込みエラー: ${err}`;
  }
}
</script>

</body>
</html>
HTML

特徴

項目内容
対応APIJSONPlaceholder / ReqRes / DummyJSON / FakeStore
UI各APIのデータをカード形式で自動表示
学べることfetch + async/await、JSON解析、動的DOM生成
動作場所CodePen / JSFiddle / VSCode Live Server などでOK

学習の見どころ

学習テーマ説明
API構造の違い各APIのレスポンス形式（posts, users, productsなど）を視覚的に比較できる
DOM生成map() + join("") でHTMLをまとめて出力
エラーハンドリングtry/catch でネットワーク失敗を処理
fetch()すべての通信をPromiseベースで統一
前へ次へ
12345678910111213
スポンサーリンク
タイトルとURLをコピーしました