// 実装例：手動DOM操作 vs React
// ファイル：VirtualDomDemo.jsx
- 1000件のアイテム生成・更新
- 処理時間の測定・比較
- シンプルなデータ構造

// 実装例：差分検出の威力体感
// ファイル：VirtualDomAdvanced.jsx
- 複雑なデータ構造（進捗バー、タグ、優先度）
- 部分更新（10%のアイテムのみ）
- 手動差分管理の複雑さを実感

// 実装予定：Virtual DOMツリー可視化
// ファイル：VirtualDomVisualizer.jsx
- Virtual DOMツリーの表示
- 差分計算プロセスの可視化
- Reconciliation（調停）の理解

// 実装例：同じ機能を2つの方法で実装
// ファイル：ClassVsFunctionDemo.jsx

// クラスコンポーネント版
class CounterClass extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  // ライフサイクルメソッド...
}

// 関数コンポーネント + Hooks版
function CounterFunction() {
  const [count, setCount] = useState(0);
  // useEffectでライフサイクル...
}

// 実装例：ロジックの再利用
// ファイル：CustomHooksDemo.jsx

// カスタムHook
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);
  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);
  return { count, increment, decrement };
}

// 複数のコンポーネントで再利用
function Counter1() {
  const { count, increment } = useCounter(0);
  // ...
}

function Counter2() {
  const { count, decrement } = useCounter(10);
  // ...
}

// 実装例：データフェッチとクリーンアップ
// ファイル：EffectHooksDemo.jsx
- APIからのデータ取得
- リアルタイム通信（WebSocket）
- タイマー管理
- クリーンアップの重要性

// 実装例：複雑になるuseStateの管理
// ファイル：StateComplexityDemo.jsx
- 50個の相互依存する状態
- useState地獄の体験
- デバッグの困難さ

// 実装例：同じ機能をuseReducerで実装
// ファイル：ReducerDemo.jsx

const initialState = {
  user: null,
  todos: [],
  filter: 'all',
  loading: false
};

function appReducer(state, action) {
  switch (action.type) {
    case 'LOGIN':
      return { ...state, user: action.user };
    case 'ADD_TODO':
      return { ...state, todos: [...state.todos, action.todo] };
    // ...
  }
}

// 実装例：コンポーネント間での状態共有
// ファイル：ContextDemo.jsx
- Provider/Consumer パターン
- prop drilling 問題の解決
- パフォーマンス考慮事項

// 実装例：同じアプリを異なる手法で実装
// ファイル：StateManagementComparison.jsx
- Pure React（useState + Context）
- Zustand
- Redux Toolkit (簡易版)

// 実装例：再利用可能なコンポーネント群
// ファイル：UIComponentsDemo.jsx

// Button コンポーネント
function Button({ variant, size, onClick, children, ...props }) {
  return (
    <button 
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
      {...props}
    >
      {children}
    </button>
  );
}

// Input コンポーネント
// Modal コンポーネント
// Card コンポーネント

// 実装例：複雑なUIの構造化
// ファイル：CompoundComponentsDemo.jsx

// 使用例
<Select onValueChange={handleChange}>
  <Select.Trigger>
    <Select.Value placeholder="選択してください" />
  </Select.Trigger>
  <Select.Content>
    <Select.Item value="option1">オプション1</Select.Item>
    <Select.Item value="option2">オプション2</Select.Item>
  </Select.Content>
</Select>

// 実装例：ロジックの抽象化パターン
// ファイル：AdvancedPatternsDemo.jsx

// Render Props
function DataFetcher({ url, render }) {
  const [data, setData] = useState(null);
  // データ取得ロジック...
  return render(data);
}

// HOC
function withLoading(Component) {
  return function WithLoadingComponent(props) {
    // ローディング状態管理...
    return <Component {...props} />;
  };
}

// 実装例：最適化テクニック
// ファイル：PerformanceDemo.jsx
- React.memo の使用
- useMemo と useCallback
- コンポーネントの分割戦略
- 仮想化（virtualization）