0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【React】React×TypeScriptで天気アプリ作成記録

Last updated at Posted at 2021-10-26

#1.はじめに
初めまして。未経験からプログラミングを始めて4ヶ月目に突入したので、アウトプットも兼ねてはじめて記事を投稿してみました。
お世話になった記事がたくさんあるので、備忘録として残しておきます。

#2.天気APIを使用したアプリケーション作成
【アプリの概要】1日の天気が確認でき、気象情報に応じて服装を教えてくれる

tenkiapp.png

【作成した経緯】
TypeScriptを学習し始めて、慣れるためにも3大フレームワークの中で1番相性がいいとされているReactと併用したアプリケーション制作を行おうと考えました。
またデザインも個人的に使い勝手がいいなと感じたTailwindCSSを用いました。

【使用した技術・API】
・React
・TypeScript
・OpenWeatherMapAPI
→Call 5 day / 3 hour forecast dataを使用
https://openweathermap.org/forecast5
・TailwindCSS

【実装した機能】
・検索欄に入力した地名、もしくはドロップダウンメニューから選択した地名の気象情報を検索
・検索した地域のその日の天気、気温が3時間ごとに表示される
・気温をもとにおすすめの服装を表示

#3.実現したかったこと
・現在地を取得して、現在地をもとに気象情報を表示する機能
・5日間の予報(最高気温、最低気温は算出できたものの曇り晴れなどの気象情報の表示を実現できなかった)

改善点
・時間の表示
・検索した地名にヒットしなかった時の処理

技術力と時間の都合で実現できなかった点が多いので、今後も機能の追加など
ブラッシュアップしていきたいと思います。

#4.参考サイト
https://zenn.dev/ogakuzuko/articles/react-typescript-for-beginner

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?