【初心者向け】JavaScript APIの呼び出し方 - 基礎から実践まで

JavaScriptでAPIを呼び出すって、難しそうに感じませんか？

でも実は、思っているよりもずっと簡単なんです。今の時代、Webアプリを作るときにAPIは必要不可欠ですよね。

この記事では、JavaScript初心者の方でもAPIの呼び出し方がしっかりと身につくように解説します。基本的な使い方から実際に動くサンプルコードまで、実践で使えるレベルまで一緒に学んでいきましょう。

APIって何？

APIの基本概念

API（Application Programming Interface）は、異なるソフトウェア間でデータをやり取りするためのインターフェースのことです。

簡単に言うと、「決められた方法でお願いすると、決められた形式でデータを返してくれるサービス」なんです。

例えば、こんなイメージです。

あなたのアプリ → 「天気情報ください」 → 天気APIサーバー
あなたのアプリ ← 「東京：晴れ、25度」 ← 天気APIサーバー

レストランで注文するのと似ていますね。メニューから選んで注文すると、決められた料理が提供されます。

なぜAPIが必要なの？

APIを使うことで、こんな便利なことができます。

天気情報を自動で取得
ユーザー情報を管理
商品データを表示
地図情報を活用

これらの機能を一から作るのはとても大変です。でも、APIを使えば簡単に実現できるんです。

JavaScriptでAPIを呼び出す基本的な方法

fetch()の基本的な使い方

現代のJavaScriptでは、fetch()関数を使ってAPIを呼び出すのが一般的です。

// 基本的な使い方
fetch('https://api.example.com/users')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

このコードは、以下のような流れで動作します。

fetch()でAPIにリクエストを送信
レスポンスをJSON形式に変換
データを表示
エラーが発生した場合はキャッチ

async/awaitを使った書き方

より読みやすく書くには、async/awaitを使います。

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

fetchUserData();

async/awaitを使うと、コードが順番に実行されているように見えるので理解しやすいです。

実用的なサンプルコード

天気情報を取得してみよう

実際に天気情報を取得するコードを書いてみましょう。

async function getWeatherData(city) {
    const apiKey = 'YOUR_API_KEY';
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`;
    
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            throw new Error(`エラーが発生しました: ${response.status}`);
        }
        
        const data = await response.json();
        
        return {
            city: data.name,
            temperature: data.main.temp,
            description: data.weather[0].description,
            humidity: data.main.humidity
        };
    } catch (error) {
        console.error('天気情報の取得に失敗しました:', error);
        return null;
    }
}

// 使用例
getWeatherData('Tokyo').then(weather => {
    if (weather) {
        console.log(`${weather.city}の天気: ${weather.description}`);
        console.log(`気温: ${weather.temperature}°C`);
    }
});

このコードでは、OpenWeatherMap APIを使って天気情報を取得しています。

ユーザー情報を表示してみよう

次に、ユーザー情報を取得して画面に表示するコードを作ってみましょう。

async function displayUsers() {
    const userList = document.getElementById('user-list');
    
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const users = await response.json();
        
        userList.innerHTML = users.map(user => `
            <div class="user-card">
                <h3>${user.name}</h3>
                <p>メール: ${user.email}</p>
                <p>電話: ${user.phone}</p>
                <p>会社: ${user.company.name}</p>
            </div>
        `).join('');
        
    } catch (error) {
        userList.innerHTML = '<p>ユーザー情報の取得に失敗しました</p>';
        console.error('エラー:', error);
    }
}

このコードでは、JSONPlaceholderという練習用のAPIを使っています。

検索機能を実装してみよう

検索機能付きのAPIコールも作ってみましょう。

async function searchItems(query) {
    const searchUrl = `https://api.example.com/search?q=${encodeURIComponent(query)}`;
    
    try {
        const response = await fetch(searchUrl);
        const results = await response.json();
        
        return results.items || [];
    } catch (error) {
        console.error('検索エラー:', error);
        return [];
    }
}

// 検索フォームの処理
document.getElementById('search-form').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const query = document.getElementById('search-input').value;
    const resultsDiv = document.getElementById('search-results');
    
    if (!query.trim()) {
        resultsDiv.innerHTML = '<p>検索キーワードを入力してください</p>';
        return;
    }
    
    resultsDiv.innerHTML = '<p>検索中...</p>';
    
    const results = await searchItems(query);
    
    if (results.length > 0) {
        resultsDiv.innerHTML = results.map(item => `
            <div class="search-item">
                <h4>${item.title}</h4>
                <p>${item.description}</p>
            </div>
        `).join('');
    } else {
        resultsDiv.innerHTML = '<p>検索結果が見つかりませんでした</p>';
    }
});

このように、ユーザーの入力に応じてAPIを呼び出すことができます。

HTTPメソッドの使い分け

APIを呼び出す際には、目的に応じて適切なHTTPメソッドを使い分けます。

GET - データの取得

データを取得する時に使います。

// GETリクエスト（デフォルト）
async function getUser(id) {
    const response = await fetch(`https://api.example.com/users/${id}`);
    return await response.json();
}

POST - データの送信

新しいデータを作成する時に使います。

async function createUser(userData) {
    const response = await fetch('https://api.example.com/users', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData)
    });
    
    return await response.json();
}

// 使用例
const newUser = {
    name: '田中太郎',
    email: 'tanaka@example.com',
    age: 30
};

createUser(newUser).then(result => {
    console.log('ユーザーが作成されました:', result);
});

PUT - データの更新

既存のデータを更新する時に使います。

async function updateUser(id, userData) {
    const response = await fetch(`https://api.example.com/users/${id}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(userData)
    });
    
    return await response.json();
}

DELETE - データの削除

データを削除する時に使います。

async function deleteUser(id) {
    const response = await fetch(`https://api.example.com/users/${id}`, {
        method: 'DELETE'
    });
    
    return response.ok;
}

エラーハンドリング

APIを呼び出す際は、エラーハンドリングをしっかり実装することが重要です。

HTTPステータスコードを確認しよう

async function fetchWithErrorHandling(url) {
    try {
        const response = await fetch(url);
        
        if (!response.ok) {
            switch (response.status) {
                case 400:
                    throw new Error('リクエストが正しくありません');
                case 401:
                    throw new Error('認証が必要です');
                case 403:
                    throw new Error('アクセス権限がありません');
                case 404:
                    throw new Error('データが見つかりません');
                case 500:
                    throw new Error('サーバーエラーが発生しました');
                default:
                    throw new Error(`エラーが発生しました: ${response.status}`);
            }
        }
        
        return await response.json();
    } catch (error) {
        console.error('API呼び出しエラー:', error);
        throw error;
    }
}

このように、ステータスコードに応じて適切なエラーメッセージを表示できます。

ネットワークエラーの処理

ネットワークの問題でAPIが呼び出せない場合もあります。

async function fetchWithRetry(url, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            const response = await fetch(url);
            
            if (response.ok) {
                return await response.json();
            }
            
            // 最後の試行でない場合は再試行
            if (i < maxRetries - 1) {
                console.log(`再試行 ${i + 1}/${maxRetries - 1}`);
                await new Promise(resolve => setTimeout(resolve, 1000));
            }
            
        } catch (error) {
            if (i === maxRetries - 1) {
                throw new Error('接続できませんでした');
            }
        }
    }
}

このように、失敗した場合に自動的に再試行する仕組みを作ることもできます。

認証が必要なAPIの呼び出し

多くのAPIでは、認証が必要です。

APIキーを使用する場合

async function fetchWithApiKey(url, apiKey) {
    const response = await fetch(url, {
        headers: {
            'Authorization': `Bearer ${apiKey}`,
            'Content-Type': 'application/json'
        }
    });
    
    return await response.json();
}

Basic認証を使用する場合

async function fetchWithBasicAuth(url, username, password) {
    const credentials = btoa(`${username}:${password}`);
    
    const response = await fetch(url, {
        headers: {
            'Authorization': `Basic ${credentials}`,
            'Content-Type': 'application/json'
        }
    });
    
    return await response.json();
}

実践的な完全なサンプル

最後に、実際に動作するニュース記事取得アプリを作ってみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>ニュース記事取得アプリ</title>
    <style>
        .news-item {
            border: 1px solid #ddd;
            margin: 10px 0;
            padding: 15px;
            border-radius: 5px;
        }
        .loading {
            text-align: center;
            color: #666;
        }
        .error {
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>最新ニュース</h1>
    <button id="load-news">ニュースを読み込む</button>
    <div id="news-container"></div>

    <script>
        class NewsApp {
            constructor() {
                this.container = document.getElementById('news-container');
                this.loadButton = document.getElementById('load-news');
                this.init();
            }
            
            init() {
                this.loadButton.addEventListener('click', () => this.loadNews());
            }
            
            async loadNews() {
                this.showLoading();
                
                try {
                    const articles = await this.fetchNews();
                    this.displayNews(articles);
                } catch (error) {
                    this.showError('ニュースの取得に失敗しました');
                }
            }
            
            async fetchNews() {
                const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
                
                if (!response.ok) {
                    throw new Error(`エラーが発生しました: ${response.status}`);
                }
                
                return await response.json();
            }
            
            displayNews(articles) {
                const newsHtml = articles.map(article => `
                    <div class="news-item">
                        <h3>${article.title}</h3>
                        <p>${article.body}</p>
                        <small>記事ID: ${article.id}</small>
                    </div>
                `).join('');
                
                this.container.innerHTML = newsHtml;
            }
            
            showLoading() {
                this.container.innerHTML = '<div class="loading">読み込み中...</div>';
            }
            
            showError(message) {
                this.container.innerHTML = `<div class="error">${message}</div>`;
            }
        }
        
        // アプリケーションの初期化
        const app = new NewsApp();
    </script>
</body>
</html>

このコードでは、クラスを使って整理された構造でAPIを呼び出しています。

よくある問題と解決策

CORSエラーの対処

「CORSエラー」が発生することがあります。

これは、ブラウザのセキュリティ機能によるものです。

// プロキシサーバーを使用する場合
async function fetchWithProxy(url) {
    const proxyUrl = `https://cors-anywhere.herokuapp.com/${url}`;
    const response = await fetch(proxyUrl);
    return await response.json();
}

ただし、本格的なアプリケーションでは、サーバーサイドでAPIを呼び出すことをおすすめします。

レート制限の対応

APIには呼び出し回数の制限があることが多いです。

class RateLimiter {
    constructor(maxRequests = 10, timeWindow = 60000) {
        this.maxRequests = maxRequests;
        this.timeWindow = timeWindow;
        this.requests = [];
    }
    
    async canMakeRequest() {
        const now = Date.now();
        this.requests = this.requests.filter(time => now - time < this.timeWindow);
        
        if (this.requests.length >= this.maxRequests) {
            const oldestRequest = Math.min(...this.requests);
            const waitTime = this.timeWindow - (now - oldestRequest);
            await new Promise(resolve => setTimeout(resolve, waitTime));
        }
        
        this.requests.push(now);
        return true;
    }
}

このように、呼び出し回数を制限する仕組みを作ることもできます。

セキュリティの注意点

APIキーの管理

APIキーは絶対に公開してはいけません。

// 悪い例：APIキーを直接コードに記述
const apiKey = 'sk-1234567890abcdef';

// 良い例：環境変数から取得
const apiKey = process.env.API_KEY;

フロントエンドでは、バックエンド経由でAPIを呼び出すことをおすすめします。

入力値のサニタイズ

ユーザーの入力値は必ずサニタイズしましょう。

function sanitizeInput(input) {
    return encodeURIComponent(input.toString().trim());
}

async function searchWithSanitization(query) {
    const sanitizedQuery = sanitizeInput(query);
    const url = `https://api.example.com/search?q=${sanitizedQuery}`;
    
    const response = await fetch(url);
    return await response.json();
}

これにより、悪意のある入力からアプリケーションを保護できます。

まとめ

JavaScriptでAPIを呼び出す方法について、基礎から実践まで詳しく解説しました。

重要なポイント：

fetch()とasync/awaitを使った基本的な呼び出し方法
適切なエラーハンドリングの実装
HTTPメソッドの使い分け
セキュリティの考慮

実践のコツ：

小さなAPIから始めて徐々に慣れていく
エラーハンドリングは必ず実装する
ユーザーの使いやすさを考慮する
セキュリティを常に意識する

これらの知識を身につけることで、外部サービスと連携した魅力的なWebアプリケーションを作成できるようになります。

まずは無料のAPIを使って、実際に手を動かしてみることをおすすめします。

ぜひ今日から、APIを使った楽しいWebアプリケーション開発を始めてみませんか？

【初心者向け】JavaScript APIの呼び出し方 - 基礎から実践まで

【初心者向け】JavaScript APIの呼び出し方 - 基礎から実践まで

APIって何？

APIの基本概念

なぜAPIが必要なの？

JavaScriptでAPIを呼び出す基本的な方法

fetch()の基本的な使い方

async/awaitを使った書き方

実用的なサンプルコード

天気情報を取得してみよう

ユーザー情報を表示してみよう

検索機能を実装してみよう

HTTPメソッドの使い分け

GET - データの取得

POST - データの送信

PUT - データの更新

DELETE - データの削除

エラーハンドリング

HTTPステータスコードを確認しよう

ネットワークエラーの処理

認証が必要なAPIの呼び出し

APIキーを使用する場合

Basic認証を使用する場合

実践的な完全なサンプル

よくある問題と解決策

CORSエラーの対処

レート制限の対応

セキュリティの注意点

APIキーの管理

入力値のサニタイズ

まとめ

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説