Reactの基礎知識｜コンポーネント設計とHooksの使い方

Reactがフロントエンドのデファクトになったわけ

Reactは2013年にFacebook（現Meta）が公開して以来、コンポーネントベースのUI構築の標準となりました。宣言的UIと仮想DOMによる効率的な再レンダリングが特徴です。

コンポーネントの基本

// 関数コンポーネント（現在の主流）
interface ButtonProps {
  label: string;
  onClick: () => void;
  variant?: 'primary' | 'secondary';
}

const Button: React.FC<ButtonProps> = ({ label, onClick, variant = 'primary' }) => {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

主要Hooks

useState：状態管理

const [count, setCount] = useState(0);
const [user, setUser] = useState<User | null>(null);

// 状態更新は必ず関数を通す
setCount(prev => prev + 1);

useEffect：副作用処理

useEffect(() => {
  // データフェッチ
  fetch('/api/users')
    .then(res => res.json())
    .then(data => setUsers(data));

  // クリーンアップ関数
  return () => { /* アンマウント時の処理 */ };
}, [userId]); // 依存配列：userIdが変わるたびに実行

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

// 関数のメモ化
const handleClick = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

// 計算値のメモ化
const sortedList = useMemo(() => {
  return items.sort((a, b) => a.price - b.price);
}, [items]);

コンポーネント設計の原則

状態管理の選択

• ローカル状態：useState
• コンポーネント間共有：Context API
• 大規模アプリ：Zustand / Jotai（軽量） / Redux Toolkit（大規模）

ディレクトリ構成の例

src/
├── components/    # 再利用可能なUI部品
├── pages/         # ルートごとのページ
├── hooks/         # カスタムHooks
├── stores/        # 状態管理
├── types/         # TypeScript型定義
└── utils/         # 汎用ユーティリティ

Next.jsと組み合わせることでSSR・SSG・ファイルベースルーティングも活用できます。まず公式チュートリアルを完走することをおすすめします。