はじめに
こんにちは！！@Sicut_studyです！
こちらの記事が嬉しいことに多くの方に見ていただきました。
そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。
私の記事では何度も言っている通り
というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。
今回はさらに状態管理を応用的に利用して、効果音を流すライブラリも使用してみます
前回のお題
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
04. Timer
問題
タイマーアプリを作成します
目的
タイマーアプリでは、Reactの根幹をなす状態管理、ライフサイクルメソッド、そしてイベント処理の実践を通じて、Reactの基礎を固めます
またsetTimeoutなど指定した時間に何かを実行するという関数を学んでいきます
達成条件
- ユーザーは分と秒を入力してタイマーを設定できる。
- スタートボタンを押すとカウントダウンが開始される。
- 時間が0になったら、ユーザーに通知される (効果音が鳴る)
- 一時停止ボタンを押すとカウントダウンが停止し、再開ボタンでカウントダウンが再開される。
- リセットボタンでタイマーが設定時間に戻る。
- 無効な時間（例：負の時間、非数値、60分以上の値）が入力された場合、エラーメッセージが表示される。
実際に解いてみた
利用技術
- React
- TypeScript
- Vite
- Emotion
- use-sound
解答時間 : 1.5時間
円形のプログレスバーを実装してみたのでけっこう大変でした。
またuse-soundを利用して0秒になったら効果音がなるようにしてみました
タイマーを使う人にとっては大事な機能になります
次回
おわりに
React100本ノックの記事を地道に上げていこうと思いますので、一緒に挑戦したい方は @Sicut_study をフォローいただけるととてもうれしく思います。
ここまで読んでいただけた方はぜひいいねとストックよろしくお願いします。
少し宣伝します🔥🔥🔥🔥🔥
これからエンジニアになろうとしている人を本気でコーチングして3か月の期間で立派なエンジニアにするようなチャレンジをしてみたいなと考えております。
もし、本気でエンジニアを目指してコーチングを受けてみたいという方がいれば、Twitterに「プログラミング教えてほしいです」みたいなリプライ送っていただけたらなと思います！！
以上です。
今週もプログラミング頑張りましょう！
参考