はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
10. Navigation
問題
早押しクイズアプリ
目的
早押しクイズなので時間制限が必要になります。
カウンターで行ったカウントダウンを応用して実用的なアプリをつくります
達成条件
- クイズ問題が表示されている
- 10秒のカウントダウンがある
- 解答フォームがある
- 解答ボタンがある
- 解答ボタンを押したら答えが正解か不正解かを表示
- 解答ボタンを押したら解答時間と答えを表示
- 解答の表記ゆれ(例えばAが答えなら「えー」「a」も正解とする)
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
jotai(2.12.3)
framer-motion(12.10.4)
Vercel
解答時間 1時間半
プログレスバーのところはreaxt-motionを使いました。
便利～～～
リンク
おわりに
次回からのお題が提供されていないので、Chat GPTにお題を作ってもらおうと思います。