外部APIの活用

8-1APIとは何か

APIとは、サービスが外部のプログラム向けに用意した「注文窓口」です。レストランにたとえると分かりやすいです。

レストランのたとえ

• あなたのアプリ = お客さん
• API = 注文窓口（メニューと注文ルールが決まっている）
• 外部サービス = 厨房（注文に応じて結果を作って返す）

「東京の今日の天気をください」と決められた形式で注文（リクエスト）すると、「晴れ、最高気温28度」のようなデータが返ってくる（レスポンス）。形式が決まっているからこそ、プログラム同士が会話できるのです。

データはJSONという形式で返ってくる

{
  "city": "Tokyo",
  "weather": "晴れ",
  "temp_max": 28,
  "temp_min": 19
}

JSONは「項目名: 値」を並べたデータの書き方。APIの世界の共通語です。波かっこと引用符だらけですが、よく見れば意味は読み取れるはず。これも「読めればOK、書くのはAI」です。

無料で使える身近なAPIの例

• 天気予報API（Open-Meteoなど。登録不要のものも）
• 郵便番号→住所変換API
• 祝日API、為替レートAPI
• Claude API（AIに文章を作らせる。第2章で学んだAPI利用の形）

8-2はじめてのAPI呼び出し

百聞は一見にしかず。登録不要・無料の天気API「Open-Meteo」で体験してみましょう。

ブラウザだけでAPIを呼んでみる

実はAPIの多くは、URLをブラウザに入れるだけで呼び出せます。次のURLをアドレス欄に貼ってみてください（東京の現在気温が返ってきます）。

https://api.open-meteo.com/v1/forecast?latitude=35.68&longitude=139.69¤t_weather=true

画面にJSONが表示されたら、それがAPIのレスポンスです。「temperature」の項目に今の気温が入っています。

アプリからAPIを呼ぶ

JavaScriptからはfetchという命令でAPIを呼びます。仕組みを知っておけば、あとはAIに任せられます。

練習用に「東京の今の気温を表示するだけ」の
シンプルなWebページを作ってください。
Open-MeteoのAPIを使い、fetchの部分には
初心者向けの日本語コメントを多めに付けてください。

8-3APIキーの管理と安全な使い方

Open-Meteoは登録不要でしたが、多くのAPIはAPIキー（利用者ごとの合鍵）の発行が必要です。この合鍵の扱いが、API利用の最重要マナーです。

なぜAPIキーを守る必要があるのか

APIキーには利用量があなた名義で記録されます。有料APIのキーが漏れると、他人に使われた分まであなたに請求される可能性があります。AIのAPIキー流出で高額請求、は実際に起きている事故です。

APIキー管理の鉄則

1. コードに直接書かない — 特にGitHubに上げるコードには絶対に
2. フロントエンドに埋め込まない — ブラウザで動くコードは誰でも中身を見られます。有料APIのキーはサーバー側（またはCloudflare Workersなどの中継役）に置くのが原則
3. 利用上限を設定する — 多くのAPIは管理画面で月間上限額を設定できます。最初に必ず設定
4. 漏れたらすぐ無効化 — APIキーは管理画面からいつでも作り直せます

このアプリで○○のAPIを使いたいです。APIキーが必要ですが、
フロントエンドだけの構成なので、キーを安全に扱う方法を
提案してください。Cloudflareでホスティングしています。

8-4AI（Claude API）をアプリに組み込む

第2章で「APIはプログラムからAIを呼ぶ形態」と学びました。いよいよそれを実践します。あなたのアプリ自体がAIの力を持つようになります。

何ができるようになるか

• 日記アプリに「今日の日記をAIが要約・励まし」機能
• 家計簿アプリに「支出傾向をAIが分析してアドバイス」機能
• レシピアプリに「冷蔵庫の余り物から献立を提案」機能

仕組みと注意点

Claude APIは、Anthropicのサイト（console.anthropic.com）でAPIキーを発行し、リクエストにプロンプトを載せて送ると、AIの返答が返ってくる仕組みです。注意点は2つ。

1. 従量課金 — 使った分だけ料金がかかります（個人利用なら月数百円程度のことが多いですが、上限設定は必須）
2. キーはフロントに置けない — 前レッスンの通り。Cloudflare Workersを「中継役」にするのが定番構成です

私の日記アプリに「書いた日記へAIがひとこと感想をくれる」
機能を追加したいです。

【条件】
- Claude APIを使う（APIキーは発行済み）
- APIキーが漏れない構成にしたい（ホスティングはCloudflare）
- 料金が暴走しない仕組みも入れたい

まず構成図と作業手順を初心者向けに説明してください。

8-5ハンズオン：天気つきお出かけメモ

この章の総仕上げとして、APIを組み込んだ小さなアプリを作りましょう。

作るもの

「お出かけメモ」——行きたい場所をメモすると、その場所の今の天気が横に表示されるアプリです。

「お出かけメモ」というWebアプリを作ってください。

【機能】
1. 行きたい場所の名前と都市名を登録できる
2. 登録した場所の一覧に、その都市の現在の天気と気温が表示される
3. 天気はOpen-Meteo API（無料・キー不要）で取得
4. 都市名から緯度経度への変換も Open-Meteoの
   ジオコーディングAPIを使う
5. データはlocalStorageに保存

【進め方】
まず計画を説明 → 私のOK後に、機能1（メモ登録）だけ実装
→ 動作確認後に天気表示を追加、の順で小さく進めてください。

このハンズオンで身につくこと

• 2つのAPI（ジオコーディング＋天気）を組み合わせる経験
• 「外部データ＋自分のデータ」を合わせて表示する、実用アプリの基本形
• 基礎編で学んだ「小さく作るループ」の実践