Reactで作るアニメ付きドリルダウンUI ─ 状態設計から実装まで

業務でドリルダウン（UIパターン）を実現するコンポーネントを実装する機会がありました。状態管理やアニメーションの実装に関していろいろ考えることが多かったので、実装中何を考えていたのかをトレースして記事にまとめました。 ドリルダウンに関する説明はソシオメディアさんの記事がわかりやすいので、そちらを参照してください。 実装したいコンポーネントのゴールを考える ドリルダウンを実装するにあたり、どのようなデータをどのようなAPIのコンポーネントで扱いたいかを考えます。 扱うデータは、大分類>中分類>小分類のように階層的になっているデータを想定します。たとえば次のような部署>チーム>メンバーが階層構造になっているデータです。 type Department = { id: string; name: string; teams: Team[] }; type Team = { id: string;