[React.js] - パート10: React Hooks - useState Hook

Ace Lennox

2025年01月17日読了時間：3分

Reactは現代のウェブ開発における重要な存在であり、その中でも特に強力な機能の1つがuseStateフックです。このフックを使えば、関数コンポーネントで状態（state）を管理し、アプリケーションをより動的でインタラクティブにすることができます。このガイドでは、useStateの基本から複雑なシナリオの処理まで、必要なすべてを解説します。

`useState`とは？

Reactにおいて、**state（状態）**とは、コンポーネントが追跡し、動的に更新できるデータのことを指します。従来、状態管理はクラスコンポーネントに依存していましたが、フックの導入により、状態管理がよりシンプルになりました。その中核をなすのがuseStateで、関数コンポーネントに簡単に状態管理機能を追加することができます。

`useState`の使用方法

`useState`のインポート

useStateフックを使用するには、まずReactからインポートする必要があります。

import { useState } from "react";

状態の初期化

useStateを呼び出す際に初期値を指定します。この関数は配列を返し、次の2つの要素を含みます。

現在の状態（state）
状態を更新するための関数

例:

function FavoriteFood() {  
  const [food, setFood] = useState("ピザ");  
}

この例では、foodは現在の状態、setFoodは状態を更新する関数を表します。

状態の読み取り

状態をコンポーネント内でアクセスし、表示することができます。

<h1>私の好きな食べ物は{food}です！</h1>

Reactは状態が変更されるたびにコンポーネントを再レンダリングし、UIを最新の状態に保ちます。

状態の更新

状態を更新するには、useStateによって返される更新関数（例: setFood）を使用します。状態を直接変更すること（例: food = "寿司"）は避けるべきです。

例:

function FavoriteFood() {  
  const [food, setFood] = useState("ピザ");  

  return (  
    <>  
      <h1>私の好きな食べ物は{food}です！</h1>  
      <button onClick={() => setFood("寿司")}>寿司に変更</button>  
    </>  
  );  
}

ボタンをクリックするたびに状態が「寿司」に変わり、コンポーネントが更新されます。

複雑な状態の管理

useStateフックは、文字列や数値だけでなく、オブジェクトや配列などの複雑なデータ型も管理できます。以下は、複雑な状態構造を使用する方法の例です。

オブジェクトの使用

次の例では、車に関する状態を管理しています。

function Vehicle() {  
  const [car, setCar] = useState({  
    brand: "トヨタ",  
    model: "カローラ",  
    color: "白",  
    year: 2022  
  });  

  return (  
    <>  
      <h1>私の{car.brand}</h1>  
      <p>それは{car.year}年式の{car.color}の{car.model}です。</p>  
    </>  
  );  
}

オブジェクトプロパティの更新

オブジェクトの特定のプロパティを更新するには、JavaScriptのスプレッド演算子（...）を使用して他の値を保持します。

function Vehicle() {  
  const [car, setCar] = useState({  
    brand: "トヨタ",  
    model: "カローラ",  
    color: "白",  
    year: 2022  
  });  

  const updateColor = () => {  
    setCar((prevState) => ({  
      ...prevState,  
      color: "青"  
    }));  
  };  

  return (  
    <>  
      <h1>私の{car.brand}</h1>  
      <p>それは{car.year}年式の{car.color}の{car.model}です。</p>  
      <button onClick={updateColor}>色を変更</button>  
    </>  
  );  
}

なぜスプレッド演算子を使用するのか？

スプレッド演算子は、既存の状態のすべてのプロパティをコピーし、特定のプロパティ（この例ではcolor）のみを更新します。

ベストプラクティス

意味のある初期値を選ぶ: 状態のロジックに適した初期値を設定することで、コードの可読性が向上します。
直接的な状態変更を避ける: 状態の更新には常に更新関数を使用します。
関連データをグループ化する: 関連するデータは1つのオブジェクトにまとめて管理すると、コードが簡潔になります。

まとめ

useStateフックを習得することは、Reactを使いこなすための重要なステップです。このシンプルで強力なツールを使えば、関数コンポーネントで状態を効率的に管理できます。簡単な例から始めて、Reactコンポーネントをより動的で魅力的なものにしていきましょう！

ソースコード

このプロジェクトの完全なソースコードはGitHubで利用可能です。

← [React.js] - パート9: React Hooks - Hookとは何ですか？

[React.js] - パート11: React Hooks - useEffect Hook →

Latest Posts

View All