Reactコンポーネントの基本と状態管理（useState, useEffect）の入門

Reactコンポーネントとは？基本の構文と仕組み

ReactではUIの部品を「コンポーネント」として定義します。関数ベースで書く「関数コンポーネント」が主流です。

関数コンポーネントの例

import React from 'react';

function HelloWorld() {
  return <h1>Hello, World!</h1>;
}

export default HelloWorld;

このように、JSX（JavaScript XML）という構文でHTMLのように記述し、再利用可能な部品を作ります。

useStateで状態を管理する

Reactでは、ユーザーの操作や非同期処理の結果によってUIを変化させる必要があります。これを実現するのが useState フックです。

カウントを増やすサンプル

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初期値0で状態を定義

  const handleClick = () => {
    setCount(count + 1); // 状態を更新
  };

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={handleClick}>+1</button>
    </div>
  );
}

export default Counter;

• useState(0) で状態変数 count を0で初期化
• setCount で状態を更新
• 状態が変わるとコンポーネントが再描画されます

useEffectで副作用を管理する

useEffect は、データの取得やDOMの直接操作など、副作用（side effect） を扱うためのフックです。

ページ読み込み時に一度だけ実行

import React, { useEffect } from 'react';

function Page() {
  useEffect(() => {
    console.log('ページがマウントされました');
  }, []); // 空の配列で1回だけ実行

  return <p>useEffectの基本例</p>;
}

状態の変化を監視する

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`カウントが変化しました: ${count}`);
  }, [count]); // countが変化するたびに実行

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>増やす</button>
    </div>
  );
}

• 第2引数の配列に指定した変数が変化したときのみ実行されます
• APIの呼び出し、イベントリスナー登録などにもよく使われます

よくあるミスと注意点

• useState や useEffect は関数コンポーネントのトップレベルでしか使えません
• useEffect 内で非同期関数を使うときは注意が必要です（async を直接つけない）

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('/api/data');
    const result = await response.json();
    console.log(result);
  };

  fetchData(); // 関数の中で非同期処理を実行
}, []);

まとめ：Reactの基本と状態管理をマスターしよう

Reactコンポーネントは小さなUIの単位として再利用可能で、useState や useEffect を使うことで柔軟に状態や副作用を管理できます。今回紹介した内容をもとに、小さなアプリやUI部品を作ってみることで、Reactの理解を深める第一歩となるでしょう。