前日が豪雨だったので雨雲レーダーと週間天気予報を表示

## ０．はじめに

この記事を書いている前日に私が住んでいる地域は豪雨でした。

「やばい、お弁当が買いにいけない、いつ止むんだろ…雨雲レーダーほしい！」となったので大慌てでcodepenに作りました。

<p class="codepen" data-height="702.0868530273438" data-default-tab="html,result" data-slug-hash="Exzzwzv" data-pen-title="雨雲レーダー2" data-user="sf-os" style="height: 702.0868530273438px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/sf-os/pen/Exzzwzv">
  雨雲レーダー2</a> by sf-os (<a href="https://codepen.io/sf-os">@sf-os</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

基本的には以下の記事を参考にしただけです。（ニコイチ）

https://four4to6.x0.com/1658/

https://qiita.com/LookUP/items/a934482a054444687439

記事の内容から、少し変更した点は、

1. 自分が天気を知りたい地域の地図を初期表示したいので緯度/軽度を登録できるようにした
1. 緯度、軽度から直線で一番近い地域の気象台のデータを取得できるようにした

１はただlocalStorageに保存できるように、しただけです。
２は便利なAPIがあったようなのですが、今は稼働していないので、仕方なくPerplexity先生（無料版）に簡易版を作ってもらいました。

## １．緯度、軽度から直線で一番近い地域の気象台のコードを取得する関数

Perplexity先生（無料版）作成なので質問されても回答できませんｗ
テスト（数回）した限りではちゃんと動いてます。

```javascript
const regions = [
  { code: '011000', name: '宗谷地方', lat: 45.4156, lon: 141.6739 },
  { code: '012000', name: '上川・留萌地方', lat: 43.7706, lon: 142.3647 },
  { code: '013000', name: '網走・北見・紋別地方', lat: 43.9106, lon: 144.1681 },
  { code: '014100', name: '釧路・根室・十勝地方', lat: 42.9849, lon: 144.3814 },
  { code: '015000', name: '胆振・日高地方', lat: 42.3559, lon: 141.0284 },
  { code: '016000', name: '石狩・空知・後志地方', lat: 43.0621, lon: 141.3544 },
  { code: '017000', name: '渡島・檜山地方', lat: 41.7687, lon: 140.7290 },
  { code: '020000', name: '津軽・下北', lat: 40.8244, lon: 140.7400 },
  { code: '030000', name: '内陸', lat: 39.7036, lon: 141.1526 },
  { code: '040000', name: '東部', lat: 38.2688, lon: 140.8721 },
  { code: '050000', name: '秋田県', lat: 39.7186, lon: 140.1024 },
  { code: '060000', name: '山形県', lat: 38.2404, lon: 140.3633 },
  { code: '070000', name: '中通り・浜通り', lat: 37.7503, lon: 140.4676 },
  { code: '080000', name: '茨城県', lat: 36.3416, lon: 140.4467 },
  { code: '090000', name: '栃木県', lat: 36.5657, lon: 139.8836 },
  { code: '100000', name: '南部', lat: 36.3911, lon: 139.0608 },
  { code: '110000', name: '埼玉県', lat: 35.8569, lon: 139.6489 },
  { code: '120000', name: '千葉県', lat: 35.6073, lon: 140.1063 },
  { code: '130000', name: '東京地方', lat: 35.6895, lon: 139.6917 },
  { code: '140000', name: '神奈川県', lat: 35.4478, lon: 139.6425 },
  { code: '150000', name: '新潟県', lat: 37.9022, lon: 139.0236 },
  { code: '160000', name: '富山県', lat: 36.6953, lon: 137.2113 },
  { code: '170000', name: '石川県', lat: 36.5945, lon: 136.6256 },
  { code: '180000', name: '福井県', lat: 36.0652, lon: 136.2215 },
  { code: '190000', name: '山梨県', lat: 35.6641, lon: 138.5684 },
  { code: '200000', name: '北部', lat: 36.6513, lon: 138.1811 },
  { code: '210000', name: '美濃地方', lat: 35.3912, lon: 136.7222 },
  { code: '220000', name: '静岡県', lat: 34.9769, lon: 138.3831 },
  { code: '230000', name: '愛知県', lat: 35.1802, lon: 136.9066 },
  { code: '240000', name: '三重県', lat: 34.7303, lon: 136.5086 },
  { code: '250000', name: '南部', lat: 35.0045, lon: 135.8686 },
  { code: '260000', name: '南部', lat: 35.0116, lon: 135.7681 },
  { code: '270000', name: '大阪府', lat: 34.6937, lon: 135.5023 },
  { code: '280000', name: '南部', lat: 34.6913, lon: 135.1830 },
  { code: '290000', name: '奈良県', lat: 34.6851, lon: 135.8048 },
  { code: '300000', name: '和歌山県', lat: 34.2261, lon: 135.1675 },
  { code: '310000', name: '鳥取県', lat: 35.5036, lon: 134.2383 },
  { code: '320000', name: '島根県', lat: 35.4723, lon: 133.0505 },
  { code: '330000', name: '南部', lat: 34.6618, lon: 133.9350 },
  { code: '340000', name: '南部', lat: 34.3963, lon: 132.4596 },
  { code: '350000', name: '山口県', lat: 34.1859, lon: 131.4706 },
  { code: '360000', name: '徳島県', lat: 34.0657, lon: 134.5593 },
  { code: '370000', name: '香川県', lat: 34.3401, lon: 134.0434 },
  { code: '380000', name: '愛媛県', lat: 33.8416, lon: 132.7661 },
  { code: '390000', name: '高知県', lat: 33.5597, lon: 133.5311 },
  { code: '400000', name: '福岡県', lat: 33.6064, lon: 130.4181 },
  { code: '410000', name: '佐賀県', lat: 33.2494, lon: 130.2988 },
  { code: '420000', name: '南部・北部・五島', lat: 32.7448, lon: 129.8737 },
  { code: '430000', name: '熊本県', lat: 32.7898, lon: 130.7417 },
  { code: '440000', name: '大分県', lat: 33.2382, lon: 131.6125 },
  { code: '450000', name: '宮崎県', lat: 31.9077, lon: 131.4202 },
  { code: '460100', name: '鹿児島県(奄美地方除く)', lat: 31.5602, lon: 130.5581 },
  { code: '471000', name: '沖縄本島地方', lat: 26.2124, lon: 127.6809 },
  { code: '472000', name: '大東島地方', lat: 25.8293, lon: 131.2327 },
  { code: '473000', name: '宮古島地方', lat: 24.8058, lon: 125.2813 },
  { code: '474000', name: '八重山地方', lat: 24.3406, lon: 124.1555 }
];

function getForecastCode(latitude, longitude) {
  let nearestRegion = null;
  let minDistance = Infinity;

  for (const region of regions) {
    const distance = calculateDistance(latitude, longitude, region.lat, region.lon);
    if (distance < minDistance) {
      minDistance = distance;
      nearestRegion = region;
    }
  }

  return nearestRegion ? nearestRegion.code : null;
}

function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // 地球の半径（km）
  const dLat = toRadians(lat2 - lat1);
  const dLon = toRadians(lon2 - lon1);
  const a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2);
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
  return R * c;
}

function toRadians(degrees) {
  return degrees * (Math.PI / 180);
}

// 使用例
const code = getForecastCode(35.6895, 139.6917);
console.log('Forecast code:', code);
```

## 2.終わりに

Perplexity先生（無料版）のおかげで私みたいな、素人でもなんとか作れます。
生成AIすごい、ありがたい世の中ですね。


以上