More than 3 years have passed since last update.

Reactでお天気アプリの作成

Posted at 2021-05-28

はじめに

今回はReactでお天気アプリを作成しました。

完成イメージ

作成目標

APIを使うことに慣れる
今までAPIを使ってアプリ作成をしたことがなかったので
この機会にAPIをきちんと使えるようにすること。
そのために公式の仕様のドキュメントを読んで、なるべく自分のコードで書きながら進めました。

使用した技術

React
Material-UI
Typescript
recharts
react-google-maps/api

実装した機能

geolocationにて現在地の取得
geocodingにて入力された地名から緯度経度を取得
取得した緯度経度のお天気情報をOpenWeatherから取得

感想

苦労した点
まずAPIを使ったことがなかったので、データを取得する部分で上手くいかず苦労しました。

他の方の記事はなるべく見ないで公式のドキュメントを読んで自分で書いてみることを目標にしたので
かなり時間はかかりましたが、勉強になりました。

また新しいことに挑戦してると当たり前のことを失念したりして驚きました。
データを取得する関数内で、データが取得できているかconsole.logを使用して確認しても
データが入っておらずなぜ？としばらく詰まっていました。
でもレンダリングしないとデータは更新されませんよね...。
一時的にデータを確認するためのボタンを作成して更新を確認したりして解決しました。

反省
TypeScriptをもっと使用しようと思っていたのですが、現状の自分のレベルでは
ただ無駄にコードを増やしているだけで、足枷にしかなってないように思いました。

なので次作成するアプリではもっと上手くTypeScriptを使えるようになりたいと思いました。
また、まだ使ったことのない技術もどんどん試したいと思います！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up