1. 状態（state）の管理方法

A. 単純な開閉フラグで管理するパターン

例tsxApply to page.tsxconst [isModalOpen, setIsModalOpen] = useState(false);<Dialog** _**open**_**={isModalOpen}** _**onOpenChange**_**={setIsModalOpen}>  {/* ... */}

特徴

• 状態はtrue/falseのみ（開いているか閉じているか）
• 副作用なし（開閉以外の処理は不要）
• 用途：お知らせモーダル、単純な確認ダイアログなど

---

B. 選択データで管理するパターン

例tsxApply to page.tsxconst [selectedWork, setSelectedWork] = useState<WorkType | null>(null);<Dialog** _**open**_**={!!selectedWork}** _**onOpenChange**_**={(**_**open**_**) => !open && setSelectedWork(null)}>  {/* ... */}

特徴

• 状態は「選択中のデータ」（nullなら閉じている、データがあれば開いている）
• 副作用あり（閉じるときに選択データをリセット）
• 用途：詳細表示モーダル、編集モーダル、動画再生モーダルなど

---

2. 副作用（side effect）の発生場所

A. onOpenChangeで副作用を発生させる

• モーダルが閉じるタイミングで「選択データをリセット」などの処理を行う
• 例：onOpenChange={(open) => !open && setSelectedWork(null)}

B. 開閉のみで副作用なし

• モーダルの開閉だけを管理し、他の処理は不要
• 例：onOpenChange={setIsModalOpen}

---

3. 状態管理の選択基準

| 管理方法 | 状態の内容 | 副作用の有無 | 適した用途 |

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

| フラグ（boolean）| 開閉のみ | なし | 単純なモーダル |

| データ（object） | 選択中のデータ | あり | 詳細・編集・動画再生などのモーダル|

---

4. 設計のポイント

• 「開閉だけ」ならbooleanでOK。
• 「何かのデータと連動」するなら、そのデータ自体をstateに持つ。
• 閉じるときに「状態リセット」などの副作用が必要なら、onOpenChangeで処理を追加。
• 状態管理の粒度は「再利用性」「拡張性」「シンプルさ」のバランスで決める。

---

5. まとめ

• 状態管理と副作用の設計は、UIの使い勝手や保守性に直結します。
• 今回のような違いを理解しておくことで、要件に応じた最適な実装が選べるようになります。