朝活137日目　動的にURLを生成できるようにした

今日は複数ポイント登録できるように実装をしていくー

まずは使うのをやめたモジュールを削除。

今のURLは恋が浦決め打ちなのと、今後別な値も欲しい、やっぱこの値いらないなーってなった時に動的に決められないので修正する。

今日はcopilotにもお願いしてみる。

---

現在のURLは、

'https://marine-api.open-meteo.com/v1/marine?latitude=31.412205&longitude=131.343669&current=swell_wave_height&hourly=wave_height,wave_direction,wind_wave_height,wind_wave_direction,swell_wave_height,swell_wave_direction&timezone=Asia%2FTokyo'

です。
AIPへのURLを動的に変更できるようにしたい "https://marine-api.open-meteo.com/v1/marine"この後ろから、全て動的に変更できるように書き換えて

GitHub Copilot

以下のように、テンプレートリテラルとオブジェクトを使用して、APIへのURLを動的に生成することができます。

const baseUrl = "https://marine-api.open-meteo.com/v1/marine";

const params = {

latitude: 31.412205,

longitude: 131.343669,

current: "swell_wave_height",

hourly: "wave_height,wave_direction,wind_wave_height,wind_wave_direction,swell_wave_height,swell_wave_direction",

timezone: "Asia%2FTokyo"

};

const url = `${baseUrl}?latitude=${params.latitude}&longitude=${params.longitude}&current=${params.current}&hourly=${params.hourly}&timezone=${params.timezone}`;

console.log(url);

このコードでは、paramsオブジェクトにAPIへのリクエストパラメータを設定しています。そして、テンプレートリテラルを使用して、これらのパラメータをURLに組み込んでいます。

この方法を使用すれば、paramsオブジェクトの値を変更するだけで、APIへのURLを動的に変更することができます。

---

hourlyを配列で管理するとどうなりますか？

GitHub Copilot

hourlyを配列で管理すると、APIへのリクエストパラメータを動的に生成することが容易になります。以下にそのためのコードを示します：

const baseUrl = "https://marine-api.open-meteo.com/v1/marine";

const params = {

latitude: 31.412205,

longitude: 131.343669,

current: "swell_wave_height",

hourly: ["wave_height", "wave_direction", "wind_wave_height", "wind_wave_direction", "swell_wave_height", "swell_wave_direction"],

timezone: "Asia%2FTokyo"

};

const url = `${baseUrl}?latitude=${params.latitude}&longitude=${params.longitude}&current=${params.current}&hourly=${params.hourly.join(',')}&timezone=${params.timezone}`;

console.log(url);

このコードでは、hourlyパラメータを文字列の配列として管理しています。そして、URLを生成する際に、Array.prototype.joinメソッドを使用して、配列の要素をカンマで連結した文字列に変換しています。

この方法を使用すれば、hourlyパラメータの値を動的に変更することが容易になります。例えば、新たなパラメータを追加する場合には、params.hourly配列に新たな要素を追加するだけで済みます。

---

こっちが好み！

今度は動的にポイント情報を変更できるようにしようと思ったけど、routeの設定とかしないといけなさそうだったので、一旦今日はここまでー