【Lv.5】天気APIダッシュボードを作る ── 外部データを取得して表示するアプリ

この記事で作るもの

天気情報ダッシュボード。外部APIからリアルタイムデータを取得して、見やすく表示するWebアプリを作る。

完成する機能：

• 都市名を入力すると天気情報を表示
• 気温（℃）、天気の説明、湿度（%）、風速（m/s）を表示
• 天気に応じたアイコン表示
• 5日間の天気予報を横スクロールで表示
• 検索履歴を保存してワンクリックで再検索
• エラーメッセージの丁寧な表示

所要時間: 約1〜2時間

---

そもそもAPIとは何か

プログラミングを始めたばかりの人は「API」という言葉に戸惑うかもしれない。実はとてもシンプルな概念だ。

レストランの注文に例えると

レストランで食事をするとき、あなたは厨房に直接入って料理を作るわけではない。ウェイターに注文を伝え、ウェイターが厨房に伝え、料理ができたらウェイターが運んでくれる。

APIもこれと同じ仕組みだ。

レストラン	API連携
あなた（お客さん）	あなたのアプリ
メニュー	APIドキュメント（使える機能の一覧）
注文内容（「パスタをください」）	リクエスト（「東京の天気を教えて」）
ウェイター	API（データの橋渡し役）
厨房	サーバー（データを管理している場所）
運ばれてきた料理	レスポンス（天気データ）

つまりAPIとは、**「あるサービスが持っているデータや機能を、決められたルールで外部から利用できる仕組み」**のこと。天気データ、ニュース記事、為替レート、地図情報など、世の中の多くのサービスがAPIを公開している。

APIが使えると何ができるのか

APIを使いこなせるようになると、作れるアプリの幅が一気に広がる。

• 天気アプリ – 世界中の天気をリアルタイムで表示
• ニュースリーダー – 最新ニュースを自動で取得して表示
• 為替コンバーター – リアルタイムの為替レートで換算
• 株価トラッカー – 株価の変動をグラフで表示
• 翻訳ツール – Google翻訳APIで多言語翻訳
• 地図アプリ – Google Maps APIで位置情報を表示
• SNSダッシュボード – TwitterやGitHubのデータを集約

ここまでのプロジェクト（HTML、ToDo、ポートフォリオ、ブログ）は全てローカルで完結していた。このプロジェクトで初めて外部のデータを取得して使うスキルを身につける。

---

全体の流れ

---

Step 1: API連携の基礎知識

コードを書き始める前に、API連携で使う3つの重要な概念を理解しておこう。AIに指示を出すとき、これらの言葉が出てきても慌てなくなる。

fetch ── データを取りに行く関数

fetchはJavaScriptに標準で備わっている関数で、指定したURLからデータを取得するために使う。ブラウザのアドレスバーにURLを入力するのと似ている。ただし、画面にページを表示するのではなく、データだけを受け取る。

// 基本の形
fetch("https://api.example.com/data")

これだけで、指定したURLにリクエストが送られる。ただし、データの取得には時間がかかる。そこで登場するのが次の概念だ。

async / await ── データが届くまで待つ仕組み

通常、JavaScriptは上から下に一瞬で実行される。しかしAPIからのデータ取得には数百ミリ秒〜数秒かかる。データが届く前に次の処理が動いてしまうと困る。

async/awaitは「データが届くまで待ってから次に進む」ための仕組みだ。

// async/awaitの基本形
async function getWeather(city) {
  // awaitで「データが届くまで待つ」
  const response = await fetch(`https://api.example.com/weather?city=${city}`);
  const data = await response.json();
  console.log(data);
}

• async – この関数の中で「待つ」処理がありますよ、という宣言
• await – ここでデータが届くまで待ちますよ、という指示

レストランで例えると、awaitは「料理が来るまで席で待つ」こと。待たずに帰ってしまったら（awaitなしだと）、料理を受け取れない。

JSON ── データの受け渡し形式

APIから返ってくるデータは**JSON（JavaScript Object Notation）**という形式で届く。人間にも機械にも読みやすい、シンプルな構造だ。

{
  "name": "Tokyo",
  "main": {
    "temp": 22.5,
    "humidity": 65
  },
  "weather": [
    {
      "description": "晴れ",
      "icon": "01d"
    }
  ],
  "wind": {
    "speed": 3.5
  }
}

上のデータから気温を取り出すには data.main.temp と書く。住所のように「.」で階層をたどっていくイメージだ。

---

Step 2: APIキーを取得する

OpenWeatherMapとは

OpenWeatherMapは世界中の天気データを提供しているサービス。無料プランが用意されていて、個人開発には十分すぎる量のリクエストが可能だ。

登録手順（5分で完了）

1. OpenWeatherMap にアクセス
2. 右上の「Sign In」→「Create an Account」をクリック
3. ユーザー名、メールアドレス、パスワードを入力して登録
4. 届いた確認メールのリンクをクリックしてアカウントを有効化
5. ログイン後、上部メニューの「API keys」をクリック
6. デフォルトで1つキーが生成されている。これをコピーして使う

無料プランの制限

項目	無料プランの上限
リクエスト数	60回/分、1,000,000回/月
現在の天気	利用可能
5日間予報（3時間ごと）	利用可能
過去の天気データ	有料のみ
1時間ごとの予報	有料のみ
天気マップ	利用可能

個人開発では1日に数十回リクエストする程度なので、無料枠で全く問題ない。

使用するAPIエンドポイント

今回使うのは以下の2つ。

現在の天気:

https://api.openweathermap.org/data/2.5/weather?q={都市名}&appid={APIキー}&units=metric&lang=ja

5日間予報:

https://api.openweathermap.org/data/2.5/forecast?q={都市名}&appid={APIキー}&units=metric&lang=ja

パラメータの意味:

• q – 検索する都市名（英語で指定）
• appid – あなたのAPIキー
• units=metric – 気温を摂氏（℃）で取得
• lang=ja – 天気の説明を日本語で取得

---

Step 3: AIに基本のHTMLを作ってもらう

いよいよAIにコードを作ってもらおう。以下のプロンプトをそのまま使える。

天気ダッシュボードをHTML + JavaScript（1ファイル）で作ってください。

機能：
- テキスト入力欄に都市名を入力してEnterまたはボタンで検索
- OpenWeatherMap APIで現在の天気を取得
- 気温（℃）、天気の説明、湿度（%）、風速（m/s）を表示
- 天気に応じたアイコン（OpenWeatherMapのアイコンURL）を表示
- ローディング表示（データ取得中はスピナーを表示）
- 初期表示として「Tokyo」の天気を表示

APIキー: [ここにあなたのキーを入れる]
エンドポイント: https://api.openweathermap.org/data/2.5/weather?q={city}&appid={key}&units=metric&lang=ja

デザイン：
- ダークモード（背景 #0f172a、カード背景 #1e293b）
- カード形式で中央に表示（最大幅600px）
- 気温を大きなフォントで強調
- グラデーションの背景
- レスポンシブ対応（スマホでも見やすく）
- Google Fonts（Inter）を使用

AIが生成した index.html をブラウザで開いて動作確認しよう。

open index.html   # Mac
start index.html  # Windows

---

Step 4: API連携のコードを理解する

AIが生成したコードの中で、特に重要な部分を見てみよう。全部を理解する必要はないが、核心部分を把握しておくと、追加の指示を出すときに役立つ。

データ取得の流れ

AIが書くコードはおおむね以下のような構造になっている。

async function getWeather(city) {
  // 1. APIにリクエストを送る
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`;
  const response = await fetch(url);

  // 2. レスポンスをJSONに変換
  const data = await response.json();

  // 3. 必要なデータを取り出す
  const temp = data.main.temp;          // 気温
  const description = data.weather[0].description;  // 天気の説明
  const humidity = data.main.humidity;  // 湿度
  const windSpeed = data.wind.speed;    // 風速
  const icon = data.weather[0].icon;    // アイコンコード

  // 4. 画面に表示する
  document.getElementById("temp").textContent = `${Math.round(temp)}℃`;
  document.getElementById("description").textContent = description;
}

ポイントは4つのステップだ。

1. リクエスト送信 – fetch(url) でAPIにデータを要求
2. JSON変換 – response.json() で受け取ったデータをJavaScriptで扱える形に変換
3. データ抽出 – data.main.temp のようにドット記法で必要な値を取り出す
4. 画面表示 – document.getElementById() でHTML要素を探し、中身を書き換える

アイコン表示の仕組み

OpenWeatherMapのアイコンは以下のURLで取得できる。

https://openweathermap.org/img/wn/{アイコンコード}@2x.png

たとえば晴れなら 01d、曇りなら 03d というコードが返ってくるので、URLに埋め込むだけでアイコン画像が表示される。

---

Step 5: エラーハンドリングを追加する

基本が動いたら、エラー処理を追加しよう。ユーザーが間違った入力をしたとき、アプリがクラッシュするのではなく、わかりやすいメッセージを表示するべきだ。

よくあるエラーパターン

エラー	原因	HTTPステータス
都市が見つからない	スペルミス、存在しない都市名	404
APIキーが無効	キーの入力ミス、未有効化	401
リクエスト上限超過	短時間に大量アクセス	429
サーバーエラー	OpenWeatherMap側の問題	500
ネットワークエラー	インターネット未接続	-

AIへの追加指示

エラーハンドリングを追加してください。

1. 都市が見つからない場合（404）→ 「都市名が見つかりません。英語で入力してみてください（例: Tokyo, London, New York）」
2. APIキーが無効な場合（401）→ 「APIキーが無効です。正しいキーを設定してください」
3. リクエスト上限を超えた場合（429）→ 「リクエスト上限に達しました。しばらく待ってから再試行してください」
4. ネットワークエラー → 「インターネット接続を確認してください」
5. 入力が空の場合 → 検索を実行しない

エラーメッセージはカードの中に赤い背景で表示。
3秒後に自動で消える。

try/catch の基本

エラーハンドリングで使われる try/catch の仕組みも理解しておこう。

async function getWeather(city) {
  try {
    // tryブロック: 正常に動くはずの処理
    const response = await fetch(url);

    if (!response.ok) {
      // HTTPエラー（404、401など）の場合
      throw new Error(`HTTP Error: ${response.status}`);
    }

    const data = await response.json();
    displayWeather(data);  // 成功したら表示

  } catch (error) {
    // catchブロック: エラーが発生したときの処理
    showError("天気データを取得できませんでした");
  }
}

• try – まずこの中の処理を実行する
• エラーが起きたら → catch に飛ぶ
• エラーが起きなかったら → catch はスキップ

レストランの例えなら、注文した料理が品切れだったときに「すみません、別の料理はいかがですか」と対応してくれるようなものだ。

---

Step 6: 5日間予報を追加する

現在の天気だけでは物足りないので、5日間の天気予報を追加しよう。

AIへの指示

5日間の天気予報も表示してください。

エンドポイント: https://api.openweathermap.org/data/2.5/forecast?q={city}&appid={key}&units=metric&lang=ja

表示仕様：
- 現在の天気カードの下に配置
- 横スクロールのカード形式
- 各カードに：日付、天気アイコン、最高気温/最低気温、天気の説明
- 3時間ごとのデータから日ごとにまとめる（1日の最高・最低を計算）
- 今日を含めた5日間分を表示

予報データの構造

5日間予報のAPIは3時間ごとのデータを返す。つまり1日8件、5日間で最大40件のデータが返ってくる。日ごとにまとめるには、日付でグループ化して最高気温と最低気温を計算する必要がある。

AIにこの処理を任せれば問題ないが、仕組みを知っておくとデバッグ時に役立つ。

// APIから返ってくるデータのイメージ（一部）
{
  "list": [
    { "dt_txt": "2026-03-08 09:00:00", "main": { "temp": 15.2 }, ... },
    { "dt_txt": "2026-03-08 12:00:00", "main": { "temp": 18.7 }, ... },
    { "dt_txt": "2026-03-08 15:00:00", "main": { "temp": 17.1 }, ... },
    // ...3時間ごとに続く
  ]
}

---

Step 7: 段階的に機能を追加する

基本が完成したら、段階的に機能を追加していこう。一度に全部入れるのではなく、1つずつ追加して動作確認するのが大事だ。

7-1. 検索履歴の保存

検索履歴を保存して、最近検索した都市をボタンで選べるようにしてください。

仕様：
- localStorageで保存
- 最大10件まで保存（古いものから削除）
- 重複は除外
- ボタンをクリックするとその都市の天気を再検索
- 検索履歴の横に「履歴をクリア」ボタンも追加

7-2. 現在地の天気を取得

「現在地の天気」ボタンを追加してください。

仕様：
- ブラウザのGeolocation APIで緯度・経度を取得
- OpenWeatherMapの座標検索APIを使用
  エンドポイント: https://api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={key}&units=metric&lang=ja
- 位置情報の許可ダイアログが出ることをユーザーに伝えるテキストを表示
- 位置情報が取得できない場合のエラーハンドリングも追加

7-3. デザインの改善

以下のデザイン改善をしてください。

1. 天気に応じて背景色を変える
   - 晴れ: オレンジ〜青のグラデーション
   - 曇り: グレーのグラデーション
   - 雨: 濃い青のグラデーション
   - 雪: 白〜薄い青のグラデーション

2. 日の出・日の入り時刻を表示（APIレスポンスのsys.sunrise、sys.sunsetを使用）

3. 体感温度も表示（main.feels_likeを使用）

4. アニメーション追加
   - データ取得時にフェードイン
   - カードにホバーエフェクト

7-4. 単位切り替え

摂氏（℃）と華氏（℉）を切り替えるトグルボタンを追加してください。
切り替え時にAPIを再リクエストするのではなく、表示上で計算して切り替える。

---

APIキーの安全な管理方法

なぜ管理が必要なのか

APIキーはいわば「サービスの鍵」だ。他人に知られると、あなたのアカウントでリクエストが送られ、利用上限を超えたり、有料プランの場合は課金されてしまう可能性がある。

やってはいけないこと

NG行為	リスク
GitHubの公開リポジトリにキーを含めてプッシュ	世界中からキーが見えてしまう
SNSにスクリーンショットを貼る（キーが写り込む）	画像からキーが読み取られる
他人にキーを直接送る	悪用される可能性がある

今回のプロジェクトでの対処

ローカルで動かすだけなら、HTMLファイル内にキーを直接書いても大きな問題はない。ただし、GitHubに公開する場合は以下の対策が必要だ。

方法1: 環境変数を使う（Node.jsプロジェクトの場合）

# .envファイルを作成
echo "WEATHER_API_KEY=あなたのAPIキー" > .env

// .envファイルから読み込む
const API_KEY = process.env.WEATHER_API_KEY;

# .gitignoreに追加（GitHubにアップしない）
echo ".env" >> .gitignore

方法2: キーを別ファイルに分離（今回のようなHTMLプロジェクトの場合）

APIキーを config.js という別ファイルに分離してください。
config.js は .gitignore に追加してGitHubにアップしないようにする。
index.htmlでは config.js を読み込んで使う。
config.example.js というファイルも作って、キーの入れ方の説明を書く。

---

他の無料APIで練習する

天気APIでAPI連携の基本を掴んだら、他のAPIにも挑戦してみよう。同じ仕組み（fetch → JSON → 表示）で、さまざまなデータを扱える。

おすすめ無料API一覧

API名	取得できるデータ	登録	難易度
OpenWeatherMap	天気情報	必要（無料）	初級
PokeAPI	ポケモンのデータ	不要	初級
JSONPlaceholder	ダミーデータ（テスト用）	不要	入門
GitHub API	GitHubのリポジトリ・ユーザー情報	不要（一部制限あり）	初級
ExchangeRate API	為替レート	必要（無料）	初級
NewsAPI	ニュース記事	必要（無料）	中級
NASA APOD	NASAの天文画像	必要（無料）	初級
The Cat API	猫の画像	不要	入門
REST Countries	世界の国の情報	不要	初級

PokeAPIでポケモン図鑑を作る例

PokeAPIは登録不要で使えるので、練習に最適だ。

ポケモン図鑑アプリをHTML1ファイルで作ってください。

機能：
- ポケモンの名前または番号で検索
- PokeAPIを使用: https://pokeapi.co/api/v2/pokemon/{name or id}
- 表示する情報: 画像、名前、タイプ、高さ、重さ、能力値
- ランダム表示ボタン（1〜1010のランダムな番号で検索）
- タイプごとに色を変える（炎=赤、水=青、草=緑…）

デザイン：
- ポケモンカード風のデザイン
- ダークモード

GitHub APIでプロフィールカードを作る例

GitHubプロフィールカードをHTML1ファイルで作ってください。

機能：
- ユーザー名を入力して検索
- GitHub APIを使用: https://api.github.com/users/{username}
- 表示する情報: アイコン、名前、自己紹介、リポジトリ数、フォロワー数、フォロー数
- 人気リポジトリ上位5件も表示: https://api.github.com/users/{username}/repos?sort=stars&per_page=5
- 各リポジトリのスター数と言語を表示

---

よくあるトラブルと解決法

API連携では初心者がつまずきやすいポイントがいくつかある。ここでまとめて対処法を紹介する。

トラブル1: 「401 Unauthorized」エラー

原因: APIキーが無効または未認証。

解決法:

• APIキーが正しくコピーされているか確認（前後の空白に注意）
• 登録直後の場合、最大2時間待つ
• OpenWeatherMapのダッシュボードでキーが有効か確認

トラブル2: 「404 Not Found」エラー

原因: 指定した都市名が見つからない。

解決法:

• 都市名を英語で入力しているか確認（「東京」→「Tokyo」）
• スペルミスがないか確認
• 都市名に空白がある場合は正しく入力されているか確認（「New York」など）

トラブル3: CORSエラー

原因: ブラウザのセキュリティ制限で、直接ファイルを開いたときに発生することがある。

解決法:

• ローカルサーバーを使う（VS Codeの Live Server 拡張機能が手軽）
• または AIに「CORSエラーが出ました。対処法を教えて」と聞く

トラブル4: データが表示されない（エラーも出ない）

原因: JavaScriptのコンソールエラーを見落としている可能性。

解決法:

• ブラウザの開発者ツールを開く（F12 または Cmd+Option+I）
• 「Console」タブでエラーメッセージを確認
• エラーメッセージをそのままAIに貼り付けて「このエラーを直して」と指示

トラブル5: 天気アイコンが表示されない

原因: アイコンURLが間違っているか、HTTPSになっていない。

解決法:

• アイコンURLが https://openweathermap.org/img/wn/{icon}@2x.png の形式か確認
• imgタグのsrc属性が正しいか開発者ツールで確認

---

学べることのまとめ

このプロジェクトで身につくスキルを整理しよう。

概念	このプロジェクトでの実例	応用先
API呼び出し	fetch()でHTTPリクエスト送信	あらゆるWebサービス連携
非同期処理	async/awaitでデータ到着を待つ	データベース操作、ファイル読み込み
JSONパース	APIレスポンスの解析・データ抽出	設定ファイル、データ交換
エラーハンドリング	try/catchで例外処理、HTTPステータス判定	全てのアプリ開発
動的HTML生成	取得データをHTMLに反映	SPA、ダッシュボード全般
ローカルストレージ	検索履歴の保存	ユーザー設定、キャッシュ
Geolocation API	ブラウザの位置情報取得	地図アプリ、近隣検索
レスポンシブデザイン	画面サイズに応じたレイアウト調整	全てのWebアプリ

---

完成後のステップアップ

天気ダッシュボードが完成したら、次のチャレンジに進もう。

---

FAQ（よくある質問）

Q1. APIキーは無料で使えますか？お金がかかることはありますか？

OpenWeatherMapの無料プランでは一切費用はかからない。月100万リクエストまで無料で、個人開発でこの上限に達することはまずありえない。ただし、有料プランに自分でアップグレードしない限り課金されることはないので安心してほしい。念のため、登録時にクレジットカード情報を求められた場合は無料プランであることを再確認しよう。

Q2. 日本語の都市名（「東京」「大阪」）で検索できますか？

OpenWeatherMap APIは基本的に英語の都市名で検索する仕様になっている。「Tokyo」「Osaka」「Kyoto」のように英語で入力する必要がある。ただし、AIに「日本語の都市名を英語に変換するマッピングテーブルを追加して」と指示すれば、日本語入力にも対応できる。主要都市のマッピング（東京→Tokyo、大阪→Osaka、名古屋→Nagoya など）を用意しておくと使いやすくなる。

Q3. 「APIキーが有効化されるまで最大2時間」の間、何をすればいいですか？

待ち時間を有効活用しよう。HTMLとCSSのレイアウトを先に作っておくのがおすすめ。APIキー部分はダミーデータ（固定のJSON）で仮表示しておいて、キーが有効化されたら実際のAPIに切り替える。AIに「ダミーデータで天気ダッシュボードのレイアウトを作って」と指示すれば、API接続なしでデザインを完成させられる。

Q4. fetch以外にもAPIを呼び出す方法はありますか？

ある。古い方法として XMLHttpRequest があるが、現在はほぼ使われていない。また、axios というライブラリも人気がある。axiosはfetchより記述がシンプルで、エラーハンドリングも充実している。ただし、初学者はまず標準の fetch で基本を理解するのがおすすめ。fetchはブラウザに最初から組み込まれているので、追加のインストールが不要というメリットもある。

Q5. このダッシュボードをインターネットに公開するにはどうすればよいですか？

HTMLファイル1つなので、公開は非常に簡単だ。GitHub Pagesなら無料で公開できる。手順は以下の通り。(1) GitHubにリポジトリを作成、(2) index.htmlをプッシュ、(3) リポジトリの Settings → Pages で公開設定。ただし、公開する場合はAPIキーがソースコードに含まれることになる。無料APIなら大きな問題はないが、気になる場合はバックエンド（サーバー側）でAPIキーを管理する構成にステップアップしよう。

Q6. OpenWeatherMap以外で、天気データを取得できる無料APIはありますか？

いくつかある。Open-Meteo（完全無料・登録不要）、WeatherAPI.com（無料プランあり・登録必要）、気象庁API（日本の天気のみ・非公式だが利用可能）などが代表的だ。中でもOpen-Meteoは登録不要でAPIキーも不要なので、手軽に試したい場合はおすすめだ。ただし、学習目的ならAPIキーの取得・管理を経験できるOpenWeatherMapのほうが実践的な学びが多い。

Q7. スマホでも動作しますか？

レスポンシブデザインで作成すればスマホでも問題なく動作する。上のプロンプトには「レスポンシブ対応」を含めているので、AIが画面サイズに応じたレイアウトを作ってくれる。ローカルで開発中にスマホで確認したい場合は、同じWi-Fiネットワーク内でローカルサーバーのIPアドレスにアクセスすれば確認できる。

---

まとめ

この記事では天気APIダッシュボードを作りながら、以下のスキルを身につけた。

• APIの基本概念 – リクエストとレスポンスの仕組み
• fetch / async / await – 外部データの非同期取得
• JSONデータの扱い方 – ドット記法でのデータ抽出
• エラーハンドリング – try/catchで例外に対処
• 段階的な機能追加 – 基本→予報→履歴→位置情報と拡張
• APIキーの管理 – セキュリティを意識した運用

API連携ができるようになると、作れるアプリの幅が劇的に広がる。天気の次は、ニュース、為替、ポケモン、GitHub、何でもいい。興味のあるAPIを見つけて、同じ手順でダッシュボードを作ってみよう。