はじめに
Web API (Web Application Programming Interface) は、ウェブアプリケーションやサービス同士がデータや機能をやりとりするための インターフェース です。
目次
🧷 Web APIの基本的な役割
Web APIは、以下のような目的で使われます
データの取得・操作
例：天気情報APIで最新の天気データを取得
外部サービスとの連携
例：Google Maps APIで地図を表示
機能の拡張
例：音声認識やカメラ制御など、ブラウザの機能にアクセス
🧷 Web APIの仕組み
Web APIは、基本的に クライアント(利用者側) と サーバー(提供者側) の間で通信が行われます。
流れのイメージ
-
リクエスト：クライアントがAPIにデータを要求
⇨ 例：GET /weather?city=tokyo -
レスポンス：サーバーがデータを返す
⇨ 例：{ "city": "Tokyo", "temperature": 22, "humidity": 60 }
通信方法
- HTTPメソッドを使ってデータの操作を行います
- GET ⇨ データ取得
- POST ⇨ データ作成
- PUT ⇨ データ更新
- DELETE ⇨ データ削除
🧷 Web APIの種類
Web APIには主に以下の2種類があります
1. オープンAPI (パブリックAPI)
誰でも利用可能なAPI(以下、例)
- OpenWeatherMap API ⇨ 天気情報を取得
- GitHub API ⇨ リポジトリ情報を取得
- 外部サービスと連携する際に活用
2. プライベートAPI
特定のアプリケーションや社内で使用されるAPI(以下、例)
- 自社アプリ内でのユーザー管理用API
- 社内ツール間でのデータ共有API
💡 外部に公開されないため、セキュリティが強化されている
🧷 Web APIのデータ形式
Web APIは通常、以下のデータ形式でやり取りします：
- JSON (JavaScript Object Notation) → 軽量で扱いやすい
{
"name": "Alice",
"age": 25
}
- XML (Extensible Markup Language) → SOAP APIでよく使用
<user>
<name>Alice</name>
<age>25</age>
</user>
🧷 Web APIの実例
1. Google Maps API
地図を表示し、ルート検索や地点情報を取得できる
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 35.6895, lng: 139.6917 },
zoom: 10
});
2. OpenWeatherMap API
天気情報を取得するAPI
fetch("https://api.openweathermap.org/data/2.5/weather?q=Tokyo&appid=YOUR_API_KEY")
.then(response => response.json())
.then(data => console.log(data));
3. Web Storage API
ローカルストレージにデータを保存できるブラウザのネイティブAPI
localStorage.setItem("username", "Alice");
console.log(localStorage.getItem("username")); // Alice
🧷 Web APIのセキュリティ
APIを安全に使うためには、以下のようなセキュリティ対策が必要です
認証と認可
APIキーやOAuthトークンでアクセス制限
レート制限 (Rate Limit)
短時間で過剰なリクエストを制限
CORS (Cross-Origin Resource Sharing)
クロスオリジンでの不正アクセスを防止
🎉 まとめ
📌 Web APIとは？
Webサービス同士でデータや機能をやりとりするためのインターフェース
📌 主な特徴
- HTTPメソッドとJSONなどのデータ形式で通信
- 外部サービス連携やデータ操作に広く使われる
📌 主な種類
- オープンAPI ⇨ 公開されているAPI (例：天気情報)
- プライベートAPI ⇨ 社内ツール向けAPI
📌 実用例
- Google Maps API ⇨ 地図表示
- OpenWeatherMap API ⇨ 天気情報取得
- Web Storage API ⇨ ブラウザにデータ保存