【React】簡単な学習記録アプリを作成してみて感じたことを残す。

はじめに

Reactの基礎を学び直したので、アプトプットとして学習記録アプリを作りました。
デザインは全くできていないので優しく見てくれれば嬉しいです。笑

アプリ概要

学習内容と時間を記録して登録できます。

入力した内容はリアルタイムで下に表示しています。

実装手順

• まずはHTML構造を静的に実装する
• その後、静的に書いてあることを動的に動かせるようにしていく
• コンポーネント化する(リファクタ)

学んだこと

個人的には、手を動かすことで動画とかで学んだことが整理される感じもありました。

何かを受動的に学んだ後は主体的に何かしてみるということが大切だなと感じました。

難しいところ

今回はコンポーネント化の勉強も踏まえて以下のようにコンポーネント化しました。

import { useState } from "react";
import { InputOfStudyResultTitle } from "../components/input/inputOfStudyResultTitle";
import { InputOfStudyResultTime } from "../components/input/InputOfStudyResultTime";
import { DisplayInputStudyTitle } from "../components/display/DisplayInputStudyTitle";
import { DisplayInputStudyTime } from "../components/display/DisplayInputStudyTime";
import { StudyResultSubmitButton } from "../components/button/StudyResultSubmitButton";
import { DisplayTotalStudyTime } from "../components/display/DisplayTotalStudyTime";
import { ErrorMessage } from "../components/error/ErrorMessage";
import { DisplayStydyResultList } from "../components/display/DisplayStydyResultList";
export const Home = () => {
  const [inputStudyResultTitle, setInputStudyResultTitle] = useState("");
  const [inputStudyResultTime, setInputStudyResultTime] = useState(0);
  const [totalStudyTime, setTotalStudyTime] = useState(0);
  const [records, setRecords] = useState([]);
  const [error, setError] = useState("");

  console.log(inputStudyResultTime);
  console.log(typeof inputStudyResultTime);

  const onChaneInputText = (e) => setInputStudyResultTitle(e.target.value);
  const onChaneInputTime = (e) => setInputStudyResultTime(e.target.value);

  const submitStudyResult = () => {
    if (inputStudyResultTitle === "" || inputStudyResultTime === 0 || inputStudyResultTime === "") {
      setError(true);
      return;
    }
    setError(false);

    const newRecords = [...records, { title: inputStudyResultTitle, time: inputStudyResultTime }];
    setRecords(newRecords);
    setInputStudyResultTitle("");
    setInputStudyResultTime(0);
    setTotalStudyTime(newRecords.reduce((accumulator, record) => accumulator + parseInt(record.time), 0));
  };

  return (
    <>
      <div>
        <h1>学習記録一覧</h1>
        <InputOfStudyResultTitle inputStudyResultTitle={inputStudyResultTitle} onChaneInputText={onChaneInputText} />
        <InputOfStudyResultTime inputStudyResultTime={inputStudyResultTime} onChaneInputTime={onChaneInputTime} />
        <DisplayInputStudyTitle inputStudyResultTitle={inputStudyResultTitle} />
        <DisplayInputStudyTime inputStudyResultTime={inputStudyResultTime} />
        <DisplayStydyResultList records={records} />
        <ErrorMessage error={error} />
        <StudyResultSubmitButton submitStudyResult={submitStudyResult} />
        <DisplayTotalStudyTime totalStudyTime={totalStudyTime} />
      </div>
    </>
  );
};

実務ではこんな単純でもないし、意味のあるコンポーネントになっているかと言われるとそうでもないと思います。

しかし、コンポーネント化しながら

「実務ベースだったら、こういう作りだったらここはコンポーネント化できそうだな。」

みたいなことを考えながら実装することができました。

※恩恵として実務のReactのコーディングの頭の整理が少し早くなった(気がする)。

おわりに

学んだものはアウトプット。
とりあえず使ってみることであったり、意欲的になることが大切だと感じました。

JISOUのメンバー募集中！

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