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

この記事で作るもの

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

完成する機能：

• 都市名を入力すると天気情報を表示
• 気温、天気、湿度、風速
• 天気に応じたアイコン表示
• 5日間の予報

所要時間: 約1〜2時間

---

なぜこれを作るのか

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

これができると：

• ニュースアプリ
• 株価トラッカー
• SNSダッシュボード

など、リアルタイムデータを扱うアプリが作れるようになる。

---

全体の流れ

---

Step 1: APIキーを取得

1. OpenWeatherMap にアクセス
2. 無料アカウントを作成
3. API keysページでキーを取得

---

Step 2: AIに指示を出す

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

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

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

デザイン：
- ダークモード（背景 #0f172a）
- カード形式で中央に表示
- グラデーションの背景
- レスポンシブ対応

---

Step 3: 動かして改良

動いたら追加の指示：

5日間の天気予報も表示してください。
エンドポイント: https://api.openweathermap.org/data/2.5/forecast?q={city}&appid={key}&units=metric&lang=ja
横スクロールのカード形式で日ごとに表示。

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

---

学べること

概念	このプロジェクトでの実例
API呼び出し	fetch()でHTTPリクエスト
非同期処理	async/awaitでデータ待ち
JSONパース	APIレスポンスの解析
エラーハンドリング	都市が見つからない場合の処理
動的表示	取得データをHTMLに反映