React(TypeScript)の構成でアプリを作成をしました【課題その③】【weather app】

## 学習したスキル

- TypeScript+Reactの構成で、Applicationを開発するスキル
- 外部APIを利用するスキル（openWeather, googleMap）
- ドキュメントを読むスキル
- バックエンドと連携するスキル
- Githubのissueでタスクの管理

## 具体的な手順

- Githubレポジトリの作成
- 必要な機能の明分化
- タスクの優先順位付け
- デモアプリを覗いてデザインの確認
- 自身が作成したスケージュールに沿ってアプリケーションを実装

## 機能及び特徴

- 任意の都市や場所の天気予報
- 7日間の延長予報
- GeolocationAPIを利用したユーザーの位置情報の取得
- 摂氏から華氏への変換、およびその逆をワンクリックで実行可能


## 作成したアプリについて

#### 作成したアプリ

[React （ Redux ToolKit + TypeScript ）の構成でアプリを作成しました【Weather Application】](https://qiita.com/kanfutrooper/items/b0f4078e5329f97b7ff6)

#### 完成品

https://gyazo.com/e7889142f04d380fb658452962fb21a2


## HTTP通信とは

http通信とは、URLを指定してインターネット上のwebサーバへアクセスし、データのやりとりをする通信のこと。一般的にはブラウザからURLを指定して、webページを表示する際に使用される。

## RESTAPIとは

REST API (RESTful API とも言う) は、REST アーキテクチャスタイルの制約に従い、RESTful Web サービスとの対話を可能にするアプリケーション・プログラミング・インタフェース (API または Web API) 。

## 課題をこなす上で苦労した点と苦労をどのように克服したか

- Reactを理解していなかった。
⇨　Reactを１から勉強した。
- 必要な機能とタスクの優先順位付けのイメージがわかなかった。
⇨  課題その２のアプリを実装する前に、下記の参考サイトを見ながら実際にサンプルを何度も作成して、必要な機能及びタスクの優先順位のイメージと確認をした。


## 課題２：感想

作成にあたり自身の技術と理解不足で、想定以上の時間を要した。
最終的になんとか完成に漕ぎ着けたのでよかったと思う。


## 参考サイト

#### HTTP通信

[【初心者向け】httpリクエスト・レスポンスについて分かりやすく解説](https://kiyoakiweb.com/http-communication/#:~:text=http%E9%80%9A%E4%BF%A1%E3%81%A8%E3%81%AF%E3%80%81URL,%E9%9A%9B%E3%81%AB%E4%BD%BF%E7%94%A8%E3%81%95%E3%82%8C%E3%81%BE%E3%81%99%E3%80%82)

#### REST API
[REST API とは](https://www.redhat.com/ja/topics/api/what-is-a-rest-api)

#### 天気情報関連
[openweathermap.org JSONで返される摂氏で温度を計算するにはどうすればよいですか？](https://stackoverflow.com/questions/19477324/how-do-i-calculate-the-temperature-in-celsius-returned-in-openweathermap-org-jso)
[【Rails/JS】無料API「OpenWeatherMap」で天気予報を表示する](https://qiita.com/mikan3rd/items/a5bc87a2242e67cf17a4)[特定のタイムゾーンでUTC時間を変換しようとしています](https://www.javaer101.com/en/article/53835642.html)
#### GoogleMap関連
[API キーなしでサイトに Google マップを表示（埋め込みコード）](https://www.webdesignleaves.com/pr/plugins/googlemap_02.html)
[React(Next.js) と Google Map の Tips](https://zenn.dev/tiwu_dev/articles/2df43542918961)
[How to Integrate the Google Maps API into React Applications](https://www.digitalocean.com/community/tutorials/how-to-integrate-the-google-maps-api-into-react-applications)
[Google Map React](https://github.com/google-map-react)

#### 位置情報関連
[位置情報 API](https://developer.mozilla.org/ja/docs/Web/API/Geolocation_API)
[位置情報をブラウザで取得するGeolocation APIを使って今いる住所を調べる](https://webdrawer.net/javascript/geolocation.html)
[Geolocation to Promise wrap example](https://gist.github.com/varmais/74586ec1854fe288d393)
#### グラフ表示関連
[Recharts](https://recharts.org/en-US/)
#### API連携関連
[API連携関連](https://github.com/axios/axios)
[axiosのパラメータ指定方法まとめ](https://qiita.com/taroc/items/f22f7dd5d6d5443c72a4)
#### Javascript配列
[配列操作(追加, 削除, filter, map, reduceなど)](https://www.wakuwakubank.com/posts/280-javascript-array-helper/)
[【JavaScript】オブジェクトが空かどうか判定する](https://www.deep-rain.com/programming/javascript/910)
#### Github issue
[Github issue との付き合い方 作成編](https://qiita.com/janus_wel/items/ba47259f107b161c5727)

#### お天気アプリ
[Reactチュートリアル—最初から天気アプリを作成する—パート1](https://ichi.pro/react-chu-toriaru-saisho-kara-tenki-apuri-o-sakuseisuru-pa-to-1-249547747217682)
[Reactを使ったお天気アプリを作成してみた](https://qiita.com/himorishige/items/7ac157f143be622790b0)
[Weather App using React, Redux and Typescript](https://www.youtube.com/watch?v=ddYwN1h_Jno)
[Weather app in React, Redux, Typescript, and Tailwind](https://dev.to/keno_sej/weather-app-in-react-redux-typescript-and-tailwind-3acm)
[How to Build a Weather Application with React and React Hooks](https://www.freecodecamp.org/news/learn-react-by-building-a-weather-app/)