はじめに
ゆかっしゅです。
2021年に事務職からデザイナー/コーダーにジョブチェンジをし、現在はフロントエンドエンジニアにスキルアップするべく、モダンフロントエンドを学習しています。
ReactやTypeScriptの基礎学習は終了したのに、なかなか0から自分だけでアプリを作れないので手を動かすべく「Reactアプリ100本ノック」 に挑戦してみようと思います。
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- なるべくChatGPTなどのAIツールに頼らない（自分独自ルール）
03. TODO
問題
TODOリストアプリを作成する
目的
TODOリストは複数のタスクを管理する必要があるため、状態管理の初歩を学ぶのに適しています。Reactを使用する場合、useStateやuseReducerなどのHooksを使って状態管理の方法を学ぶことができます。
達成条件
1.入力フィールド: ユーザーがタスクを入力するためのテキストフィールドが存在する。タスク名が1文字以上でない場合はバリデーションする
2.追加ボタン: 入力されたタスクをTODOリストに追加するためのボタン。
3.タスクリスト表示: 追加されたタスクがリストとして表示される。
4.削除ボタン: 各タスクの隣には削除ボタンがあり、それをクリックすることで該当のタスクをリストから削除する
実際に解いてみた
利用技術
React(19.0.0)
TypeScript(5.0)
Next.js(15.3.1)
Tailwindcss(4.0)
Vercel
解答時間:1時間
見た目25分、タスク管理の部分35分という配分でした。
Todoアプリは以前にも数回作っていたので、余裕！かと思いきや結構忘れていました..
リンク
おわりに
次のアプリくらいから作ったことのないアプリなので苦戦しそうだと思いました。
あと、swich2の抽選外れました...。