ブラウザの位置情報から天気を返す方法。GPSとIP推定でその場で試せるサンプルつき

ブラウザの情報から天気を返したいなら、GPS優先、だめならIP推定 の2段構えがいちばん扱いやすいです。
最初から精度を求めすぎるより、まず 地域名 今の天気 気温 降水確率 ひとこと を返す形に絞ると実装がぶれません。

最終更新: 2026年4月20日

この記事では、ブラウザで位置情報を取り、Open-Meteo で天気を返す最小構成を整理します。
下のテスト欄では、そのまま現在地付近の天気を試せます。

先に答え

ブラウザの位置情報から天気を返す最小構成はこれです。

navigator.geolocation で GPS を試す
失敗したら IP ベースで地域を推定する
緯度経度を Open-Meteo に渡す
地域名 / 天気 / 気温 / 降水確率 / ひとこと を返す

これで、過剰に大きい仕組みにしなくても十分実用になります。

その場で試せるテスト

現在地付近の天気を試す

GPS優先で取得し、位置情報が使えないときはIPベースの推定地域で表示します。

ボタンを押すと天気を取得します。

この実装で返している情報

返しているのは次の5つだけです。

地域名
今の天気
現在気温と体感
今日の最高気温と最低気温
降水確率とひとこと

最初はこれで十分です。
ここに最寄り駅や雨雲レーダーまで足し始めると、位置精度やデータ量の問題が増えて重くなりやすいです。

なぜ GPS と IP 推定の2段構えにするのか

GPS は精度が高いですが、許可されないことがあります。
一方で IP 推定は精度が落ちますが、許可なしでもおおまかな地域を出せます。

この2段構えにしておくと、次のように止まりにくくなります。

許可されたら GPS で細かく出せる
許可されなくても IP 推定で地域天気は返せる
どちらもだめならエラー文を返せる

つまり、最初から完璧な現在地を狙うより、失敗しても戻せる設計のほうが実用的です。

実装の流れ

JavaScript の流れはかなり単純です。

const location = await resolveLocation('auto');
const weather = await fetchWeather(location.latitude, location.longitude);
return {
  label: location.city,
  summary: weather.current.weather_code,
  temperature: weather.current.temperature_2m,
  rain: weather.daily.precipitation_probability_max[0]
};

実際にやっていることはこの3つです。