夕活　祝！！波情報出力成功！！

なんか暇、ゲームもアニメも気分じゃなかったので、開発。
今はこれが楽しいということか！

こんな感じで返ってきてた。
欲しい情報は、波の高さと方向、あー、潮位も欲しいかー

このサイト潮位なさそうか？
別なAPI探して叩くしか無いかなぁー

とりあえずTypeScriptにしなきゃ

ありゃー
型定義まではできて、それを各値に割り当てる時、いつも混乱するんだよなー

なんとか乗り切って、表を編集。
出力することに成功しました！

ChatGPT先生は本当に優秀だ！

waveDataを定義したけど、オブジェクトの中に配列があって、どう展開すればいいんだっけ？っと思ってきてみたら、下記のコードを示してくれた。

<TableBody>
  {waveData.time.map((time, index) => (
    <TableRow key={time}>
      <TableCell>{time}</TableCell>
      <TableCell>{waveData.wave_height[index]}</TableCell>
      <TableCell>{waveData.wave_direction[index]}</TableCell>
      <TableCell>{waveData.swell_wave_height[index]}</TableCell>
      <TableCell>{waveData.swell_wave_direction[index]}</TableCell>
      <TableCell>{waveData.wind_wave_height[index]}</TableCell>
      <TableCell>{waveData.wind_wave_direction[index]}</TableCell>
    </TableRow>
  ))}
</TableBody>

timeを取り出すときにindexも取って、同じ順番の値を取ってきてくれてる。。。
説明下手くそ。。。

とりあえず出力はできたなー

今は全部出力しちゃってるから何時間おきにするか、、、３時間くらいでいいかなー

        <TableBody>
        {waveData && waveData.time && waveData.time.map((time, index) => {
          // 3時間おきにデータを出力するために、インデックスが3で割り切れる場合のみ行を生成
          if (index % 3 === 0) {
            return (
              <TableRow key={time}>
                <TableCell>{time}</TableCell>
                <TableCell>{waveData.wave_height[index]}</TableCell>
                <TableCell>{waveData.wave_direction[index]}</TableCell>
                <TableCell>{waveData.swell_wave_height[index]}</TableCell>
                <TableCell>{waveData.swell_wave_direction[index]}</TableCell>
                <TableCell>{waveData.wind_wave_height[index]}</TableCell>
                <TableCell>{waveData.wind_wave_direction[index]}</TableCell>
              </TableRow>
            );
          }
          return null; // それ以外の場合は何も返さない（nullを返す）
        })}
        </TableBody>

いい感じ！
ただ風波の値が絶対違うと思うんだよなー

また値を見直してみよう。。。
コミットして終わりましょう。
シャワー浴びよーっと