はじめに
UdemyでReactの基礎を学び、そのアウトプットとして簡単な学習記録アプリを開発しました。本記事では、開発を通して学んだことや大変だった点、工夫したことをまとめました。
成果物
開発したのは学習記録アプリです。使ったReactの機能はStateだけです。
環境
- react@19.3.1
- typescript@5.8.3
機能
- 一覧表示
- 新規登録
- 学習時間の合算
リポジトリ
学んだこと
Udemyで学んだJSX記法やState、エントリーポイントとなるファイルの役割などの基本は、実際に手を動かして使うことで理解できました。
特にStateは気軽に使えます。ただ、変数のような感覚で無駄に使うと、2つの問題が起きかねません。不要なレンダリングが起きることと、意図しない値になってしまうことです。そのため、Stateは使う場面のルールを決めておいた方がよいと学びました。
大変だった点
オブジェクトの配列から学習時間だけを取り出すには、どのメソッドが適しているかを調べるのが地味に大変でした。
工夫したこと
調べた結果、合計時間は、登録した記録からmapで学習時間だけを取り出して配列にし、reduceで合算するようにしました。
さいごに
Reactとは直接関係ありませんが、今回はAIを使わずに開発しました。そのおかげで、学習したことを引き出して使う感覚をつかめ、手を動かして学ぶことの大切さに改めて気づきました。