今日着るべき服を教えてくれるアプリを作る

動機

室内の快適な温度で生活していると、果たして外が暑いのか寒いのか分からないことが多い。
天気を調べるのも面倒だし、気温を見てもじゃあどの服を着ればよいのか分からない。
今日の天気を取得して、着ていくべき服を教えてくれるアプリを作成した。（いずれはIoTデバイスにして常に表示させておきたい）

要件

ユーザーに教えてほしい情報は以下

• 今日の気温
• 今日の天気
• 今日着るべき服

構成

Backendでは「OpenWether」というAPIで気温・天気情報を取得。気温を元にその日に着る服を算出する。Node.jsを使用。

FrontendではBackendから気温・天気・着るべき服の情報を受け取って表示する。Reactを使用。

実装

Backend

OpenWetherAPIを使用して天気情報を取得して、気温・天気・服装をFrontendに返却する実装の部分は以下。

controller.js

const getfashion = async (req, res) => {
    try
    {
         // OpenWether呼び出し
        await fetch(process.env.Weather_Heroku_URL || process.env.Weather_URL)
        .then(response => response.json())
        .then((data) => {
            
            temp = data.list[0].main.temp;
            weather = data.list[0].weather[0].main;

            // 気温から服装を割り出し
            fashion = fashioncheck(temp)

            fashioninfo = {
                "temp":temp,
                "weather":weather,
                "fashion":fashion
            }

            return res.status(200).json(fashioninfo);
        });

    }catch(err)
    {
        return res.status(500).json(err)
    }
}

function fashioncheck(temp){

    if(temp >= 30)      return "半袖シャツ";
    else if(temp >= 25) return "半袖・七分袖シャツ";
    else if(temp >= 20) return "長袖・七分袖シャツ";
    else if(temp >= 15) return "カーディガン・長袖シャツ・スウェット";
    else if(temp >= 12) return "セーター";
    else if(temp >= 8)  return "トレンチコート";
    else if(temp >= 5)  return "冬物コート";
    else                return "ダウンコート";
}

OpenWetherの使い方は以下を参考にした。

気温ごとの着る服は以下を参考にした。

frontend

Backendから来たデータをそのまま表示しただけ。

App.js

function App() {
  const [message, setMessage] = useState({});
  useEffect(()=>{
    const fetchGets = async () =>{
      const response = await axios.get('/api/fashion')
      setMessage(response.data);
    }
    fetchGets();
  },[]) 
  console.log(message.date);

  return (
    <div className="App">
    <h1>今日の気温と天気と服装</h1>
    <h1>{message.temp}</h1>
    <h1>{message.weather}</h1>
    <h1>{message.fashion}</h1>
  </div>  
  );
}

成果物

UI頑張りたい。。