プログラミング初心者にとって、コードを書いて「画面が動く」体験は大きな喜びです。これまでDay01〜Day04で、集中タイマーやマッチングゲーム、名言メーカー、ToDo管理アプリなどを作ってきました。
Day05では、いよいよ 外部サービスと連携する「API」の世界 に踏み込みます。題材はシンプルな「天気予報アプリ」。都市名を入力すると、その都市の天気と気温を表示してくれるアプリを作ります。
「APIって難しそう…」と思う方もいるかもしれませんが、最小機能版ならとてもシンプル。都市名を入力 → データ取得 → 表示 の3ステップだけで、実用的なアプリが完成します。
完成アプリの紹介
今回の完成アプリは以下のように動作します。
- 入力欄に都市名（例：Tokyo, London, New Yorkなど）を入力
- OpenWeather APIを使って天気と気温を取得
- 結果をカード風のデザインで表示
👉 公開ページはこちら
Day05 — 天気予報アプリ（最小機能版）
最小構成ですが、外部データをリアルタイムに取得できることで、アプリの可能性が一気に広がります。
開発の流れ
1. HTMLの準備
まずは、都市名を入力するテキストボックスと「検索」ボタン、結果を表示するエリアを用意します。
<h1>天気予報アプリ</h1>
<input id="cityInput" type="text" placeholder="都市名を入力">
<button id="searchBtn">検索</button>
<div id="result"></div>
2. CSSで見た目を整える
最低限のCSSで、カード風に表示するだけでもアプリらしくなります。
- 入力欄とボタンを横並びに配置
- 結果エリアは白背景＋角丸のカードデザイン
- モバイル対応を意識して余白を大きめに設定
3. JavaScriptでAPI連携
JavaScriptでは、以下の手順を実装します。
- 入力欄から都市名を取得
- OpenWeather APIにリクエスト
- 返ってきたJSONデータを解析
- 天気と気温を画面に表示
サンプルコード（抜粋）：
const apiKey = "YOUR_API_KEY"; // 自分のAPIキーをここに入力
const btn = document.getElementById("searchBtn");
const input = document.getElementById("cityInput");
const result = document.getElementById("result");
btn.addEventListener("click", () => {
const city = input.value.trim();
if(city === "") return;
fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`)
.then(res => res.json())
.then(data => {
if(data.cod === "404"){
result.textContent = "都市が見つかりません";
return;
}
const weather = data.weather[0].description;
const temp = data.main.temp;
result.textContent = `${city} の天気: ${weather} / 気温: ${temp}℃`;
})
.catch(() => {
result.textContent = "エラーが発生しました";
});
});
学習ポイント
今回の天気予報アプリを作ることで、以下の重要なポイントを学べます。
🔹 APIとは？
Application Programming Interface の略。サービスが提供するデータを、プログラムから取得できる仕組みです。
今回の例では、OpenWeather APIから天気情報を取得しています。
🔹 fetch() の使い方
fetch() はJavaScriptの組み込み関数で、外部のURLにリクエストを送り、レスポンスを受け取れます。
🔹 JSONデータの扱い
APIのレスポンスは多くがJSON形式。data.weather[0].description のように必要な情報を取り出します。
🔹 エラーハンドリング
- 存在しない都市名を入力した場合
- ネットワーク接続が不安定な場合
こうした状況でもエラーメッセージを表示する工夫が必要です。
公開方法（GitHub Pages）
完成したら、これまでと同様に GitHub Pages で公開します。
- GitHubでリポジトリを作成
index.htmlをアップロード- 「Settings → Pages」で公開設定を有効化
- 公開URLを確認
公開できたらSNSやブログでシェアしましょう。自分の成果が世界に届く体験は大きな自信になります。
まとめ
- 天気予報アプリは API連携の入門に最適
- fetch() と JSON処理を学びながら、外部データを扱うスキルを習得できる
- GitHub Pagesを使えば無料で世界に公開できる
初心者でも「外部サービスからデータを取得する」体験を通じて、学習が一気に実践的になります。
次回予告
Day06では「単位変換アプリ」を制作します。
距離・重さ・温度を自由に変換できる実用的なツールで、入力処理と数値計算をしっかり練習します。
API連携から数値変換へ。段階を追って、より実用的なアプリを一緒に作っていきましょう。
