🛰️ Web API入門＆実践ガイド

HTML + CSS + JavaScript + PHP で学ぶ、つかう、つよくなる Web API。

概要

Web APIは、アプリやサービス同士がデータや機能をやり取りするための「約束事（インターフェイス）」です。 本ページでは、REST / JSON を中心に、クライアント(JavaScript)とサーバー(PHP)の両方から扱う方法を、実行可能なサンプル付きで解説します。

基本

RESTの基本用語

リソースAPIで扱う対象（例: /users, /posts）
メソッドGET（取得）、POST（作成）、PUT/PATCH（更新）、DELETE（削除）
表現主にJSON。Content-Type: application/json
ステータス200/201成功、400/401/403クライアント、500サーバー

JavaScriptでの基本リクエスト

async function getData() {
  const res = await fetch('api/proxy.php?url=' + encodeURIComponent('https://jsonplaceholder.typicode.com/posts/1'));
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const json = await res.json();
  console.log(json);
}

※ 直接外部APIへfetchするとCORSで失敗することが多いので、同一オリジンの proxy.php 経由にしています。

基礎

PHP cURLの基本

<?php
$ch = curl_init('https://jsonplaceholder.typicode.com/posts/1');
curl_setopt_array($ch, [
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_TIMEOUT => 10,
  CURLOPT_HTTPHEADER => ['Accept: application/json']
]);
$body = curl_exec($ch);
$code = curl_getinfo($ch, CURLINFO_RESPONSE_CODE);
curl_close($ch);
if ($code === 200) {
  header('Content-Type: application/json; charset=utf-8');
  echo $body;
} else {
  http_response_code($code);
  echo json_encode(['error' => 'Request failed', 'status' => $code]);
}

エラー設計（最小パターン）

  • タイムアウト（ネットワーク遅延）
  • 4xx（リクエスト条件不備・権限不足）
  • 5xx（先方サーバ障害）
  • レート制限（429）時の再試行戦略（指数バックオフ）
const sleep = (ms) => new Promise(r => setTimeout(r, ms));
async function fetchWithRetry(input, init, max=3) {
  for (let i=0; i<max; i++) {
    const res = await fetch(input, init);
    if (res.status !== 429) return res;
    await sleep(500 * (2 ** i)); // 0.5s, 1s, 2s...
  }
  throw new Error('Rate limited');
}

最新情報（APIエクスプローラ）

右側のセレクタからAPIを選び、エンドポイントを実行。レスポンスはJSONビューワで確認できます。

— — ms — B 
{ }
🔐 認証つきAPIを試すには？

多くのAPIはヘッダーに Authorization: Bearer <TOKEN> を付けます。学習用としては proxy.php 内で固定ヘッダーを追加する/環境変数から読むなどの方法があります。実運用では トークンをフロントに露出しない ようサーバ側で仲介してください。

応用

ページネーション＆集約

async function collectAllPages(makeUrl, max=5) {
  const all = [];
  for (let i=1; i<=max; i++) {
    const url = makeUrl(i);
    const res = await fetch('api/proxy.php?url=' + encodeURIComponent(url));
    if (!res.ok) break;
    const data = await res.json();
    if (!Array.isArray(data) || data.length === 0) break;
    all.push(...data);
  }
  return all;
}

型安全（TS）とZodでバリデーション

本ページは素のJSですが、実務ではTypeScript＋Zodなどでレスポンスの型検証を行うと堅牢になります。

// 例：Zod
// const User = z.object({ id: z.number(), name: z.string() });
// const parsed = User.array().parse(json);

発展

// SSE受信例（要対応サーバ）
// const es = new EventSource('/sse');
// es.onmessage = (e) => console.log(JSON.parse(e.data));