サーフィン用、波情報アプリ開発中~その2~方角表示

はじめに

鹿児島在住のエンジニア、tsurupです。毎朝30分から1時間、朝活として個人開発を行い、その様子をNoteに投稿しています。現在、サーフィン用の波情報取得アプリを開発しており、その過程を記事にしています。前回は波情報を取得し表示する方法についてまとめましたが、今回は風情報の角度から方角への変換方法について紹介します。

前回記事：サーフィン用、波情報アプリ開発中~その1~API叩くまで

問題の発生：風向が角度で返されることの課題

前回実装した波情報と同様に、風情報もAPIから取得します。取得した情報は波の向きも風向きも角度で返されます。しかし、角度では直感的に理解しづらいため、方角に変換する必要があります。方角に変換することで、風の向きを視覚的に理解しやすくなります。

気象庁の風情報APIの紹介

風情報も前回の記事でも紹介したサイトからとってきます。
https://open-meteo.com/en/docs/bom-api
こちらのサイトでJAPAN、気象庁を選択して、今回欲しいWind Speed (10 m)とWind Direction (10 m)にチェック。緯度経度を入力すると風情報が取得できます。
この時帰ってくる値は90とか180、２７０とか角度で返ってきます。

実装：角度から方角への変換

どうしたものかと軽くChatGPTに聞いてみたところ、ドンピシャの回答が返ってきました。以下はそのコードの例です：

function getWindDirection(angle) {
  const directions = ['北', '北北東', '北東', '東北東', '東', '東南東', '南東', '南南東', '南', '南南西', '南西', '西南西', '西', '西北西', '北西', '北北西'];
  const index = Math.floor((angle + 11.25) / 22.5) % 16;
  return directions[index];
}

directionsには北を起点に時計回りに方角が並んでいます。

次に、角度angleを方角のインデックスに変換します。ここで重要なのは、各方位が22.5度の範囲を持っているということです。

360度を16方位に分けると、1方位あたりの角度は360度 ÷ 16 = 22.5度になります。つまり、各方位が22.5度の幅を持っています。

例えば、北（0度）は-11.25度から+11.25度の範囲をカバーします。同様に、北北東（22.5度）は11.25度から33.75度の範囲をカバーします。

このため、与えられた角度に11.25度を足すことで、その角度がどの方位に属するかを決定しやすくします。足した後、22.5で割ると、各方位に対するインデックスが得られます。

const index = Math.floor((angle + 11.25) / 22.5) % 16;

この計算式により、例えば角度0度は北（インデックス0）に、角度45度は北東（インデックス2）に変換されます。

あとは表示する際に、このメソッドに角度を渡して方角を表示するだけです。

さいごに

めちゃくちゃ簡単でしょ！
とか言いながらこの記事を書くまでちゃんと理解しきれずに使っていました。
こうやってまとめ記事を出しながらChatGPTに投げるだけじゃなくて、理解も深めていきたいと思います。
今回のは技術というよりロジック？算数？の話でした。
まだまだ開発中なので、またしばらくしたら記事書きまーす