PHPで作るデータベースからAPIを作成してみよう

学習目的

データベースは通常、同じサーバー内でPHPから接続して利用します。
そのため、別サーバーにあるデータベースに直接アクセスすることはできません。

たとえば、

01サーバー：システム（データベース管理用）
02サーバー：Webサイト表示用

という構成の場合、02サーバーが01サーバーのデータベースに直接接続することはできません。

このようなときに使われるのが「API（エーピーアイ）」です。
APIを使うことで、データベースの情報を一旦JSONデータに変換して公開し、
他のサーバーやJavaScriptなど、別のプログラムからも利用できるようになります。

ここでは、PHPで作ったデータベースの情報をAPI化し、JSON形式で出力する方法を学びます。
この仕組みを使うことで、将来的にJavaScriptからデータを読み込んで表示するなど、さまざまな連携ができるようになります。

フォルダとファイル名

php-dbapi フォルダを作成します。ファイル構成は以下になります。

php-dbapi/
├─ common.php        ← DB接続設定（PDO）
├─ api.php           ← JSON出力（APIエンドポイント）
├─ main.php          ← 動作確認ページ（説明用）
└─ data.sql          ← 初期データ（CREATE TABLE + INSERT）
php-table.php
js-table.html

common.php(データベース接続)

<?php
$dsn = 'mysql:host=localhost;dbname=testdb;charset=utf8mb4';
$user = 'root';
$password = '';

try {
    $pdo = new PDO($dsn, $user, $password, [
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
    ]);
} catch (PDOException $e) {
    echo json_encode(['error' => $e->getMessage()]);
    exit;
}
?>

data.sql(サンプルSQL）

CREATE TABLE apidata (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,
    category VARCHAR(30),
    price INT,
    stock INT,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

INSERT INTO apidata (name, category, price, stock) VALUES
('りんごジュース', '果物', 120, 50),
('バナナジュース', '果物', 90, 80),
('オレンジジュース', '飲料', 150, 25),
('ミネラルウォーター', '飲料', 100, 100),
('ポテトチップス', 'お菓子', 180, 40);

api.php(エンドポイント生成）

<?php
// ============================================
// api.php：データベースからJSONを出力するAPI
// ============================================
header('Content-Type: application/json; charset=UTF-8');
require 'common.php';

$sql = "SELECT * FROM apidata WHERE stock > 0";
$stmt = $pdo->query($sql);
$data = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
?>

`header('Content-Type: application/json; charset=UTF-8');`

header()を使って、このPHPファイルが「HTML」ではなく「JSON」を返すことを明示しています。
ブラウザや他のプログラムに対して「このページはJSONデータですよ」と伝えるためです。

`json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT)`

PHPの配列をJSON形式に変換します。
JSON_UNESCAPED_UNICODE → 日本語をUnicodeエスケープせずにそのまま表示
JSON_PRETTY_PRINT → 改行やインデントをつけて見やすく整形

main.php(エンドポイントの確認)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>在庫API出力テスト</title>
<style>
body { font-family: sans-serif; line-height: 1.8; }
pre { background: #f8f8f8; padding: 10px; border-radius: 5px; }
</style>
</head>
<body>
<h1>在庫データAPI（JSON出力）</h1>
<p><a href="api.php" target="_blank">api.phpを開く</a></p>
<p>下記のようにブラウザ上でJSON形式が整形表示されます。</p>
<pre>
例：
[
  {
    "id": 1,
    "name": "りんご",
    "category": "果物",
    "price": 120,
    "stock": 50,
    "updated_at": "2025-10-11 10:00:00"
  },
  ...
]
</pre>
</body>
</html>

jsonファイルをPHPで読み込む

PHPでAPIを読み込んでテーブルに出力してみます。php-table.phpとして作成してみましょう。

<?php
// PHPでAPIを読み込む
$json = file_get_contents('http://localhost/php-dbapi/api.php');
$data = json_decode($json, true);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHPでAPI表示</title>
<style>
table { border-collapse: collapse; width: 80%; margin: 20px auto; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
th { background: #f0f0f0; }
</style>
</head>
<body>
<h1>商品データ一覧（PHPで取得）</h1>
<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名</th>
      <th>カテゴリ</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody>
    <?php foreach ($data as $item): ?>
      <tr>
        <td><?= htmlspecialchars($item['id']) ?></td>
        <td><?= htmlspecialchars($item['name']) ?></td>
        <td><?= htmlspecialchars($item['category']) ?></td>
        <td><?= htmlspecialchars($item['price']) ?></td>
        <td><?= htmlspecialchars($item['stock']) ?></td>
      </tr>
    <?php endforeach; ?>
  </tbody>
</table>
</body>
</html>

file_get_contents()
- → 指定したURLやファイルを読み込み、文字列として取得します。
- この場合、api.php の出力(JSON)を文字列で受け取ります。
json_decode()
- → JSON文字列をPHPの配列に変換します。
- 第2引数に true を指定すると「連想配列」として扱えます

JavaScriptでAPIを読み込んでHTMLに出力

fetch() を使ってPHPのAPIからデータを取得する
取得したJSONデータをJavaScriptで処理してHTML要素（テーブルなど）に出力する
XAMPPでは、api.phpと同じフォルダ内に作成する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptでAPI表示</title>
<style>
table { border-collapse: collapse; width: 80%; margin: 20px auto; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }
th { background: #f0f0f0; }
</style>
</head>
<body>
<h1>商品データ一覧（JavaScriptで取得）</h1>
<table id="product-table">
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名</th>
      <th>カテゴリ</th>
      <th>価格</th>
      <th>在庫</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
fetch('api.php')
  .then(response => response.json())
  .then(data => {
    const tbody = document.querySelector('#product-table tbody');
    data.forEach(item => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.category}</td>
        <td>${item.price}</td>
        <td>${item.stock}</td>
      `;
      tbody.appendChild(tr);
    });
  })
  .catch(error => console.error('Error:', error));
</script>
</body>
</html>