JISOU 課題1「学習記録アプリ」振り返り

Last updated at 2024-10-28Posted at 2024-10-28

はじめに

お疲れ様です、りつです。

参加させていただいているプログラミングスクール「JISOU」の課題1が完了しました。
今回は、その振り返りも兼ねて記事を書きました。

課題1の詳細な内容については @Sicut_study さんの記事で紹介されていますので、ご興味ある方はご覧になってみてください！

React + JavaScriptで学習記録アプリを作成しました。

完成形は以下のgifの通りです。
（今回の実装ではCSSなどのスタイリングはほとんど行っておりません）

学習内容と学習時間の登録ができる
入力欄に入力した値は、リアルタイムで「入力されている学習内容」「入力されている時間」に反映される
登録ボタン押下で、入力した学習内容と学習時間が一覧に追加される
登録した学習時間の累計が表示される
入力欄に未入力の項目がある、または入力欄が初期値のままの場合、登録ボタン押下でエラーメッセージが表示される
- 正しく入力されている場合は登録ボタンを押すとエラーが消える

stateの挙動（値が変わったらすぐレンダリング）が最初とっつきにくく感じた
JavaScript特有の省略記法に慣れること
入力された値をstateを使ってオブジェクトを配列に追加する処理の実装中、うまく渡せずundefinedで渡ってしまったこと
- 値の渡し方が悪かったため、想定した配列構造になっていなかった
あるメソッド内で、setStateの更新直後にstateの値を取得しようとしたところ、更新前の値が取得されてしまい意図しない挙動になってしまった
- stateのこちらの挙動について、実は課題着手前に視聴したUdemy動画内でもちらっと触れられていたのですが、失念していました
学習時間の合計値を算出するためにreduceメソッドを使用したが、初期値を指定しない場合の挙動に惑わされた

JavaScriptの省略記法などについて別途記事にまとめていますので、よければご覧ください！

オブジェクトの省略機能を使うために、変数名に気を付けた方がよい
- 登録処理実装時に、うっかりモック用データで用意した変数と別の変数を定義してしまったためにオブジェクトの省略記法が使えず、変数名の修正が必要になってしまいました
意図しない挙動になった場合はとにかくconsoleを確認
- 変数やstateの値が意図するものと異なるのであれば、consoleでまずは値を確認
  - なぜその値になったか仮説を立てて、怪しい部分をconsoleに出力して確認
- もちろん、エラー内容もしっかり確認する
実装する前に、実装する処理（例えば、このボタンを押下したらstateの値はどうなっているべきか）などをイメージしてから実装すると進めやすく感じた

環境構築も含めると6時間程かかりました（実装だけであればおそらく4時間くらい？）

エラーになってしまったり、やや詰まってしまった部分はあったものの、やはり実際に動くものを自分の手で作れることは嬉しいものですね！

useStateの非同期の件など、「そんな挙動になるんか！？」という驚きもありつつ、楽しく実装できました。

引き続きReactの学習を進めていきたいと思います！

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