【React】useStateフックを詳しく解説：カウントアップアプリを作ろう

・はじめに
・useStateとは？
・useStateの使い方
・実際の例
・CodeSandboxの設定
・まとめ

・はじめに

Reactはモダンなフロントエンド開発において非常に人気のあるライブラリです。Reactの主要な特徴の一つが、コンポーネントベースの開発と状態管理です。その中でフックと呼ばれる機能があり、これにより関数コンポーネントでも状態管理や副作用の処理が可能となりました。この記事では、特にuseStateフックに焦点を当て、その使い方と実際の例を詳しく見ていきます。

・`useState`とは？

useStateは、その名の通り状態を管理するReactのフックの一つで、関数コンポーネント内で状態管理を行うために使用されます。これまではクラスコンポーネントでのみ状態管理が可能でしたが、useStateにより関数コンポーネントでも同様の機能が実現できます。

例としては、カウントアップするために数値を保存しておけたり、文字列を保存して置いて、値が変更されたときに更新できたりします。下記にその例をコードとともにお伝えします！

＜準備＞
Codesandbox起動させて、srcのApp.tsxに下記コードをコピペしてみてください。

＜基本的な使い方＞
useStateはReactからインポートして使用します。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

この例では、countという状態変数と、setCountというその変数を更新するための関数をuseStateを使って定義しています。ボタンを押下することで数字がカウントアップする処理です。

・`useState`の使い方

次にどのようにuseStateを使っていくのか詳しく説明していきます。

＜初期状態の設定＞
useStateは初期状態を引数として受け取ります。この初期状態は数値、文字列、配列、オブジェクトなど、任意のデータ型で指定できます。

const [name, setName] = useState('John Doe');

＜状態の更新＞
状態を更新する際は、setState関数を呼び出します。この関数は新しい状態を引数として受け取ります。

setName('Jane Doe');

＜状態の配列・オブジェクトの管理＞
配列やオブジェクトの状態を管理する場合もuseStateを使います。ただし、状態を更新する際はスプレッド構文を使って新しい状態を作成するのが一般的です。

const [user, setUser] = useState({ name: 'John', age: 26 });

setUser(prevUser => ({
  ...prevUser,
  age: 26
}));

・実際の例

＜簡単なカウンターアプリ＞
以下はカウンターアプリの例です。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Counter;

初期値が0になっており、”Increment”ボタンを押下すると、setCountでカウントアップするプログラムとなっています。

＜フォーム入力の管理＞
次に、フォーム入力を管理する例です。

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  return (
    <form>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
      </label>
      <p>Entered name: {name}</p>
    </form>
  );
}

export default NameForm;

onChangeは、フォーム内のinputの値がユーザによって変更されたときに発動するイベントで、ここでは、初期値が‘ ‘で、文字が入力されたときにsetNameでnameの値を更新しています。