【制作記録】学習記録アプリの制作

作ったもの

学習内容・時間を記録出来るものを作成しました。
Reactの習得も兼ねており、useStateを中心に理解を深められたと思います。

また、使いやすさを考え以下を工夫しました。

• 記録がない場合は記録がありませんと表示分け
• 初期値で学習時間に0と入れていましたが、0を削除し入力する手間が発生していたため空欄に変更しました。

今回の学び(詰まったところ)

• JSX特有の書き方
  • CSSの書き方
• 入力値の取得方法
• reduceの使い方

JSX特有の書き方

割り当てるCSSも多くない予定だったため、今回直接CSSを書くことにしました。

//正
<h3 style={{ "margin-top": "40px" }}>学習履歴</h3>

//誤
<h3 style={{ margin-top: 40px }}>学習履歴</h3>

CSSは「""」で囲む必要があります。marginの際は不要ですがmargin-topの場合は囲む必要があります。
今回はVSCodeの拡張機能にエラーを吐いてもらうことで即解決しましたが、後日忘れてまたやらかしそうなので備忘録としてここに残します。

入力値の取得方法

event.target.valueが咄嗟に出てこず、「どうやって取得するんだっけな」となっていました。

<input
  type="number"
  value={time}
  placeholder="学習時間を記入してください"
  onChange={(event) => setTime(event.target.value)}
/>

reduce

今回一番の学びで、一番詰まった所かもしれません。
reduceとは配列の値を順に「pre(前回の値) + current(今回の値)」と足していく処理ですが、初回はpreに初期値を設定する必要があります。
初期値を設定出来ることを理解しておらず、初回だけエラーを吐くので処理の条件分けを行おうとしてました。

setTotal(
 records.reduce((pre, current) => {
 return pre + current.time;
 }, parseInt(time)) // parseInt(time)が初期値
);

まとめ

コードの可読性を保つのは難しいなと痛感しました。
割り当てるCSSはちょっとだけと直接CSSを当てましたが、結局それなりに割り当てていて読みにくくなってしまったので。

JISOUのメンバー募集中！

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