【プログラミング初心者】0から始めるReact学習 #9 ~Web開発の基本編~

1-3. 課題1

9月11日

本日は学習記録アプリの機能を実装していきました。

inputタグの値の取り出し方はこちらの記事を参考に。
if文の書き方はこちらの記事を参考にしました。

どちらも講義の中で習ったことではありますが、すっかり抜け落ちていました。。（笑）
また、自分の思いつくままにコードを書いたのですが、正常に動作しません。

1時間ほど思い当たる点を修正していたのですが、
全く動かなかったため止む無くChatGPTに頼ることにしました。
すると、完璧なコードを出してくれました。

私があんなに悩んでいたコードをほんの数秒で。。。（笑）
少し情けない気持ちになりましたが、試行錯誤した成果か出てきたコードを読解することができました。

お手本を参考にして作ったコードが下記となります

import { useState } from 'react';

export const App = () => {
  const [title, setTitel] = useState('');
  const [time, setTime] = useState('');
  const [records, setRecords] = useState([
    { title: '勉強の記録1', time: 1 },
    { title: '勉強の記録2', time: 3 },
    { title: '勉強の記録3', time: 5 },
  ]);
  const [error, setError] = useState('');

  const onChangeTitle = (e) => setTitel(e.target.value);
  const onChangeTime = (e) => setTime(e.target.value);

  const onClickAdd = () => {
    if (title === '' || time === '') {
      setError('入力されていない項目があります');
      return;
    }

    setRecords([...records, { title, time: parseInt(time, 10) }]);

    setTitel('');
    setTime('');
    setError('');
  };
　//★reduceの使い方
  const totalTime = records.reduce((sum, record) => sum + record.time, 0);

  return (
    <>
      <div>
        学習記録
        <input value={title} onChange={onChangeTitle} />
      </div>
      <div>
        学習時間
        <input
          placeholder="0"
          type="number"
          value={time}
          onChange={onChangeTime}
        />
        時間
      </div>
      <div>入力されている学習内容：</div>
      <div>入力されている学習時間：</div>
      <button onClick={onClickAdd}>登録</button>
      <div>{error}</div>
      <div>合計時間：{totalTime}/1000(h)</div>
    </>
  );
};

まとめ

個人的にreduceの使い方（上記コードの中の『//★reduceの使い方』←この部分）に関する説明がされた記事が勉強になったので載せておきます。

正直、お世辞にも自分で書いたとは言えませんが、
とにかく進めることが大事だ！と言い聞かせて次の章に進むこととします。

明日は、ロードマップの「2.CI/CDの導入」をやっていきます。