はじめに
いったん自分のエンジニア力を測るために腕試しということで、Reactでかんたんな学習記録アプリを作ってみました。
（本当はJISOUプログラムの最初の課題です。）
↑CSSフルシカトした学習記録アプリ。
↑学習内容か学習時間が入力されていないとバリデーションエラー（適当）を表示もする
開発環境は楽したかったのでstackblitzで実装しました。
僕みたいにReactに自信ない方も、AI使用せずにこういうめちゃくちゃにシンプルなアプリを自走して作ってみるのも良い経験になると思ったのでおすすめです。
意外に大変だった
合計時間を出すのに苦労しました。
合計時間の箇所もuseState()を使って動的に値を変えるんだなっていうのは分かったんですが、意外に学習時間（配列）の合計ってどうやって出すんだ？と結構苦戦しました。
まず、入力する学習タイトル、学習時間、各学習記録のレコードは、useState()で持っています。
const [records, setRecords] = useState([]);
const [title, setTitle] = useState('');
const [studyTime, setStudyTime] = useState(0);
で、「登録」ボタンクリック時にtitleとstudyTimeのオブジェクトを配列に突っ込みます。
// 「登録」ボタンクリック
const onClickAdd = () => {
// ※細かい処理は省略
const newRecords = [...records, { title: title, time: studyTime }];
setRecords(newRecords);
ここで、どう学習時間だけ取り出して、どう合計値を出そうか、結構時間を使いました。
const [totalStudyTime, setTotalStudyTime] = useState(0);
const onClickAdd = () => {
// ※もろもろ省略
const newTotalTimes = [...newRecords.map((r) => parseInt(r.time))];
const newTotalTime = newTotalTimes.reduce((pre, cur) => pre + cur, 0);
setTotalStudyTime(newTotalTime);
};
上記の通り、newRecordsのtimeから新しく学習時間だけの配列を作ります。
ここでparseIntを使って数値にパースしてあげないと学習時間を”文字列”として扱われてしまうので、うまく合計値を出してくれませんでした。
※1 + 1 = 11 みたいになってしまう
あと意外に知らなかったのが、配列内の合計値を出すためのreduce処理。
第一引数にpre, curを受けます。
preには初期値、または配列処理で繰り返された前の値が入っています。
curには現在の値が入っています。
これを関数処理ないで足し合わせてあげるだけでよかったのでした。
第二引数の0は計算の初期値です。
AIに脳がやられてる自分には、こういうの調べるのも結構大変でしたね。。
おわりに
ちょっと調べないとわからないところはあったものの、作り終えたら少なからず自信はつきました。
「案外やればできるじゃん」みたいな。
こういう積み重ねがエンジニアとしての自信を作っていくし、AIに振り回されない自力が身につくんだろうなと感じました。
まだまだこれから。
ぽんこつは、這い上がる。