開発Tips（2025-11-20）

React

React Hooksを使用すると、クラスコンポーネントを使わずに、関数コンポーネント内で状態管理やライフサイクルイベントを扱うことができます。これにより、コードの再利用性が向上し、コンポーネントのロジックをより理解しやすく、テストしやすくなります。

useStateフックで状態管理をシンプルにする

useStateフックは、React関数コンポーネント内で状態（state）を宣言し、更新するための基本的なフックです。以前はクラスコンポーネントでしか扱えなかった状態を、関数コンポーネント内で簡単に扱えるようになります。

説明:

useStateフックは、現在の状態の値と、状態を更新するための関数をペアで返します。状態の初期値はuseStateに引数として渡します。状態を更新するには、返された更新関数を呼び出し、新しい状態の値を引数として渡します。

例:

import React, { useState } from 'react';

function Counter() {
  // countという状態変数を宣言し、初期値を0に設定
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

注意点:

• useStateは、関数コンポーネントのトップレベルでのみ呼び出すことができます。ループ、条件文、ネストされた関数の中では使用できません。
• 状態を更新する際は、常に新しい状態の値（または新しい状態を生成する関数）を渡す必要があります。オブジェクトや配列の状態を更新する場合は、スプレッド構文 (...) などを使って不変性を保つことが重要です。
• 複数stateを管理する場合は、useStateを複数回呼び出す必要があります。

おすすめポイント:

useStateを使うことで、複雑なクラスコンポーネントを作成する必要がなくなり、よりシンプルで読みやすいコードを書くことができます。特に、小さなUI要素やシンプルなロジックを持つコンポーネントに最適です。