API
初級読み方：エーピーアイ｜英語：API
プログラム同士がデータをやり取りするための窓口だよ。
やさしい説明
API（エーピーアイ）とは、プログラム同士がデータをやり取りするための窓口です。Application Programming Interface の略です。
レストランの「メニュー」に例えるとわかりやすいです。お客さん（あなたのアプリ）はメニュー（API）を見て注文し、キッチン（サーバー）が料理（データ）を返します。キッチンの中身を知らなくても注文できます。
天気予報のデータを取得する、SNSに投稿する、決済を処理する——これらはすべてAPIを通じて行われます。
具体例・使い方
// 天気APIからデータを取得（fetch + async/await）
const res = await fetch("https://api.weather.com/tokyo");
const data = await res.json();
console.log(data.temperature); // 25
// REST APIの基本パターン（HTTPメソッドと用途）
// GET /api/users → ユーザー一覧を取得
// POST /api/users → 新しいユーザーを作成
// PUT /api/users/1 → ID:1のユーザーを更新
// DELETE /api/users/1 → ID:1のユーザーを削除APIレスポンスの処理パターン
async function fetchUser(id) {
try {
const res = await fetch(`/api/users/${id}`);
// HTTPステータスコードでエラー判定
if (!res.ok) {
throw new Error(`HTTPエラー: ${res.status}`);
}
const user = await res.json();
return user;
} catch (err) {
console.error("取得失敗:", err);
}
}fetch() はネットワークエラー以外では reject されません。404や500のエラーでも res.ok（200〜299番台かどうか）を確認しないと、エラーを見落とします。
いつ使う？
- 外部サービスのデータを使うとき（天気・地図・翻訳・為替レートなど）
- 自分のアプリのフロントエンドとバックエンドが通信するとき
- サードパーティサービスを組み込むとき（決済・認証・メール送信など）
- モバイルアプリとWebが同じデータを共有するとき
間違いやすいポイント
❌ APIキーをフロントエンドのコードに直接書く
JavaScriptのソースコードはブラウザから丸見えです。APIキーは環境変数（.env ファイル）やサーバーサイドで管理し、フロントエンドには絶対に公開しないようにしましょう。
❌ res.ok を確認しないでjsonを読む
fetch() は404や500でも例外を投げません。レスポンスを使う前に必ず res.ok または res.status でエラー判定しましょう。
よくある疑問
Q: APIは無料で使える？
A: 無料のものと有料のものがあります。多くのAPIは一定回数まで無料で、それ以上は有料です。OpenWeatherMapやJSONPlaceholderは無料で練習できます。
Q: APIキーとは？
A: APIを使うための認証用の文字列です。誰がAPIを使っているか識別するために必要です。GitHubに公開しないよう.envファイルで管理しましょう。
Q: REST APIとは？
A: URLとHTTPメソッド(GET/POST/PUT/DELETE)でデータを操作するAPIの設計スタイルです。現在最も一般的なAPI形式です。
関連用語
📖 関連レッスン
レッスンを見る →