【2026年版】React入門完全ガイド｜フック・状態管理・パフォーマンス最適化を実践的に学ぶ

Reactは2026年現在も最も人気のあるフロントエンドライブラリです。本記事では、React初心者から中級者に向けて、コンポーネントの基礎からHooksの活用、状態管理、パフォーマンス最適化まで体系的に解説します。

Reactとは：なぜ人気なのか

ReactはMeta（Facebook）が開発したUIを構築するためのJavaScriptライブラリです。仮想DOM（Virtual DOM）による効率的な描画、コンポーネントベースのアーキテクチャ、豊富なエコシステムが人気の理由です。

2026年時点でのReactの主なバージョンはReact 19系で、Server ComponentsやActionsが安定版として使えるようになっています。

Reactコンポーネントの基礎

// 関数コンポーネント（現代のReactの標準）
import React from 'react';

// propsを受け取るコンポーネント
function UserCard({ name, email, avatar, role }) {
  return (
    <div className="user-card">
      <img src={avatar} alt={name} className="avatar" />
      <div className="user-info">
        <h3>{name}</h3>
        <p className="email">{email}</p>
        <span className={`badge badge-${role.toLowerCase()}`}>
          {role}
        </span>
      </div>
    </div>
  );
}

// TypeScriptでの型定義
interface UserCardProps {
  name: string;
  email: string;
  avatar: string;
  role: 'admin' | 'editor' | 'viewer';
}

const UserCard: React.FC<UserCardProps> = ({ name, email, avatar, role }) => {
  // ...
};

Hooksを使いこなす

HooksはReact 16.8で導入され、関数コンポーネントでも状態管理やライフサイクルが扱えるようになりました。

useState：状態管理の基本

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const [user, setUser] = useState({ name: '', email: '' });

  const increment = () => setCount(prev => prev + 1);
  const updateName = (name) => setUser(prev => ({ ...prev, name }));

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>+1</button>
      <input
        value={user.name}
        onChange={(e) => updateName(e.target.value)}
        placeholder="名前を入力"
      />
    </div>
  );
}

useEffect：副作用の処理

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false; // クリーンアップのフラグ

    async function fetchUser() {
      setLoading(true);
      try {
        const res = await fetch(`/api/users/${userId}`);
        const data = await res.json();
        if (!cancelled) { // アンマウント後に状態更新しない
          setUser(data);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    fetchUser();

    // クリーンアップ関数
    return () => { cancelled = true; };
  }, [userId]); // userIdが変わるたびに再実行

  if (loading) return <div>読み込み中...</div>;
  if (!user) return <div>ユーザーが見つかりません</div>;
  
  return <div>{user.name}</div>;
}

useCallback・useMemo：パフォーマンス最適化

import { useState, useCallback, useMemo } from 'react';

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [filter, setFilter] = useState('all');

  // useCallback：関数のメモ化（依存関係が変わらなければ再生成しない）
  const addTodo = useCallback((text) => {
    setTodos(prev => [...prev, { id: Date.now(), text, done: false }]);
  }, []);

  const toggleTodo = useCallback((id) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  }, []);

  // useMemo：計算結果のメモ化
  const filteredTodos = useMemo(() => {
    switch (filter) {
      case 'active': return todos.filter(t => !t.done);
      case 'completed': return todos.filter(t => t.done);
      default: return todos;
    }
  }, [todos, filter]);

  const stats = useMemo(() => ({
    total: todos.length,
    completed: todos.filter(t => t.done).length,
    active: todos.filter(t => !t.done).length,
  }), [todos]);

  return (
    <div>
      <p>全体: {stats.total} | 完了: {stats.completed} | 未完了: {stats.active}</p>
      {/* フィルターボタン */}
      {/* Todoリスト */}
    </div>
  );
}

カスタムHooksで処理を再利用する

カスタムHooksを作成することで、コンポーネント間でロジックを共有できます。

// カスタムHook：APIデータ取得の汎用Hook
function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    if (!url) return;
    
    let cancelled = false;
    
    async function fetchData() {
      setLoading(true);
      setError(null);
      try {
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        const json = await res.json();
        if (!cancelled) setData(json);
      } catch (err) {
        if (!cancelled) setError(err.message);
      } finally {
        if (!cancelled) setLoading(false);
      }
    }
    
    fetchData();
    return () => { cancelled = true; };
  }, [url]);

  return { data, loading, error };
}

// 使用例
function UserList() {
  const { data: users, loading, error } = useFetch('/api/users');
  
  if (loading) return <Spinner />;
  if (error) return <ErrorMessage message={error} />;
  
  return (
    <ul>
      {users?.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

まとめ：Reactを使いこなすためのロードマップ

• JSX・コンポーネント・propsの基礎を学ぶ
• useState・useEffectをマスターする
• useCallback・useMemoでパフォーマンス最適化を学ぶ
• カスタムHooksでロジックを再利用する
• React QueryやZustandで状態管理を効率化する
• Next.jsでSSR・SSG・App Routerを使いこなす

Reactは学習曲線が最初は急ですが、Hooksを理解すれば一気に生産性が上がります。実際にプロジェクトを作りながら学ぶのが最も効果的です。