外部 API を使う
自分の app から他のサービスのデータを取得する
⏱ 想定 ~5 分
01 · 読む
現実の app の多くは単独では動きません。データを取りに他のサービスと話します：天気 app は天気 API を呼び、 SNS app は認証 API を呼び、 EC app は決済 API を呼びます。
API （ Application Programming Interface ）は、 web ページではなくデータを返す URL のことです。 web サイトを訪れるとブラウザは HTML を受け取りますが、プログラムが API を呼ぶと JSON を受け取ります —— プログラムが扱える構造化データです。
Level 5 で API を学びました。今度は本物のプログラムの中で使います。
💡 想像してみてくださいあなたのサーバーがレストランの厨房だとすると、外部 API は仕入れ先です。トマトを自分で育てる代わりに、仕入れ先（ API ）に電話して注文（リクエスト）を出し、納品（レスポンス）を受け取ります。仕入れ先が休み（ API ダウン）なら、代替策（エラー処理）が必要です。
02 · コード例
次は外部 API からデータを取るルートです。読みながら 3 つのパターンに注目してください： async/await 、 fetch 、 try/catch 。
例： API ルート
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({
setup: joke.setup,
punchline: joke.punchline
});
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});
注目ポイントは 3 つ。 （ 1 ） async/await で外部データを待つあいだもサーバーが固まりません。 'await' キーワードはこの関数だけを一時停止し、他のリクエストは処理が続きます。 （ 2 ） fetch が外部 API に HTTP リクエストを送ります。 （ 3 ） try/catch でエラーをきれいに扱います —— ジョーク API が落ちても、サーバーはクラッシュせず役に立つエラーメッセージを返せます。
03 · 読む
外部 API を扱うと、何度も出てくる概念があります。押さえておくとよくあるミスを避けられます。
ポイントまとめ
- async/await —— 外部データを待ちつつサーバーを止めないやり方
- API キー —— 有料や非公開 API の認証用（ .env に！）
- Rate limit —— API が 1 分あたりに許す呼び出し回数の上限
- エラー処理 —— API が落ちたときのフォールバックを必ず用意
04 · 実機演習
Level 7 の Express サーバーにこの API ルートを追加してみましょう。 API キー不要の無料ジョーク API を呼ぶので、練習にぴったりです。
// Add this to your app.js
app.get('/api/joke', async (req, res) => {
try {
const response = await fetch('https://official-joke-api.appspot.com/random_joke');
const joke = await response.json();
res.json({ setup: joke.setup, punchline: joke.punchline });
} catch (error) {
res.status(500).json({ error: 'Failed to fetch joke' });
}
});05 · 空欄補充
JavaScript で API エラーを扱うには、 fetch 呼び出しを _____ / catch ブロックで囲みます。
06 · クイズ
なぜ API 呼び出しを try/catch で囲むのか？
- JavaScript はすべての関数に try/catch を要求するから
- プログラムが速くなるから
- API の呼び出し過ぎを防ぐため
- API が落ちたときに優雅にエラー処理するため
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。