はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
また、今回からはchatGPTにお題を作ってもらっています。
本家はこちら
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
12. Clock
問題
毎秒更新されるアナログ時計
目的
useStateとuseEffect、Dateオブジェクトを使用して針を設定します。
現時刻のわかるアナログ時計アプリを作成します。
達成条件
- 時針、分針、秒針が表示されている
- 針が現在の時刻にあっている
- 時間経過とともに針が動く
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
jotai(2.12.3)
Vercel
解答時間 2時間
特にライブラリ(react-clock等)を使わずに作成しました。
現在時間は取得できてるのに時針と分針の角度がなぜか合わず、少し苦戦しました。
リンク
おわりに
今回からChatGPTにお題を作ってもらっているのですが、あと80個もお題があるか今から不安です...。
今回からgithubのリポジトリも公開することにしました。
お粗末なコードで恐縮ですが、アドバイス等あればぜひよろしくお願いいたします。