🌦️
【React/chakra UI/Redux】お天気アプリ開発
ReduxToolkitを使用して実際に何か簡易的なアプリを作成してみたいと思い、お天気アプリを作りました。
天気を知りたい都市名を英数字で入力し、検索するとその都市の現在のお天気が表示されます。
OpenWeatherMapAPIを使用し、お天気情報の取得とレンダリングをしています。
何か新しい使ったことないUIコンポーネントライブラリを使用してみたくchakra UIというものを使ってみました。
簡単なUIがすぐに作れました🚀
最初はひとまずpropsを介して作成してみましたが、比較的簡単に実装できました。
これくらいのアプリならpropsやuseContextで状態管理すると思いますが、ReduxToolkitを実際に使用してみたかったので書き換えました。
ReduxToolkitの使用方法は事前にキャッチアップしておきましたが、非同期が絡むとcreateAsyncThunkなども使用するようで、やはり難しかったです。
キャッチアップするだけでなはく、実際に成果物を作成し、アウトプットすることの大切さを改めて感じました。
主な機能
- 検索フォームに都市名を入力し、検索するとその都市の天気が表示
- 天気に応じてアイコン、背景画像などが変化
- 検索フォームで英数字以外の入力があった際には即時エラー表示
- デフォルトでは東京都の天気を表示
- 存在しない都市名などAPI通信が失敗した際にはモーダル表示
以下実際の成果物とリポジトリです。
Discussion