UseStateによる状態管理

useState フックは、関数コンポーネントに状態を持たせるための基本的な React フック。コンポーネント内で状態変数を宣言および更新する方法を提供。

構文:

useState フックを使用するには、初期状態（initialState）を引数として渡して呼び出す。戻り値は 2 要素の配列で、1 つ目が現在の状態値（state）、2 つ目が状態を更新する関数（setState）。

const [state, setState] = useState(initialState);

• state 変数の名前は任意に設定可能。格納または更新する状態を正確に表す変数名（例：inputValue、page、number、name など）を使用することが推奨される。

• 同様に、setState 関数の名前も柔軟に設定できるが、特定のパターンに従うことが一般的な慣習：setState 関数名は "set" で始まり、対応する状態変数名を続ける。たとえば、state 変数が mail の場合、対応する setState 関数は通常 setMail となる。

例 1:

Counter コンポーネントの構築。自身の状態を保持。Increment ボタンがクリックされると、状態を更新し、コンポーネントの再レンダリングを実行。

import React, { useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

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

この例では、useState フックを使用して、初期値 count の状態変数 0 を宣言。setCount 関数は、ボタンがクリックされるたびに count 変数を更新。

行ごとの説明:

• 1行目: React ライブラリから useState フックをインポートし、その機能を利用;
• 3行目: 通常の関数構文で Counter コンポーネントを定義;
• 4行目: useState フックで状態を初期化;

1. count はカウンターの値を表す。初期値は useState(0) の括弧内で 0 を指定;
2. setCount は必要に応じて状態を更新する関数。

• 6〜8行目: この JavaScript アロー関数は状態更新のロジックを処理。"increment" ボタンがクリックされたときに実行。関数内で setCount を使い状態を更新;
• 10〜15行目: コンポーネントのマークアップをレンダリング。12行目で現在の状態値 (count) を表示。13行目のボタンは onClick 属性でクリック時に実行する関数を定義。ここでは increment 関数を渡す。

例 2:

独立した状態を持つ Form コンポーネントの構築。ユーザーに入力フィールドで名前の入力を促し、入力内容に応じて表示内容を変更。

import React, { useState } from "react";

const Form = () => {
  const [userName, setUserName] = useState("");

  const handleChange = (event) => {
    const inputValue = event.target.value;
    setUserName(inputValue);
  };

  return (
    <div>
      <input
        type="text"
        value={userName}
        onChange={handleChange}
        placeholder="Your name"
      />
      <p>Hello, {userName}!</p>
    </div>
  );
};

この例では、useState フックを使用して、初期値が空文字列の状態変数 userName を宣言。setUserName 関数は、必要に応じて userName 変数を更新。

行ごとの説明：

• 1行目：useStateフックをReactライブラリからインポートし、その機能を利用;
• 3行目：標準的な関数構文を用いてFormコンポーネントを定義;
• 4行目：useStateフックを使って初期状態を設定;

1. userNameは入力フィールドの値を表し、初期値は空文字列（""）で、useState("")の括弧内で指定;
2. setUserNameは必要に応じて状態を更新するための関数;

• 6〜9行目：このJavaScriptアロー関数は状態更新のロジックを処理。ユーザーがフィールドに入力した際にトリガーされる。関数内でevent.target.valueを使って入力値を取得し、setUserName関数でその値に状態を更新;
• 11〜21行目：コンポーネントのマークアップをレンダリング。

1. 15行目では、value属性を使ってuserNameを入力の初期値として設定;
2. 16行目では、onChange属性で入力値が変更された際に呼び出す関数を指定。