インフラ・運用 2026.01.11

API入門|仕組みと使い方を初心者向けに解説

約19分で読めます

APIの基本概念をレストランの例えで分かりやすく解説。実際の使用例やコードサンプルを通じて、Web開発に必要なAPI知識を身に付けましょう。

こんな悩みはありませんか?

「APIって聞いたことはあるけど、実際に何をしているのか分からない」「他のサービスと連携したいけど、どこから手を付ければいいか分からない」「開発会社に外注する際、APIについて会話についていけない」

このような悩みを抱えているWeb担当者や経営者の方は多いのではないでしょうか。実際に、弊社にご相談いただく案件でも「APIを使った機能を追加したいけど、どの程度の工数がかかるのか見当がつかない」というお声をよく伺います。

APIは現代のWeb開発において欠かせない技術です。しかし、その仕組みを理解することで、システム開発の可能性が大きく広がり、ビジネスの効率化や新しいサービス展開が可能になります。

APIとは?レストランの例えで理解しよう

APIの基本概念

API(Application Programming Interface)を理解するために、レストランの例えを使って説明しましょう。

あなたがレストランの客だとします。厨房(システム)で料理を作ってもらいたいとき、直接厨房に入って料理人に話しかけることはできません。代わりに、ウェイター(API)を通じて注文を伝えます。

%%{init: {"theme": "base", "themeVariables": {"background": "#f8fafc", "lineColor": "#6366f1", "primaryColor": "#eef2ff", "primaryTextColor": "#1e293b", "primaryBorderColor": "#6366f1"}}}%%
flowchart LR
    A[お客様<br/>アプリケーション] <--> B[ウェイター<br/>API]
    B <--> C[厨房<br/>サーバー・システム]

この例において:

  • お客様 = あなたのアプリケーション
  • ウェイター = API
  • 厨房 = データベースや他のシステム
  • メニュー = API仕様書
  • 注文 = リクエスト
  • 料理 = レスポンス

APIが解決する課題

以前、ある製造業のクライアント様から「在庫管理システムとECサイトを別々に管理しているため、在庫の更新作業が二重になっている」というご相談をいただきました。この問題を解決するために、両システム間でAPIを使った連携を構築しました。

結果として、在庫管理システムで在庫数を更新すると、自動的にECサイトの在庫表示も更新されるようになり、作業効率が70%向上しました。このように、APIは異なるシステム間の橋渡し役として機能します。

APIの通信の流れ

APIを使った通信は、以下のような流れで行われます:

sequenceDiagram
    participant App as アプリ
    participant API as API
    participant Server as サーバー
    participant DB as データベース
    
    App->>API: リクエスト送信
    API->>Server: 処理依頼
    Server->>DB: データ取得
    DB-->>Server: データ返却
    Server-->>API: 処理結果
    API-->>App: レスポンス返却

この流れを理解しておくと、APIの動作イメージがつかみやすくなります。

実際のAPI使用例とコードサンプル

天気予報API

天気予報APIは、Webサイトに天気情報を表示する際によく使用されます。

// OpenWeatherMap APIの使用例
const API_KEY = 'your_api_key_here';
const city = 'Tokyo';

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`)
  .then(response => response.json())
  .then(data => {
    const temperature = data.main.temp;
    const description = data.weather[0].description;
    
    document.getElementById('weather').innerHTML = 
      `東京の天気: ${description}、気温: ${temperature}°C`;
  })
  .catch(error => {
    console.error('天気情報の取得に失敗しました:', error);
  });

決済API(Stripe)

決済処理を自社で開発するのは非常に複雑ですが、StripeのAPIを使用することで安全な決済機能を簡単に実装できます。

// PHP + Stripe APIの例
require_once 'vendor/autoload.php';

\Stripe\Stripe::setApiKey('sk_test_your_secret_key');

try {
    $charge = \Stripe\Charge::create([
        'amount' => 2000, // 2000円
        'currency' => 'jpy',
        'source' => $token, // フロントエンドから送信されたトークン
        'description' => '商品購入',
        'metadata' => [
            'order_id' => '12345'
        ]
    ]);
    
    echo '決済が完了しました。';
} catch(\Stripe\Exception\CardException $e) {
    echo '決済に失敗しました: ' . $e->getMessage();
}

LINE Messaging API

LINE公式アカウントからメッセージを送信する機能です。

// LINE Messaging APIでメッセージ送信
$channel_token = 'your_channel_access_token';
$user_id = 'user_line_id';

$messages = [
    'type' => 'text',
    'text' => 'こんにちは!新商品のご案内です。'
];

$post_data = [
    'to' => $user_id,
    'messages' => [$messages]
];

$ch = curl_init('https://api.line.me/v2/bot/message/push');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, 'POST');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($post_data));
curl_setopt($ch, CURLOPT_HTTPHEADER, [
    'Content-Type: application/json; charset=UTF-8',
    'Authorization: Bearer ' . $channel_token
]);

$result = curl_exec($ch);
curl_close($ch);

リクエストとレスポンスの仕組み

HTTPメソッドの種類

APIでは主に以下のHTTPメソッドを使用します:

// データの取得
fetch('/api/users/123', {
    method: 'GET',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token'
    }
})
.then(response => response.json())
.then(data => console.log(data));

REST APIの基本原則

REST(Representational State Transfer)は、APIを設計する際の標準的なアーキテクチャスタイルです。

// Laravel REST APIの例
Route::group(['prefix' => 'api'], function () {
    // GET /api/products - 商品一覧取得
    Route::get('products', [ProductController::class, 'index']);
    
    // GET /api/products/{id} - 特定商品取得
    Route::get('products/{id}', [ProductController::class, 'show']);
    
    // POST /api/products - 商品作成
    Route::post('products', [ProductController::class, 'store']);
    
    // PUT /api/products/{id} - 商品更新
    Route::put('products/{id}', [ProductController::class, 'update']);
    
    // DELETE /api/products/{id} - 商品削除
    Route::delete('products/{id}', [ProductController::class, 'destroy']);
});

新技術MCP(Model Context Protocol)との違い

最近注目されているMCP(Model Context Protocol)は、AI(Large Language Model)とアプリケーションを接続するための新しいプロトコルです。従来のREST APIとは異なる特徴を持っています。

特徴REST APIMCP
用途Webサービス間連携AI・LLM連携
データ形式JSON/XML構造化されたコンテキスト
認証方式API Key/OAuthセキュアな接続プロトコル
応答速度高速リアルタイム
複雑性シンプル高度
// MCP接続の例(概念的なコード)
const mcpClient = new MCPClient({
    serverUrl: 'mcp://your-server',
    protocol: 'mcp-1.0'
});

// AIモデルへのコンテキスト提供
mcpClient.provideContext({
    type: 'document',
    content: 'ユーザーマニュアル',
    metadata: {
        version: '1.0',
        language: 'ja'
    }
});

MCPは現在発展段階にある技術ですが、将来的にはAIを活用したアプリケーションの標準的な接続方法になる可能性があります。

よくある失敗パターンと対処法

1. APIキーの管理不備

失敗例:

// ❌ 危険:APIキーをJavaScriptに直接記述
const API_KEY = 'sk_live_abcd1234';
fetch(`https://api.example.com/data?key=${API_KEY}`);

正しい対処法:

// ✅ 安全:サーバーサイドで処理
// .envファイルにAPIキーを保存
API_KEY=sk_live_abcd1234

// PHPでAPIキーを使用
$api_key = env('API_KEY');
$response = Http::withHeaders([
    'Authorization' => 'Bearer ' . $api_key
])->get('https://api.example.com/data');

2. エラーハンドリングの不備

実際にあるクライアント様の案件で、API接続エラー時にユーザーに「エラーが発生しました」とだけ表示していたため、問い合わせが急増した事例がありました。

改善後のコード:

fetch('/api/products')
  .then(response => {
    if (!response.ok) {
      // ステータスコードによる分岐
      switch(response.status) {
        case 404:
          throw new Error('商品が見つかりませんでした');
        case 500:
          throw new Error('サーバーエラーが発生しました。しばらくしてからお試しください');
        default:
          throw new Error(`エラーが発生しました (${response.status})`);
      }
    }
    return response.json();
  })
  .then(data => {
    // 成功処理
    displayProducts(data);
  })
  .catch(error => {
    // ユーザーフレンドリーなエラーメッセージ
    document.getElementById('error-message').textContent = error.message;
    console.error('API Error:', error);
  });

3. レート制限への対応不足

多くのAPIには利用回数制限があります。これを考慮しない実装により、サービスが突然停止する事態が発生することがあります。

// レート制限対応の例
class ApiClient {
    private $lastRequestTime = 0;
    private $requestInterval = 1; // 1秒間隔
    
    public function makeRequest($url) {
        // レート制限のチェック
        $currentTime = microtime(true);
        $timeDiff = $currentTime - $this->lastRequestTime;
        
        if ($timeDiff < $this->requestInterval) {
            sleep($this->requestInterval - $timeDiff);
        }
        
        $this->lastRequestTime = microtime(true);
        
        // APIリクエスト実行
        return $this->executeRequest($url);
    }
}

解決できない場合は

エラーが解決しない場合、無料でご相談ください

詳しく見る

まとめと次のステップ

APIは現代のWeb開発において必要不可欠な技術です。レストランの例えで説明したように、APIはシステム間の橋渡し役として機能し、ビジネスの効率化や新しいサービス展開を可能にします。

実際に弊社でAPIを活用したプロジェクトでは、平均して以下のような効果を実現しています:

APIを活用することで、システム開発の可能性は大きく広がります。まずは小さな機能から始めて、徐々に活用範囲を拡大していくことをお勧めします。

API活用に関してご不明な点がございましたら、神奈川のWeb制作会社「Fivenine Design」までお気軽にご相談ください。20年以上の実績を活かし、お客様のビジネスに最適なAPI活用方法をご提案いたします。

この記事をシェア

この記事の内容でお困りですか?

無料でご相談いただけます

Webサイトの改善、システム開発、AI導入など、 お気軽にご相談ください。初回相談は無料です。

無料相談してみる
AIに無料相談