はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
07. Weather
問題
自分の住んでいる都道府県の天気予報を表示する
目的
外部APIからデータを取得して、アプリに統合する方法を学び、async/awaitを使用した非同期リクエストの処理を実践します
達成条件
- 指定された地域の天気予報を表示できる
- 天気の表示間隔は自由 (1日ごとや10分ごとなど)
- 最高気温/最低気温が表示されている
- イラストで天気がひと目でわかる (晴れなら晴れマークを表示)
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
jotai(2.12.3)
Vercel
天気予報 API（livedoor 天気互換）
解答時間:1時間半
APIの仕様が日本語で分かりやすく書いてあったのでとても読みやすかったです。
特にエラーも出ず、順調に進んだので前からやってみたかったスマホの画面をそのままパソコン画面でも反映させるデザインをやってみました。
このデザインに名前はあるのだろうか。。
デザイン参考例
https://www.suntory.co.jp/rtd/horoyoi/
スマホ使用が多そうなWEBアプリであればこういうのもいいかもしれませんね。
リンク