Reactアプリ100本ノックやってみた 「07 Weather」

はじめに

フロントエンドに苦手意識のある私が、@Sicut_studyさんの【Reactアプリ100本ノック】をやってみました。
変なところがあれば教えていただきたいです。

今回の課題

やってみる

App.tsx

import Tenki from "./components/tenki";

function App() {
  return (
    <div>
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          gap: "10px",
        }}
      >
        <Tenki toki={0} />
        <Tenki toki={1} />
        <Tenki toki={2} />
      </div>
    </div>
  );
}

export default App;

tenki.tsx

import React, { useState } from "react";
import axios from "axios";
import hare from "./hare.png";
import kumori from "./kumori.png";
import ame from "./ame.png";
import sonota from "./sonota.png";

export const Tenki = (props: any) => {
  const [image, setImage] = useState(sonota);
  const [hiniti, setHiniti] = useState("");
  const [tenki, setTenki] = useState("");
  const [saikoukion, setSaikouKion] = useState("");
  const [saiteikion, setSaiteiKion] = useState("");

  const imageStyle = {
    width: "80px",
    height: "80px",
    borderRadius: "100px",
  };

  // https://weather.tsukumijima.net/
  axios
    .get("https://weather.tsukumijima.net/api/forecast/city/280010")
    .then((results) => {
      // 日にち
      let hiniti: string = brankchar(
        results.data.forecasts[props.toki].dateLabel
      );
      setHiniti(hiniti);

      // 天気
      let tenki: string = brankchar(
        results.data.forecasts[props.toki].detail.weather
      );
      setTenki(tenki);

      // 最高気温
      let saikoukion: string = brankchar(
        results.data.forecasts[props.toki].temperature.max.celsius
      );
      setSaikouKion(saikoukion);

      // 最高気温
      let saiteikion: string = brankchar(
        results.data.forecasts[props.toki].temperature.min.celsius
      );
      setSaiteiKion(saiteikion);

      // 画像セット
      switch (tenki) {
        case "晴れ":
          setImage(hare);
          break;
        case "くもり":
          setImage(kumori);
          break;
        case "雨":
          setImage(ame);
          break;
        default:
          setImage(sonota);
          break;
      }
    })
    .catch((error) => {
      console.log("失敗");
      console.log(error.status);
    });

  // 空白が出るまでの文字列を取得
  const brankchar = (motoMoji: string) => {
    let atoMoji: string = "";

    for (let i = 0; i < motoMoji.length; i++) {
      if (motoMoji[i].trim() === "") {
        break;
      }
      atoMoji += motoMoji[i];
    }
    return atoMoji;
  };

  return (
    <div>
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
        }}
      >
        <strong>{hiniti}</strong>
        <img src={image} style={imageStyle} />
        <p>{tenki}</p>
        <div>
          <p>最高{saikoukion}℃</p>
          <p>最低{saiteikion}℃</p>
        </div>
      </div>
    </div>
  );
};

export default Tenki;

完成

おわりに

現場でAPIを叩く製造をしたことがあったので、かなり早く実装することができました。次回の課題も楽しみです。