Apps

014-React Hooks｜Step1-1_useStateの使い方：カウントアップダウンアプリ

はじめに

React で状態管理を行う際に最も基本的なフックが useState です。

本記事では、useState の基本的な使い方を学びながら、カウントを増減できるシンプルなアプリを実装します。

このアプリを作成することで、useState を使った状態管理の基礎を理解し、動的な UI の作成方法を学ぶことができます。

useStateとは？

useState は React のフックの一つで、コンポーネント内で状態（state）を管理するために使用します。

const [state, setState] = useState(初期値);
  • state：現在の状態（値）を格納する変数
  • setState：状態を更新する関数
  • useState(初期値)：初期値を指定して state を定義

これにより、コンポーネントの状態を動的に変更し、UI を更新できます。

概要

今回のアプリでは、ボタンをクリックすると数値が増減するカウンターを作成します。
具体的な機能は以下のとおりです。

  • 「+1」ボタンをクリックするとカウントアップ
  • 「-1」ボタンをクリックするとカウントダウン
  • useState を使用してカウントの値を管理

実装準備：ページ作成

まず、React のコンポーネントを作成し、状態を管理するために useState をインポートします。

"use client";
import * as React from "react";
import Typography from "@mui/material/Typography";
import { Button } from "@mui/material";
import { useState } from "react";

export default function CounterApp() {
  return (
    <div>
      <Typography variant="h4">カウントアップダウンアプリ</Typography>
    </div>
  );
}

実装：手順とコードの解説

このセクションでは、useState を使用してカウントの増減を実装する手順を詳しく解説します。

1. useState を使って状態（count）を管理する

まず、useState を使ってカウントを管理するための状態変数を作成します。

const [count, setCount] = useState<number>(0);
  • count：現在のカウント値を管理する変数
  • setCount：カウントの値を更新する関数
  • useState<number>(0)：number 型の初期値 0 を設定

これで、count の値が変更されると、自動的にコンポーネントが再レンダリングされて最新の値が表示されるようになります。

2. ボタンを作成し、クリック時にカウントを更新する

次に、ボタンを作成し、クリック時にカウントを変更する関数を定義します。

カウントアップ関数 handleClickplus

const handleClickplus = () => {
  setCount((prevCount) => prevCount + 1);
  setCount((prevCount) => prevCount + 1);
  setCount((prevCount) => prevCount + 1);
};
  • setCount((prevCount) => prevCount + 1); を3回実行すると、1回のクリックで count の値が 3 ずつ増加します。
  • prevCount を使用することで、最新の count の値を確実に取得し、加算できます。

カウントダウン関数 handleClickminus

const handleClickminus = () => {
  setCount(count - 1);
};
  • クリック時に count を -1 するシンプルな処理です。
  • count - 1 のように現在の count を直接参照しています。

3. UI にボタンとカウントを表示する

カウントの値とボタンを UI に表示します。

<Typography>useStateの使い方をマスターする</Typography><br/>
<div>
  <h2>Count UP & DOWN</h2>
  <Button variant="outlined" onClick={handleClickplus}>UP</Button>
  <Button variant="outlined" onClick={handleClickminus}>DOWN</Button>
  <h3>Count : {count}</h3>
</div>
  • Typography でタイトルを表示
  • Button を2つ作成し、それぞれ handleClickplus（UP）と handleClickminus（DOWN）を実行
  • h3 で現在の count の値を表示

4. 完成したコード

"use client";
import * as React from "react";
import Typography from "@mui/material/Typography";
import { Button } from "@mui/material";
import { useState } from "react";

export default function Page1_1() {
  // stateをuseStateで管理：セット関数を定義
  const [count, setCount] = useState<number>(0);

  const handleClickplus = () => {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  };

  const handleClickminus = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <Typography>useStateの使い方をマスターする</Typography><br/>
      <div>
        <h2>Count UP & DOWN</h2>
        <Button variant="outlined" onClick={handleClickplus}>UP</Button>
        <Button variant="outlined" onClick={handleClickminus}>DOWN</Button>
        <h3>Count : {count}</h3>
      </div><br/><br/>
    </div>
  );
}

実装手順まとめ

本記事では、useState を使用して カウントの増減アプリ を実装しました。

✅ useState を使って状態を管理する方法を学んだ
✅ setCount を使ってカウントの値を変更する方法を理解した
✅ prevCount を使うことで、連続した状態更新が可能になることを確認した

useState は React の基本的なフックの一つです。シンプルなアプリから始めて、より複雑な状態管理に応用していきましょう！

最終コード

すべての要素を組み合わせた最終的なコードは以下のとおりです。

"use client";
import * as React from 'react';
import Typography from '@mui/material/Typography';
import { Button, TextField } from '@mui/material';
import { useState } from 'react';


export default function Page1_1() {
  // stateをuseStateで管理：セット関数を定義
  const [count, setCount] = useState<number>(0);

  const handleClickplus = () => {
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
    setCount((prevCount) => prevCount + 1);
  };

  const handleClickminus = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <Typography>useStateの使い方をマスターする</Typography><br/>
      <div >
        <h2>Count UP & DOWN</h2>
        <Button variant="outlined" onClick={handleClickplus}>UP</Button>
        <Button variant="outlined" onClick={handleClickminus}>DOWN</Button>
        <h3>Count : {count}</h3>
      </div><br/><br/>
    </div>
  );
}

ディスパッチ関数とは

React では、useState を使って状態を管理できますが、状態を更新するためには ディスパッチ関数（dispatch function） を使用します。

ディスパッチ関数の役割

ディスパッチ関数とは、状態を変更するために useState の セッター関数（set関数） や useReducer の dispatch関数 を呼び出す関数のことを指します。

例えば、useState を使ってカウントの状態を管理する場合、以下のように setCount を使って状態を更新します。

const [count, setCount] = useState(0);

const increment = () => {
  setCount(count + 1); // これがディスパッチ関数
};

この increment 関数が ディスパッチ関数 です。setCount を呼び出し、状態 count の値を更新しています。

ディスパッチ関数のポイント

  1. setState の呼び出しがディスパッチ
    useState の set関数 を呼び出すことで、状態を変更できます。 const [name, setName] = useState("React"); const changeName = () => setName("Next.js");
    • changeName は setName を呼び出しているので、ディスパッチ関数となる。
  2. 前の状態を参照して更新する場合 prevState を使うconst [count, setCount] = useState(0); const increment = () => { setCount(prevCount => prevCount + 1); };
    • setCount(prevCount => prevCount + 1) にすることで、最新の count を参照しながら確実に更新できる。
  3. 複数回のディスパッチでも prevState を使えば意図した動作になるconst handleClick = () => { setCount(prevCount => prevCount + 1); setCount(prevCount => prevCount + 1); setCount(prevCount => prevCount + 1); };
    • prevCount を使うことで、1回のクリックで +3 できる。
  4. useReducer でもディスパッチ関数を使う
    useReducer を使う場合、dispatch 関数を使って状態を変更する。 const [state, dispatch] = useReducer(reducer, initialState); const handleClick = () => { dispatch({ type: "INCREMENT" }); };
    • dispatch({ type: "INCREMENT" }) がディスパッチ関数の役割を担う。

ディスパッチ関数のまとめ

  • useState の set関数 や useReducer の dispatch関数 を呼び出す関数を ディスパッチ関数 と呼ぶ
  • 状態を変更する際には、適切な ディスパッチ関数 を定義し、それをボタンの onClick などのイベントで呼び出す
  • prevState を使うことで、状態が適切に更新される

ディスパッチ関数を理解すると、useState や useReducer をより効率的に使えるようになります！

まとめ

useState を使用すると、Reactコンポーネント内で状態を管理し、ユーザーの操作に応じて動的に更新できます。本記事では、カウントアップ・ダウン機能を実装しながら、以下のポイントを学びました。

  • useState を使って状態を定義する方法
  • セット関数 (setState) を利用して状態を変更する方法
  • prevState を活用して、確実に状態を更新する方法

React では、useState を適切に活用することで、シンプルで直感的な状態管理が可能になります。基本をしっかり理解して、より複雑なアプリケーションの開発に活かしていきましょう！

-Apps