API

よみかた：エーピーアイ

意味

アプリケーション同士が情報をやりとりするための仕組み。
Application Programming Interface（アプリケーション・プログラミング・インターフェース）の略で、異なるシステムやサービス間でデータを交換するための決まりごと（ルール）のこと。

ポイント

  • 異なるシステム間でデータを安全に交換できる
  • 決まった形式（ルール）に従って通信するため、安定した連携が可能
  • Webサービスやスマホアプリ開発で頻繁に使用される
  • 天気予報、地図、SNSなど多くのサービスがAPIを提供している

体験してみよう

APIはJSONデータで情報を交換する仕組みです。まずは3つの異なるAPIがどんなJSONデータを返すのか確認してみましょう。

①郵便番号から住所取得API

以下のURLをブラウザで開いてみてください：

https://zipcloud.ibsnet.co.jp/api/search?zipcode=1000001 copy

応用例：郵便番号から住所を自動取得

②ISSの現在位置API

以下のURLをブラウザで開いてみてください：

http://api.open-notify.org/iss-now.json copy

応用例：国際宇宙ステーション（ISS）の現在位置を表示

③GitHubユーザープロフィールAPI

以下のURLをブラウザで開いてみてください：

https://api.github.com/users/octocat copy

応用例：GitHubユーザーのプロフィール情報を表示

JavaScriptで実践してみよう

上の3つのデモと同じ機能を、JavaScriptのfetch関数で実装してみましょう。

①郵便番号→住所取得のコード 
async function searchAddress() {
  const zipcode = document.getElementById('zipcode-input').value.trim();
  const resultDiv = document.getElementById('address-result');
  
  if (!zipcode) {
    resultDiv.innerHTML = '
郵便番号を入力してください
';
    return;
  }
  
  resultDiv.innerHTML = '
住所を検索中...
';
  
  try {
    const response = await fetch(`https://zipcloud.ibsnet.co.jp/api/search?zipcode=${zipcode}`);
    const data = await response.json();
    
    if (data.results && data.results.length > 0) {
      const address = data.results[0];
      resultDiv.innerHTML = `
        

          
${address.address1} ${address.address2} ${address.address3}

          
郵便番号: ${address.zipcode}

        

      `;
    } else {
      resultDiv.innerHTML = '
住所が見つかりませんでした
';
    }
  } catch (error) {
    resultDiv.innerHTML = '
エラーが発生しました
';
  }
}
②ISS位置取得のコード 
async function getISSPosition() {
  const resultDiv = document.getElementById('iss-result');
  resultDiv.innerHTML = '
ISS位置を取得中...
';
  
  try {
    const response = await fetch('http://api.open-notify.org/iss-now.json');
    const data = await response.json();
    
    const lat = parseFloat(data.iss_position.latitude).toFixed(4);
    const lng = parseFloat(data.iss_position.longitude).toFixed(4);
    const timestamp = new Date(data.timestamp * 1000).toLocaleString('ja-JP');
    
    resultDiv.innerHTML = `
      

        
🛰️ ISS現在位置

        
緯度: ${lat}°

        
経度: ${lng}°

        
取得時刻: ${timestamp}

      

    `;
  } catch (error) {
    resultDiv.innerHTML = '
ISS位置の取得に失敗しました
';
  }
}
③GitHubプロフィール取得のコード 
async function getGitHubProfile() {
  const username = document.getElementById('username-input').value.trim() || 'octocat';
  const messageDiv = document.getElementById('profile-message');
  messageDiv.innerHTML = '
プロフィールを取得中...
';
  
  try {
    const response = await fetch(`https://api.github.com/users/${username}`);
    
    if (!response.ok) {
      throw new Error('ユーザーが見つかりませんでした');
    }
    
    const data = await response.json();
    const createdDate = new Date(data.created_at).toLocaleDateString('ja-JP');
    
    messageDiv.innerHTML = `
      

        

          アバター
          

            
${data.name || data.login}

            
@${data.login}

          

        

        
リポジトリ: ${data.public_repos}個

        
フォロワー: ${data.followers}人

        
作成日: ${createdDate}

      

    `;
  } catch (error) {
    messageDiv.innerHTML = `
❌ ${error.message}
`;
  }
}
HTML/CSS/JS 統合版テンプレート

3つのAPI例を含む完全なコードです。以下をコピーしてindex.htmlとして保存できます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3つのAPI体験</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f9f7ef;
    }
    .container {
      background: white;
      padding: 40px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    .demo-section {
      margin: 30px 0;
      padding: 20px;
      background: #f8f9fa;
      border-radius: 8px;
    }
    input, button {
      padding: 8px 12px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 14px;
    }
    button {
      background: #ea9b8a;
      color: white;
      border: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>3つのAPI体験</h1>
    
    <div class="demo-section">
      <h3>郵便番号→住所</h3>
      <input type="text" id="zipcode" placeholder="郵便番号">
      <button onclick="searchAddress()">検索</button>
      <div id="address-result"></div>
    </div>

    <div class="demo-section">
      <h3>ISS位置</h3>
      <button onclick="getISSPosition()">位置取得</button>
      <div id="iss-result"></div>
    </div>

    <div class="demo-section">
      <h3>GitHubプロフィール</h3>
      <input type="text" id="username" placeholder="ユーザー名" value="octocat">
      <button onclick="getProfile()">取得</button>
      <div id="profile-result"></div>
    </div>
  </div>

  <script>
    // 3つのAPI関数をここに含める（上記のコード例と同じ）
  </script>
</body>
</html>

関連用語・比較

用語名 役割 特徴
API アプリケーション間のデータ交換の仕組み 決まったルールで安全にデータをやりとりできる
REST API Web上での標準的なAPI設計方式 HTTP通信を使い、シンプルで理解しやすい
JSON APIで使われるデータ形式 軽量で人間にも読みやすい構造