Reactで学習記録アプリを作った

はじめに

Reactを使って学習記録一覧アプリを作成しました。
完成したもの

主な機能

1. 学習内容と学習時間を入力して表示
2. 登録ボタンを押下後、一覧で表示する、バリデーションあり
3. 登録をしたらフォームが初期化される
4. 学習時間の累計をみることができる

作成した際につまったこと

フォームに値を入力した後に、画面表示ってどうやる？

フォームに入力してもフォームに値がでてこない！
⇒useStateの理解不足、React入門動画のUseStateを2,3回見直して解決した

一覧に表示するときは配列をmapで回して表示させればいいと思うんだけど…

配列のコピーでスプレッド構文使うまでは考えられた
⇒スプレッド構文でのオブジェクトの代入がわかっていなかった

学習時間の累計時間ってどうやって計算しよう…

配列の要素ひとつずつとって足せばいいんだろうけど…
⇒reduceを理解する

NaNってNaNだろう

最後に

• ガイドにそってアプリ作成を進めていく上で、自分がわかっていない箇所が浮き彫りになりました。
  動画の見直し、検索⇒試行錯誤を行うことで理解度が段違いで向上したことを実感しました。（今まではただUdemy動画をみてわかった気になっていた）
• エラーに出会ったら、小出しにQiita記事を出すことも教えてもらいました（継続して出すことが大事）
• 試行錯誤をしてなんとかできたけど、もう少し早く解決したいです
• 早く解決するために質問したいけど、質問の内容を考えるのに時間がかかってしまいます
  （どうしたら聞き手が答えやすいように質問できるかなど考えてしまう）
  ⇒質問テンプレート記事を見返す

• コンポーネント化に挑戦してみたけど、どの部分を分割すればいいかわからずうまくいかなかったです。今後プログラムを通して身に着けていきたいです。

参考

React入門動画

GIF画像にして成果物をアピールしたいと思ったときに

JISOUのメンバー募集中！

プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼