2-3. APIの使い方とキー管理

更新日：2025年12月7日

2-3. APIの使い方とキー管理について解説します。

※画像は生成AIによるイメージです。

Web APIを利用すると、外部サービスの機能やデータを自分のアプリケーションに組み込めます。しかし、APIキーの管理を誤ると、セキュリティリスクや予期しない課金が発生する可能性があります。

APIの基本的な使い方

fetch APIを使った基本形

// GETリクエスト
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

async/awaitを使った書き方

async function getData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('エラー:', error);
    }
}

HTTPメソッドの使い分け

メソッド	用途	本文
GET	データ取得	なし
POST	データ作成	あり
PUT	データ更新（全体）	あり
PATCH	データ更新（一部）	あり
DELETE	データ削除	なし

APIキーの取得と設定

APIプロバイダに登録：サービスのWebサイトでアカウント作成
APIキーの発行：管理画面からキーを生成
利用制限の設定：IPアドレスやドメインで制限
使用量の監視：ダッシュボードで確認

APIキーの使用方法

ヘッダーに含める方法

fetch('https://api.example.com/data', {
    headers: {
        'Authorization': 'Bearer YOUR_API_KEY',
        'Content-Type': 'application/json'
    }
})

URLパラメータに含める方法

const API_KEY = 'YOUR_API_KEY';
const url = `https://api.example.com/data?apikey=${API_KEY}`;
fetch(url)

APIキーの安全な管理方法

絶対にやってはいけないこと

GitHubなどに直接APIキーをコミット
フロントエンドのコードに直接記述
公開されるファイルに保存

環境変数を使う（Node.js）

# .envファイル
API_KEY=your_secret_api_key_here

# .gitignore に追加
.env

# 使用方法
require('dotenv').config();
const apiKey = process.env.API_KEY;

プロキシサーバーを使う

フロントエンドからは自分のサーバーにリクエストし、サーバー側でAPIキーを付けて外部APIを呼び出します。

// フロントエンド
fetch('/api/weather')

// バックエンド（Node.js）
app.get('/api/weather', async (req, res) => {
    const response = await fetch(
        `https://api.openweather.org/data?appid=${process.env.API_KEY}`
    );
    const data = await response.json();
    res.json(data);
});

エラーハンドリング

async function apiCall() {
    try {
        const response = await fetch('https://api.example.com/data');
        
        // ステータスコードのチェック
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data;
    } catch (error) {
        if (error.message.includes('404')) {
            console.error('データが見つかりません');
        } else if (error.message.includes('401')) {
            console.error('認証エラー：APIキーを確認してください');
        } else if (error.message.includes('429')) {
            console.error('レート制限：しばらく待ってください');
        } else {
            console.error('予期しないエラー:', error);
        }
    }
}

レート制限への対応

多くのAPIには使用回数制限（レート制限）があります。

対策	方法
キャッシュ	同じデータは再取得しない
遅延処理	連続リクエストに間隔を空ける
バッチ処理	複数のリクエストをまとめる
エラー処理	429エラー時は再試行

CORSとその対処法

ブラウザからAPIを直接呼び出す際、CORS（Cross-Origin Resource Sharing）エラーが発生することがあります。

対処方法

プロキシサーバー経由：自分のサーバーを経由させる
CORS対応API使用：CORS許可されたAPIを選ぶ
開発時のみ：ブラウザ拡張機能でCORSを無効化

実践的な例：天気API

// 安全な実装例（バックエンド必要）
class WeatherAPI {
    constructor() {
        this.baseURL = '/api/weather';  // プロキシサーバー
        this.cache = new Map();
    }
    
    async getWeather(city) {
        // キャッシュチェック
        if (this.cache.has(city)) {
            return this.cache.get(city);
        }
        
        try {
            const response = await fetch(`${this.baseURL}?city=${city}`);
            if (!response.ok) throw new Error(response.status);
            
            const data = await response.json();
            
            // キャッシュに保存（5分間）
            this.cache.set(city, data);
            setTimeout(() => this.cache.delete(city), 300000);
            
            return data;
        } catch (error) {
            console.error('天気データの取得に失敗:', error);
            throw error;
        }
    }
}

まとめ

APIの利用は強力ですが、セキュリティとコスト管理が重要です。 APIキーは環境変数やプロキシサーバーで保護し、レート制限やエラーハンドリングを適切に実装しましょう。次のページでは、よく使われるライブラリを一覧で紹介します。

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