【実例付き】JavaScript API連携で天気予報アプリを簡単に作る方法
「API連携って聞くけど、何から始めればいいかわからない...」
こんにちは、とまだです。
そんな悩みを抱えていませんか？
私もプログラミングを始めたばかりの頃、APIという言葉を聞くたびに「なんだか難しそう」と思って避けていました。
でも実は、APIは私たちの身近にあふれているんです。
今回は現役のエンジニア、そして元プログラミングスクール講師としての経験から、JavaScript API連携について解説します。
API連携をレストランの注文で理解する
簡単に言うと、API連携とは「他のサービスにデータをお願いして、結果をもらう」ことです。
日常生活で言うと、レストランでの注文みたいなものです。
- あなたはお客さん（JavaScriptアプリ）
- ウェイターがAPI
- 厨房がサーバー（データの保管場所）
お客さんは直接厨房に入れません。でも、ウェイターに注文すれば料理を運んできてくれますよね。
実際のコードで見てみましょう。
// レストランでの注文をコードで表現すると
const order = "天気情報をください";
// APIに注文を送る
const weather = await fetch("天気APIのURL");
// 結果が返ってくる
これだけです。難しく考える必要はありません。
なぜ自分でデータを持たないのか
ここで疑問に思うかもしれません。
「自分でデータを持てばいいじゃん」
でも考えてみてください。天気予報を作るために全国に観測所を設置しますか？
無理ですよね。
だから、すでにデータを持っている人（企業）から借りるんです。それがAPI連携の価値です。
今すぐ作れる天気予報アプリ（実践編）
では、実際に手を動かしてみましょう。
STEP1: 無料の天気APIを準備
OpenWeatherMapという無料サービスを使います。
- OpenWeatherMapにアクセス
- 無料アカウントを作成
- APIキーを取得（メールで送られてきます）
すぐに完了します。
STEP2: HTMLを作る
<!DOCTYPE html>
<html>
<head>
<title>お天気アプリ</title>
</head>
<body>
<h1>今日の天気</h1>
<input type="text" id="city" placeholder="都市名を入力">
<button onclick="getWeather()">天気を調べる</button>
<div id="result"></div>
</body>
</html>
シンプルな入力欄とボタンだけです。
STEP3: JavaScriptでAPI連携
async function getWeather() {
const city = document.getElementById('city').value;
const apiKey = 'あなたのAPIキー';
const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&lang=ja&units=metric`;
try {
const response = await fetch(url);
const data = await response.json();
document.getElementById('result').innerHTML = `
<h2>${data.name}の天気</h2>
<p>気温: ${data.main.temp}℃</p>
<p>天気: ${data.weather[0].description}</p>
`;
} catch (error) {
document.getElementById('result').innerHTML =
'<p>天気情報を取得できませんでした</p>';
}
}
async/awaitを使うと、「注文して、待って、受け取る」という流れを自然に表現できます。
よくあるつまずきポイントと解決法
CORSエラー
「Access to fetch...has been blocked by CORS」
このエラーはセキュリティのための仕組みです。
レストランで例えると「予約なしでは入れません」と言われているようなもの。
解決方法：
- サーバー側で許可設定をする
- 開発時は拡張機能を使う
- プロキシサーバーを経由する
401エラー（認証エラー）
APIキーが間違っている可能性が高いです。
解決方法：
- APIキーを再確認
- 前後の余計なスペースを削除
- 新しいキーを発行
429エラー（リクエスト過多）
無料プランの制限に引っかかっています。
解決方法：
- リクエスト回数を減らす
- キャッシュを活用する
- 有料プランを検討
実務で使える3つのテクニック
1. エラーハンドリングは必須
try {
// API呼び出し
} catch (error) {
// エラー時の処理
console.error('エラーが発生しました:', error);
}
APIは必ず成功するとは限りません。エラーが起きてもアプリが止まらないようにしましょう。
2. ローディング表示を入れる
document.getElementById('result').innerHTML = '読み込み中...';
// API呼び出し
ユーザーは待たされていることがわかれば、イライラしません。
3. キャッシュを活用する
const cache = {};
async function getWeatherWithCache(city) {
if (cache[city]) {
return cache[city];
}
const data = await fetchWeatherData(city);
cache[city] = data;
return data;
}
同じデータを何度も取得するのは無駄です。一度取得したデータは保存しておきましょう。
さらに高度な使い方
複数のAPIを同時に呼ぶ
天気と一緒にニュースも表示してみましょう。
const [weather, news] = await Promise.all([
fetch(weatherAPI),
fetch(newsAPI)
]);
複数の料理を同時に注文するイメージです。
リアルタイム更新
// 5分ごとに更新
setInterval(() => {
getWeather();
}, 5 * 60 * 1000);
常に最新の情報を表示できます。
認証が必要なAPI
TwitterやGitHubなど、ログインが必要なAPIもあります。
OAuth認証という仕組みを使いますが、基本的な流れは同じです。
まとめ
JavaScript API連携は、以下の3ステップです。
- リクエストを送る（fetch）
- レスポンスを受け取る（response.json()）
- データを使う（表示する）
レストランで注文するのと同じだと思えば、難しくないですよね。
API連携ができるようになると、作れるアプリの幅が無限に広がります。
まずは今日作った天気予報アプリを、友達に見せてみませんか？
著者について
とまだ
フルスタックエンジニア
Learning Next の創設者。Ruby on Rails と React を中心に、プログラミング教育に情熱を注いでいます。初心者が楽しく学べる環境作りを目指しています。
著者の詳細を見る →