react

このスキルを使用するタイミング

ユーザーが次のことを希望する場合は、このスキルを使用してください。

• React コンポーネントと JSX でユーザーインターフェースを構築する
• フックを使ってコンポーネントの状態とライフサイクルを管理する
• 再利用可能で合成可能な React コンポーネントを作成する
• Context API または状態管理ライブラリ（Redux、Zustand）を使用する
• Vite または Create React App で React プロジェクトをセットアップする
• React Router でルーティングを実装する
• レンダリングのパフォーマンスを最適化する（React.memo、useMemo、遅延読み込み）

このスキルの使用方法

ワークフロー

1. 依頼の領域を特定します（コンポーネントの作成、状態管理、ルーティング、パフォーマンスなど）
2. 公式ドキュメントのパターンに従って、React のベストプラクティスを適用します
3. 関数コンポーネントとフックを使って JSX/TSX コードを生成します
4. 確認します。コンポーネントツリーが正しくレンダリングされ、状態が適切に伝播することを確認します

1. 関数コンポーネント

import { useState } from 'react';

interface UserCardProps {
  name: string;
  email: string;
  onSelect: (name: string) => void;
}

export function UserCard({ name, email, onSelect }: UserCardProps) {
  return (
    <div className="user-card" onClick={() => onSelect(name)}>
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}

2. 状態とエフェクト

import { useState, useEffect } from 'react';

export function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

3. カスタムフック

import { useState, useCallback } from 'react';

function useToggle(initial = false): [boolean, () => void] {
  const [value, setValue] = useState(initial);
  const toggle = useCallback(() => setValue(v => !v), []);
  return [value, toggle];
}

4. Context パターン

import { createContext, useContext, useState, ReactNode } from 'react';

const ThemeContext = createContext<{ dark: boolean; toggle: () => void } | null>(null);

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [dark, setDark] = useState(false);
  const toggle = () => setDark(d => !d);
  return <ThemeContext.Provider value={{ dark, toggle }}>{children}</ThemeContext.Provider>;
}

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
  return ctx;
}

ベストプラクティス

• コンポーネントは小さく保ち、単一の責務に集中させます
• 状態は最も近い共通の祖先に引き上げ、広範囲で共有する状態には Context を使用します
• リストをレンダリングするときは、常に安定した key プロパティを指定します
• useEffect の戻り値の関数で副作用（サブスクリプション、タイマー）をクリーンアップします
• 不要な再レンダリングを防ぐため、JSX 内でオブジェクトや関数を新たにインライン作成するのは避けます
• 大きなルートをコード分割するには、React.lazy と Suspense を使用します

リソース

• 公式ドキュメント：https://react.dev/
• React フックのリファレンス：https://react.dev/reference/react
• Create React App：https://create-react-app.dev/

キーワード

react、React Hooks、JSX、TSX、コンポーネント、状態、props、useEffect、useState、Context API、関数コンポーネント、パフォーマンス、memo、遅延読み込み