4-3. 簡単なAPIの利用

更新日：2025年12月7日

4-3. 簡単なAPIの利用について解説します。

API（Application Programming Interface）を使うと、外部サービスのデータや機能を自分のWebサイトで利用できます。ここでは、無料で使えるAPIを実際に使ってみます。

APIの基本概念

エンドポイント：APIにアクセスするためのURL
リクエスト：APIへのデータ要求
レスポンス：APIからの返答（通常JSON形式）
APIキー：認証用のキー（必要な場合）
レート制限：使用回数の制限

fetch APIの基本

JavaScriptのfetch APIを使って、外部APIにアクセスします。

// 基本的な使い方
fetch('APIのURL')
    .then(response => response.json())  // JSONに変換
    .then(data => {
        console.log(data);  // データを使用
    })
    .catch(error => {
        console.error('エラー:', error);
    });

実例1：天気API（無料）

// OpenWeatherMap API（無料枠あり）
const apiKey = 'YOUR_API_KEY';
const city = 'Tokyo';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`;

fetch(url)
    .then(response => response.json())
    .then(data => {
        console.log(`${city}の天気：${data.weather[0].description}`);
        console.log(`気温：${data.main.temp}℃`);
        console.log(`湿度：${data.main.humidity}%`);
    });

実例2：ユーザー情報API（テスト用）

// JSONPlaceholder（テスト用の無料API）
fetch('https://jsonplaceholder.typicode.com/users/1')
    .then(response => response.json())
    .then(user => {
        document.getElementById('result').innerHTML = `
            <h3>${user.name}</h3>
            <p>Email: ${user.email}</p>
            <p>会社: ${user.company.name}</p>
            <p>住所: ${user.address.city}</p>
        `;
    });

無料で使えるAPI一覧

API名	用途	認証
JSONPlaceholder	テスト用データ	不要
OpenWeatherMap	天気情報	APIキー必要（無料）
PokeAPI	ポケモンデータ	不要
GitHub API	GitHubの情報	一部機能は認証必要
Dog API	犬の画像	不要

PHPでAPIを利用する

PHPからAPIを呼び出し、データを取得することもできます。 APIキーをPHP側で管理することで、セキュリティを向上できます。

// PHP側（get_weather.php）
<?php
$apiKey = 'YOUR_API_KEY';  // サーバー側で管理
$city = $_GET['city'] ?? 'Tokyo';
$url = "https://api.openweathermap.org/data/2.5/weather?q={$city}&appid={$apiKey}&units=metric&lang=ja";

// cURLを使ってAPIを呼び出し
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);

// JSONとして出力
header('Content-Type: application/json');
echo $response;
?>

// JavaScript側
fetch('get_weather.php?city=Osaka')
    .then(response => response.json())
    .then(data => {
        console.log('大阪の天気:', data.weather[0].description);
    });

エラー処理の実装

// 適切なエラー処理
async function fetchData(url) {
    try {
        const response = await fetch(url);
        
        // HTTPステータスをチェック
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data;
    } catch (error) {
        // エラーの種類に応じて処理
        if (error.name === 'TypeError') {
            console.error('ネットワークエラー:', error);
        } else {
            console.error('APIエラー:', error);
        }
        return null;
    }
}

// 使用例
fetchData('https://api.example.com/data')
    .then(data => {
        if (data) {
            // データを処理
        } else {
            // エラー時の処理
        }
    });

APIキーの管理

重要：APIキーは絶対にJavaScriptコードに直接書かないでください。悪用される危険があります。必ずサーバー側（PHP）で管理しましょう。

❌ 悪い例：JavaScriptにAPIキーを記述
✅ 良い例：PHPでAPIを呼び出し、結果をJavaScriptに返す
✅ 良い例：環境変数でAPIキーを管理

まとめ

APIを使うことで、外部サービスの機能を簡単に活用できます。無料のAPIで練習してから、本格的なAPIを使用することをお勧めします。次章では、PHPとJavaScriptを組み合わせた実践的なコード例を学習します。

免責事項
本コンテンツは2025年12月時点の情報に基づいて作成されている。最新の情報については公式ドキュメントを参照されたい。