朝活153日目　Zennで記事公開した

2024年5月13日 07:57

日本語能力が低すぎる。。。
文がおかしいというのはわかるのです。
でもダメなんです。
直せないんです。。。

ChatGPT先生助けて！

コードの実例と本文の内容が前後したり、説明がわかりにくいように感じます。修正してください ## リクエストを投げる処理今のままだとポイントごとにベタがきする必要がある為、動的に表示するポイントを切り替えれるようにする必要があります。今のところサーバサイドの実装をするつもりもないですし、表に出せないポイント情報もあるので、環境変数`.env`で管理することにしました。まずはAPI部分、fetchWaveData.jsを定義

```js export const fetchWaveData = async (point:any): Promise<WaveData | ErrorCode> => { const coords = process.env[`REACT_APP_${point.toUpperCase()}_COORDS`] ?? '000,000'; const [latitude, longitude] = coords.split(','); const baseUrl = "https://marine-api.open-meteo.com/v1/marine"; const params = { latitude: latitude, longitude: longitude, 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 point_api_url = `${baseUrl}?latitude=${params.latitude}&longitude=${params.longitude}&current=${params.current}&hourly=${params.hourly.join(',')}&timezone=${params.timezone}`; ```

```env REACT_APP_KOIGAURA_POINT="恋ヶ浦" REACT_APP_KOIGAURA_COORDS=31.4033,131.3417 REACT_APP_NISHIKATA_POINT="西方海水浴場" REACT_APP_NISHIKATA_COORDS=31.911186,130.224127 ```

こんな感じでURLを作成。 paramsに渡しているポイントの緯度経度は.envファイルで管理表を出力するコンポーネントからuseEffectを使ってfetchWaveData関数を呼び出します。表示したいポイントの名前を渡して、環境変数に登録されているKEYを作成して値を取ってきます。

```js useEffect(() => { const getOrders = async () => { try { const waveDataList = await fetchWaveData(point); const windsDataList = await fetchWindData(point); setWaveData(waveDataList); setWindData(windsDataList); } catch (error) { console.error(error); } }; getOrders(); }, [point]); ```

文章の内容がコードの実装に関する説明と前後しているため、より論理的でわかりやすい形に修正すると良いでしょう。ここでは、コードの流れに沿って文章を整理し、各部分の関連性を明確にしています。

リクエストを投げる処理

まず、各ポイントの情報を動的に管理し、コード内で直接書く必要がないように、環境変数`.env`でポイント情報を管理します。これにより、サーバーサイドを実装せずとも、表に出せないポイント情報を安全に扱うことができます。

環境変数の設定

環境変数は以下のように設定します：

REACT_APP_KOIGAURA_POINT="恋ヶ浦"
REACT_APP_KOIGAURA_COORDS=31.4033,131.3417
REACT_APP_NISHIKATA_POINT="西方海水浴場"
REACT_APP_NISHIKATA_COORDS=31.911186,130.224127

API リクエスト関数の定義

次に、`fetchWaveData.js`ファイルで波情報を取得するためのAPIリクエスト関数`fetchWaveData`を定義します。この関数では、環境変数からポイント名に基づく座標を取得し、APIのURLを動的に生成します。

export const fetchWaveData = async (point: any): Promise<WaveData | ErrorCode> => {
  const coords = process.env[`REACT_APP_${point.toUpperCase()}_COORDS`] ?? '000,000';
  const [latitude, longitude] = coords.split(',');
  const baseUrl = "https://marine-api.open-meteo.com/v1/marine";

  const params = {
    latitude: latitude,
    longitude: longitude,
    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 point_api_url = `${baseUrl}?latitude=${params.latitude}&longitude=${params.longitude}&current=${params.current}&hourly=${params.hourly.join(',')}&timezone=${params.timezone}`;
}

コンポーネントでのデータ取得

最後に、表を表示するReactコンポーネント内で`useEffect`フックを使用し、表示したいポイントに基づいて`fetchWaveData`関数を呼び出します。これにより、ユーザーが選択したポイントの波情報を取得し、表示します。

useEffect(() => {
  const getOrders = async () => {
    try {
      const waveDataList = await fetchWaveData(point);
      const windsDataList = await fetchWindData(point);
      setWaveData(waveDataList);
      setWindData(windsDataList);
    } catch (error) {
      console.error(error);
    }
  };

  getOrders();
}, [point]);

以上のように、ポイントごとの情報を動的に切り替えることで、APIリクエストの処理を効率的にし、ユーザーに応じて柔軟にデータを表示できます。

このような改善によって、読者は各部分がどのように連動しているのかを容易に理解でき、技術的な詳細も明確になります。

即採用！

色々ゴニョゴニョして、とりあえず公開！！
まだまだ記事にできそうだけどどうしようかなー