学習したスキル
- TypeScript+Reactの構成で、Applicationを開発するスキル
- 外部APIを利用するスキル（openWeather, googleMap）
- ドキュメントを読むスキル
- バックエンドと連携するスキル
- Githubのissueでタスクの管理
具体的な手順
- Githubレポジトリの作成
- 必要な機能の明分化
- タスクの優先順位付け
- デモアプリを覗いてデザインの確認
- 自身が作成したスケージュールに沿ってアプリケーションを実装
機能及び特徴
- 任意の都市や場所の天気予報
- 7日間の延長予報
- GeolocationAPIを利用したユーザーの位置情報の取得
- 摂氏から華氏への変換、およびその逆をワンクリックで実行可能
作成したアプリについて
作成したアプリ
React （ Redux ToolKit + TypeScript ）の構成でアプリを作成しました【Weather Application】
完成品
HTTP通信とは
http通信とは、URLを指定してインターネット上のwebサーバへアクセスし、データのやりとりをする通信のこと。一般的にはブラウザからURLを指定して、webページを表示する際に使用される。
RESTAPIとは
REST API (RESTful API とも言う) は、REST アーキテクチャスタイルの制約に従い、RESTful Web サービスとの対話を可能にするアプリケーション・プログラミング・インタフェース (API または Web API) 。
課題をこなす上で苦労した点と苦労をどのように克服したか
- Reactを理解していなかった。
⇨ Reactを１から勉強した。 - 必要な機能とタスクの優先順位付けのイメージがわかなかった。
⇨ 課題その２のアプリを実装する前に、下記の参考サイトを見ながら実際にサンプルを何度も作成して、必要な機能及びタスクの優先順位のイメージと確認をした。
課題２：感想
作成にあたり自身の技術と理解不足で、想定以上の時間を要した。
最終的になんとか完成に漕ぎ着けたのでよかったと思う。
参考サイト
HTTP通信
【初心者向け】httpリクエスト・レスポンスについて分かりやすく解説
REST API
天気情報関連
openweathermap.org JSONで返される摂氏で温度を計算するにはどうすればよいですか？
【Rails/JS】無料API「OpenWeatherMap」で天気予報を表示する特定のタイムゾーンでUTC時間を変換しようとしています
GoogleMap関連
API キーなしでサイトに Google マップを表示（埋め込みコード）
React(Next.js) と Google Map の Tips
How to Integrate the Google Maps API into React Applications
Google Map React
位置情報関連
位置情報 API
位置情報をブラウザで取得するGeolocation APIを使って今いる住所を調べる
Geolocation to Promise wrap example
グラフ表示関連
API連携関連
Javascript配列
配列操作(追加, 削除, filter, map, reduceなど)
【JavaScript】オブジェクトが空かどうか判定する
Github issue
お天気アプリ
Reactチュートリアル—最初から天気アプリを作成する—パート1
Reactを使ったお天気アプリを作成してみた
Weather App using React, Redux and Typescript
Weather app in React, Redux, Typescript, and Tailwind
How to Build a Weather Application with React and React Hooks