OpenWeatherMap APIで天気アプリを作る完全ガイド【無料枠・実装例】

OpenWeatherMap APIとは

OpenWeatherMapは世界中の天気データをAPIで提供するサービスで、無料プランから始められることから多くの開発者・スタートアップに利用されています。現在の天気・予報・過去データ・大気質・紫外線指数など多様な気象情報を取得できます。

APIキーの取得

1. openweathermap.orgでアカウント作成
2. 「API keys」タブからキーを確認（デフォルトキーが自動生成）
3. キーの有効化に数時間かかる場合があります

現在の天気を取得する

// 都市名での取得
GET https://api.openweathermap.org/data/2.5/weather
  ?q=Tokyo,JP
  &appid={API_KEY}
  &units=metric  // 摂氏
  &lang=ja       // 日本語

// 緯度経度での取得
GET https://api.openweathermap.org/data/2.5/weather
  ?lat=35.6762
  &lon=139.6503
  &appid={API_KEY}
  &units=metric

レスポンスの主要フィールド：

• main.temp：気温（摂氏）
• main.humidity：湿度（%）
• weather[0].description：天気の説明（lang=jaで日本語）
• weather[0].icon：天気アイコンコード
• wind.speed：風速（m/s）
• rain.1h：1時間の降水量（mm）

5日間予報の取得

GET https://api.openweathermap.org/data/2.5/forecast
  ?q=Osaka,JP
  &appid={API_KEY}
  &units=metric
  &lang=ja

3時間ごとのデータが40件返ります。日ごとのグループ化は取得後にクライアント側で処理する必要があります。

Next.jsでの実装例

// app/weather/page.tsx
async function getWeather(city: string) {
  const res = await fetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city},JP&appid=${process.env.OPENWEATHER_API_KEY}&units=metric&lang=ja`,
    { next: { revalidate: 1800 } } // 30分キャッシュ
  );
  return res.json();
}

export default async function WeatherPage() {
  const weather = await getWeather('Tokyo');
  return (
    <div>
      <h1>東京の天気</h1>
      <p>{Math.round(weather.main.temp)}°C - {weather.weather[0].description}</p>
    </div>
  );
}

アイコンの表示

天気アイコンはAPIレスポンスのiconコードを使って表示できます。

<img src=`https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png` alt="天気" />

大気質API（Air Pollution）

Air Pollution APIを使うとPM2.5・CO・NO2・O3などの大気汚染指標を取得できます。健康・アウトドア・農業アプリでの活用に適しています。無料プランでも利用可能です。

まとめ

OpenWeatherMap APIは無料で利用できる充実した天気データAPIです。現在の天気・予報・大気質をシンプルなREST APIで取得でき、個人プロジェクトからスタートアップまで幅広く活用されています。APIキーの取得→無料プランで開発→必要に応じて有料プランに移行というステップで使い始めてみてください。