天気予報APIのハマりどころ

June 7, 2023.md

無料かつ利用制限がないAPIということで、以下を利用してみました。

Free Open-Source Weather API | Open-Meteo.com

例として、一週間の東京の天気を取得する関数はこんな感じで定義できます。

const tokyo = {
  latitude: 35.7,       // 緯度
  longitude: 139.6875,  // 経度
};

const fetchWeather = async (city) => {
  const queries = new URLSearchParams({
    latitude: city.latitude.toString(),
    longitude: city.longitude.toString(),
    daily: "weathercode",
    timezone: "Asia/Tokyo",
  });
  const url = `https://api.open-meteo.com/v1/forecast?${queries}`;
  const response = await fetch(url);
  const body = await response.json();

  return body;
}

レスポンスはこんな感じです。 daily.time[i] のときの天気が daily.weathercode[i] に対応しているっぽいです。

{
  "latitude": 35.7,
  "longitude": 139.6875,
  "generationtime_ms": 0.22995471954345703,
  "utc_offset_seconds": 32400,
  "timezone": "Asia/Tokyo",
  "timezone_abbreviation": "JST",
  "elevation": 43,
  "daily_units": {
    "time": "iso8601",
    "weathercode": "wmo code"
  },
  "daily": {
    "time": [
      "2023-06-07",
      "2023-06-08",
      "2023-06-09",
      "2023-06-10",
      "2023-06-11",
      "2023-06-12",
      "2023-06-13"
    ],
    "weathercode": [
      63,
      55,
      65,
      61,
      63,
      61,
      61
    ]
  }
}

天気がテキストではなく気象コードという謎の概念で返ってくるので、表示にあたっては良い感じに変換してあげる必要があります。ざっとドキュメントを読んだ雰囲気ですが、こんな感じになるのかなと思います…。

// WMOの気象コードをテキストに変換します
// see: https://open-meteo.com/en/docs
const convertWeathercodetoText = (weathercode) => {
  switch (weathercode) {
    case 0:
      return "晴れ"
    case 1:
    case 2:
    case 3:
      return "晴れ時々曇り"
    case 45:
    case 48:
      return "霧"
    case 51:
    case 53:
    case 55:
      return "霧雨"
    case 56:
    case 57:
      return "雨氷"
    case 61:
    case 63:
    case 65:
      return "雨"
    case 66:
    case 67:
      return "雨氷"
    case 71:
    case 73:
    case 75:
      return "雪"
    case 77:
      return "霧雪"
    case 80:
    case 81:
    case 82:
      return "豪雨"
    case 85:
    case 86:
      return "豪雪"
    case 95:
    case 96:
    case 99:
      return "雷雨"
    default:
      return "-"
  }
}