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行目: React ライブラリから useState フックをインポートし、その機能を利用;
• 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 属性で入力内容が変化した際に呼び出す関数を指定。

アプリ全体のコード：