はじめに
こんにちは！！@Sicut_studyです！
こちらの記事が嬉しいことに多くの方に見ていただきました。
そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。
私の記事では何度も言っている通り
というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。
今回は外部APIを叩いて簡単な天気予報アプリを作っていきます！
前回のお題
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
07. Weather
 |
問題
自分の住んでいる都道府県の天気予報を表示する
目的
外部APIからデータを取得して、アプリに統合する方法を学び、async/awaitを使用した非同期リクエストの処理を実践します
達成条件
- 指定された地域の天気予報を表示できる
- 天気の表示間隔は自由 (1日ごとや10分ごとなど)
- 最高気温/最低気温が表示されている
- イラストで天気がひと目でわかる (晴れなら晴れマークを表示)
実際に解いてみた
利用技術
- React
- TypeScript
- Vite
- Emotion
- 天気予報 API（livedoor 天気互換）
解答時間 : 1時間
はじめにYahooの天気APIを使っていたのですが、なぜかCORSエラーがでてしまい試行錯誤してもうまく情報取得ができなかったのでAPIを以下に変更しました
その試行錯誤で多くの時間を使いました。
実装自体は10分くらいでできました
 |
次のお題
おわりに
React100本ノックの記事を地道に上げていこうと思いますので、一緒に挑戦したい方は @Sicut_study をフォローいただけるととてもうれしく思います。
ここまで読んでいただけた方はぜひいいねとストックよろしくお願いします。
少し宣伝します🔥🔥🔥🔥🔥
これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。
もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、Twitterに「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います！！
以上です。
今週もプログラミング頑張りましょう！
参考