【デイトラ学習記録】DAY31 ステート管理（useState）

ステート管理とは？

Reactのフックの一つ
関数コンポーネントに状態(state)を持たせるために使用します。
コンポーネントの状態を監視し、状態が変更されたら再レンダリングされる

Reactのフックとは

Reactが用意している便利な関数のようねイメージ

useState
useEffect
などなど

useStateとは？

useState – React

The library for web and native user interfaces

useStateは、Reactのフックの一つで、コンポーネントの状態を管理するために使います。状態とは、コンポーネント内で変化するデータのことです。

コードの説明

TSX

const [nestTask, setNestTask] = useState<string>("掃除");

useState<string>("掃除"):
- useStateは、初期値として"掃除"という文字列を受け取ります。
- <string>は、この状態が文字列型であることを示しています。
const [nestTask, setNestTask]:
- useStateは、現在の状態とその状態を更新するための関数を返します。
- nestTaskは現在の状態の値（初期値は"掃除"）です。
- setNestTaskは、nestTaskの値を更新するための関数です。

useStateを使った簡単な例

ボタンをクリックしたらタスクが変わる

TSX

import React, { useState } from "react";

const App: React.FC = () => {
  const [nestTask, setNestTask] = useState<string>("掃除");

  const handleChangeTask = () => {
    setNestTask("洗濯");
  };

  return (
    <div>
      <p>現在のタスク: {nestTask}</p>
      <button onClick={handleChangeTask}>タスクを変更</button>
    </div>
  );
};

export default App;

インプット欄に入力したら、pタグのテキストが変わる

TSX

export const App = () => {
  const [newTask, setNewTask] = useState<string>("掃除");

  return (
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
      />
      <p>{newTask}</p>
  );
};

開発環境

React Developer Tools を導入すると開発しやすい

React Developer Tools – Chrome ウェブストア

Adds React debugging tools to the Chrome Developer Tools. Created from revision c7c68ef842 on 10/15/2024.

React Developer Tools – React

The library for web and native user interfaces

TODOアプリをReactのuseStateを使って書き換える

input欄をコンポーネント化する

TextField.tsx

import * as React from "react";

type Props = {
  label: string;
  value: string;
  onChange: (value: string) => void;
  type: "text" | "date";
};

export const TextField = ({ label, value, onChange, type }: Props) => {
  return (
    <label>
      {label}
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} />
    </label>
  );
};

App.tsx

export const App = () => {
  const [newTask, setNewTask] = useState<string>("");
  const [newPerson, setNewPerson] = useState<string>("");
  const [newDeadline, setNewDeadline] = useState<string>("");

  return (
    <>
      <TextField label="TODO" type="text" value={newTask} onChange={setNewTask}></TextField>
      <TextField label="担当者" type="text" value={newPerson} onChange={setNewPerson}></TextField>
      <TextField
        label="閉め切り"
        type="date"
        value={newDeadline}
        onChange={setNewDeadline}
      ></TextField>

      <p>{newTask}</p>
      <p>{newPerson}</p>
      <p>{newDeadline}</p>
    </>
  );
};

setNewTaskは、ReactのuseStateフックによって生成される状態更新関数

登録ボタンをクリックしたら、配列にTODOリストを保存する

TSX

はいtype Todo = {
  task: string;
  person: string;
  deadline: string;
};

export const App = () => {
  const [todoList, setTodoList] = useState<Todo[]>([]);
  const [newTask, setNewTask] = useState<string>("");
  const [newPerson, setNewPerson] = useState<string>("");
  const [newDeadline, setNewDeadline] = useState<string>("");

  const addNewTodo = (): void => {
    setTodoList((prev) => [
      ...prev,
      {
        task: newTask,
        person: newPerson,
        deadline: newDeadline,
      },
    ]);
  };

  return (
    <>
      <TextField label="TODO" type="text" value={newTask} onChange={setNewTask}></TextField>
      <TextField label="担当者" type="text" value={newPerson} onChange={setNewPerson}></TextField>
      <TextField
        label="閉め切り"
        type="date"
        value={newDeadline}
        onChange={setNewDeadline}
      ></TextField>

      <button onClick={addNewTodo}>登録</button>

      <h2>TODOリスト</h2>
      <ul>
        {todoList.map((todo, index) => (
          <li key={index}>
            <p>タスク:{todo.task}</p>
            <p>担当者:{todo.person}</p>
            <p>締切:{todo.deadline}</p>
          </li>
        ))}
      </ul>
    </>
  );
};

ハイライト部分の処理の流れ

※登録ボタンが押された時に実行する関数 ( addNewTodo )

setTodoList関数が呼び出されます。
setTodoListは、useStateフックによって生成される状態更新関数です。この関数には、新しい状態を直接渡すこともできますし、現在の状態を引数として受け取り、新しい状態を返す関数を渡すこともできます。
引数に無名関数を渡します。
現在のtodoListの状態（prev）がアロー関数の引数として渡されます。
アロー関数は、新しい配列を返します。この配列は、現在のtodoListの項目（...prev）と新しいタスクオブジェクトを含みます。
setTodoList関数は、この新しい配列をtodoListの新しい状態として設定します。

※スプレッド構文とアロー関数の組み合わせが使用されている。
▼スプレッド構文の復習

JavaScript

const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

console.log(array2); // [1, 2, 3, 4, 5, 6]

コンポーネントを分割してリファクタリング

GitHub – yuta0824/dev-react-practice at add-useState-day31

デイトラWeb開発コースフロントエンド開発編 CSSでのスタイリングの練習課題です. Contribute to yuta0824/dev-react-practice development by creating an account on GitHub.

感想

useState を使ってTODOアプリを書き換えるところまで行いました。

JavaScriptの基礎の部分だったり、Propsの既存の部分をしっかり押さえながらコードを読まないと、なかなか理解が難しい印象でした。以下の基本的な部分を今一度しっかり復習しながら進めます。

▼基礎の復習が必要なワードメモ

アロー関数
無名関数
スプレッド構文
Reactのフック
useState
Props
- オブジェクト
- ジェネリック
useState の概念
- 状態更新関数