# 課題1 学習記録アプリ

エンジニアとしての学習時間は1000時間が必要と言われています
そこで日々の学習の内容と学習時間を記録するアプリを作ることにしました

以下の実装をすべて行ってください
ただしCSSなどのスタイリングは不要です
機能が使える状態であればサンプルと見た目が異なっても大丈夫です

# MVP1

ユーザーは学習記録を一覧でみることができる

## TODO
- [x] タイトル「学習記録一覧」を見ることができる(h1でタイトルをつけてください)

- [ ] テストデータを一覧で表示する

テストデータは以下を利用すること

const records = [
    { title: "勉強の記録1", time: 1},
    { title: "勉強の記録2", time: 3},
    { title: "勉強の記録3", time: 5}
]


表示には`map`関数を用いること

# MVP2

ユーザーは新しい記録を登録できる

## TODO

- [ ] 学習内容の入力フォームをみることができる
- [ ] 学習時間の入力フォームをみることができる
- [ ] 学習時間の入力フォームは数字を入力できる
- [ ] 現在のフォームに入力されている値を表示する(確認用)

- [ ] 登録ボタンをみることができる
- [ ] 登録ボタンをクリックするとrecordsに記録を追加できる
recordsはテストデータから以下に置き換えること

const [records, setRecords] = useState([]);

- [ ] 登録をしたらフォームが初期化される(学習内容は空で学習時間は0が入る)

※ 初期化はこの画像に含まれていません

- [ ] 全項目が入力されていないときにエラーが表示される(時間を空にしてもエラーがでるようにする)
- [ ] 正しく入力されている場合登録ボタンを押すとエラーが消える

以下を用いて実現せよ

  const [error, setError] = useState("");


# MVP3

ユーザーは勉強時間の累計をみることができる

## TODO
- [ ] 記録した勉強の時間を合計した値をみることができる

ヒント : 合計時間の計算はreduceを使うとよい
ヒント : timeをsetTimeするときにparseIntで数値として扱わないと合計のときに文字列の合計になるので注意(1+1=11ではなく1+1=2となるようにする)


- [ ] 個人開発記事を1本投稿する
アプリを初めて作ることを通して学んだことや、思ったことなどを記事にしてください。