状態リフティング

概要

共有状態の配置と伝播設計を整理し、最小限の状態リフティングで一貫したデータフローを維持するスキル。

Reactにおける状態管理の基本原則から高度なパターンまでをカバーする。

ワークフロー

```

analyze-requirements → design-state-placement → implement-lifting → evaluate-context → apply-patterns

```

Phase 1: 状態共有の要件整理

**目的**: 共有状態と共通親の候補を特定する

**アクション**:

1. コンポーネントツリーを把握する

2. 状態を使用するコンポーネントを列挙する

3. 最も近い共通親を特定する

**参照**: `references/state-placement-guide.md`

**Task**: `agents/sl-001-analyze-requirements.md` を参照

Phase 2: Props経由の状態伝播

**目的**: 状態と更新関数をpropsで一方向に伝播する

**アクション**:

1. 親コンポーネントに状態を集約する

2. 子コンポーネントへpropsで伝播する

3. 更新関数をメモ化し依存関係を整理する

**参照**: `references/colocation-principles.md`

**Task**: `agents/sl-003-props-state-passing.md` を参照

Phase 3: Context導入判断

**目的**: Prop Drillingが過剰な場合にContext導入を判断する

**アクション**:

1. Props伝播階層と頻度を確認する

2. Prop Drillingの負荷を評価する

3. Context導入のメリット/デメリットを整理する

**参照**: `references/prop-drilling-solutions.md`, `references/context-patterns.md`

**Task**: `agents/sl-005-context-api-introduction.md` を参照

Phase 4: 複合コンポーネント設計

**目的**: Compound Componentで共有状態を局所化する

**アクション**:

1. 共有状態を局所化する構成を決める

2. 子コンポーネントの役割を定義する

3. APIと使用例を設計する

**テンプレート**: `assets/compound-component-template.md`

**Task**: `agents/sl-007-compound-component-pattern.md` を参照

Task仕様ナビ

| Task | 起動タイミング | 入力 | 出力 |

| --------------------------------- | -------------- | ---------------------------- | ---------------------- |

| sl-001-analyze-requirements | Phase 1開始時 | コンポーネント情報、状態一覧 | 状態共有要件レポート |

| sl-003-props-state-passing | Phase 2開始時 | 状態共有要件、既存コード | Props伝播設計 |

| sl-005-context-api-introduction | Phase 3開始時 | Props伝播設計 | Context導入判断 |

| sl-007-compound-component-pattern | Phase 4開始時 | Context判断、設計要件 | Compound Component設計 |

**詳細仕様**: 各Taskの詳細は `agents/` ディレクトリを参照

ベストプラクティス

すべきこと

| 推奨事項 | 理由 |

| ---------------------------------- | ------------------------------ |

| 共通親が最小の箇所に状態を配置する | 過度なリフティングを避けられる |

| Props経由の一方向フローを維持する | デバッグ容易性が高まる |

| Context導入は必要最小限に留める | 依存範囲が広がり過ぎるのを防ぐ |

| 派生状態は計算で済ませる | 状態重複を避けられる |

| コンポジションパターンを検討する | Prop Drillingを根本解決できる |

避けるべきこと

| 禁止事項 | 問題点 |

| --------------------------- | ------------------------ |

| 深いProp Drillingを放置 | 保守性と可読性が低下する |

| 不要なグローバル化 | 影響範囲が拡大する |

| 状態の重複管理 | 不整合が発生する |

| Contextの乱用 | 再レンダリングを誘発する |

| 高頻度更新データをContext化 | パフォーマンスが劣化する |

リソース参照

references/（詳細知識）

| リソース | パス | 読込条件 |

| ----------------- | ------------------------------------------------------------------------------ | -------------------------- |

| 状態配置ガイド | [references/state-placement-guide.md](references/state-placement-guide.md) | 共有状態の配置判断時 |

| Prop Drilling対策 | [references/prop-drilling-solutions.md](references/prop-drilling-solutions.md) | Prop Drilling対策検討時 |

| Contextパターン | [references/context-patterns.md](references/context-patterns.md) | Context導入判断時 |

| Colocation原則 | [references/colocation-principles.md](references/colocation-principles.md) | 状態と利用箇所の距離判断時 |

scripts/（決定論的処理）

| スクリプト | 機能 | 使用例 |

| ----------------------------- | -------------- | ----------------------------------------------------- |

| `analyze-state-structure.mjs` | 状態構造の分析 | `node scripts/analyze-state-structure.mjs <file.tsx>` |

| `log_usage.mjs` | 使用記録の保存 | `node scripts/log_usage.mjs --result success` |

| `validate-skill.mjs` | スキル構造検証 | `node scripts/validate-skill.mjs` |

assets/（テンプレート）

| アセット | 用途 |

| -------------------------------- | ---------------------------- |

| `compound-component-template.md` | Compound Component概要・索引 |

| `select-template.md` | Selectコンポーネント |

| `accordion-template.md` | アコーディオンコンポーネント |

| `tabs-template.md` | タブコンポーネント |

| `modal-template.md` | モーダルコンポーネント |

| `context-provider-template.md` | Context Providerテンプレート |

変更履歴

| Version | Date | Changes |

| ------- | ---------- | --------------------------------------------- |

| 2.2.0 | 2026-01-06 | compound-component-template分割、実装事例追加 |

| 2.1.0 | 2026-01-03 | 18-skills.md仕様に完全準拠、構造整理 |

| 2.0.0 | 2026-01-02 | ワークフロー再編 |

| 1.0.0 | 2025-12-28 | 初版作成 |